A simple one-page app for tracking your daily mood, based off the design reference.
https://feeling-tracker.netlify.app/
-
Bootstraped with CRA
-
State management with Context API
-
Styling with styled-components
-
Virtualization with react-window
-
Animation with react-spring
-
Allow user to choose 1-5 rating for their day
-
The custom 1-5 input affects multiple components, refer to the designs
-
Allow user to enter and save a short message about why they felt that way today
-
When the user saves the card, the list item should update with the rating and truncated message summary
-
Saving the card replaces the save button with a saved timestamp
-
User can select a day to view and edit past entries
-
User can scroll horizontally without pagination for the current year (2020), starting at the current day
-
When user hovers over list items, the opacity of each list item is increased
-
Month at the bottom should update as the user scrolls in time
-
Save data via local storage
-
Add hover/focus states to the buttons
-
Add transitions for the card and list items on page load
-
Add transitions when switching between cards
The whole background graident is faded in and out when status changes. -
Custom horizontal scrollbar implementation
-
Make this responsive
-
Support tablet mode
-
Support mobile mode
-
-
Whatever you think might make this better
-
Virtualized list
There are about 8 ~ 10 items are added to the DOM and rendered. This gives better UX and fast scroll speed.
-
Accessbility through keyboard control
⬅️ Select Prev day
➡️ Select Next day
HOME key: Select Today
END key: Select Jan 01
-
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.