Welcome to Chill Lounge, a personalized self-care guide inspired by youfeellikeshit.com. It is a single-page application built with React App and with 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.
-
Front End:
React/Redux/Hooks- serves as the main framework for this appReact Calendar- serves as the component library for this app's wellness report calendarCocktailDB API- serves as source for this app's external cocktail images APIAdvice Slip API- serves as source for this app's external message APINetlify- hosts the frontend site for deployment
-
Back End:
Ruby on Rails- hosts the database serverPostgreSQL- serves as the database management systemBCrypt- encrypts/decrypts users' passwordsJWT- encodes/decodes the web tokens for user authenticationHeroku- serves as the backend platform for deployment