anthony nguyen

software engineer

Feeling Tracker

This is a single-page feeling tracker app, built with React and designed with simplicity🤗. People can use this instead of Apple Notes, or Windows Sticky Notes if they prefer the browser version, and of course, for the quite simple notes!!

Basically, they choose their mood of the day (in 5 degrees, from awful😫 to amazing😄), and add some notes why they feel like that. The notes and mood are stored in the browser (local storage) with the date chosen, and also they can view of any day's note throughout the year. (And they are not deleted unless you clear the browser cache, and def uninstalling your fancy browser 😉)

Technically, I used react-context for quite some global state management (Why not redux? b/c react context is just enough for this app, lol), react-window for virtualization of the 365 date card elements on the bottom (it was my first time using it 🙈, but it went fairly well), react-spring for a bit of transition animation ... and yeah, used CSS-in-js for styling!

Sounds funny? Check screenshots below, or the website.

Tools & Technologies The tech stack I was involved with.

  • React 16.13
  • React Context
  • React Spring
  • Virtualization
  • Styled-components