CK Logo
Post main image

Flatiron Chill Lounge

A self-care guide to help you strengthen personal wellness.

#1 Project of the Week

Welcome to Chill Lounge (, a personalized self-care guide inspired by It is a single-page application built with React App and with the implementation of Hooks and Redux. Chill Lounge has 3 main features: Guide - contains 5 sets of questions; each subsequent question or guide is dynamically rendered based on user input; Wellness Report - shows the results of user inputs; each set of result contains 4 wellness indicators (eat/sleep/exercise/mood) and can be filtered by date; Message Board - contains all message cards generated by user; user can also search or filter specific cards. User Authentication/Authorization: When the page loads, a new user will be asked to sign up, while previously logged-in user (who did not click "log out" before leaving the page) will be re-directed to the Guide page. External API calls: When the user completes the guide, s/he can choose to claim a free cocktail, which triggers the app to fetch a random cocktail image and a random life advice slip, generating a new card belonging to the user. The user can then keep clicking on "hit me with another cocktail/message"; each click event will re-generate a new random cocktail image or life advice. When the user clicks "post it to message board", s/he will be redirected to Message Board page with their newly-created cards shown on top. Dev Tools -- Front End: React/Redux/Hooks - serves as the main framework for this app React Calendar - serves as the component library for this app's wellness report calendar CocktailDB API - serves as source for this app's external cocktail images API Advice Slip API - serves as source for this app's external message API Netlify - hosts the frontend site for deployment Dev Tools -- Back End: Ruby on Rails - hosts the database server PostgreSQL - serves as the database management system BCrypt - encrypts/decrypts users' passwords JWT - encodes/decodes the web tokens for user authentication Heroku - serves as the backend platform for deployment