Skip to content

anthowen/feeling-tracker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

45 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Netlify Status

Introduction

A simple one-page app for tracking your daily mood, based off the design reference.

Live link

https://feeling-tracker.netlify.app/

Technical side

  • Bootstraped with CRA

  • State management with Context API

  • Styling with styled-components

  • Virtualization with react-window

  • Animation with react-spring

Design & Functionality

  • 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

Bonus Points

  • 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

      screenshot

  • 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

Available Scripts

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.