Skip to content
Submitted 10 months ago

Mood Tracking App (Next, TypeScript, Prisma ORM, React Aria, RHF)

d3, next, prisma, react-aria, motion
P
LVL 5
Darkstarβ€’1,520
@DarkstarXDD
A solution to the Mood tracking app challenge

Solution retrospective


What are you most proud of, and what would you do differently next time?

πŸ“Œ If needed, details for the demo account can be found in the tooltip next to the email field on login and signup forms.

πŸ“Œ In the repo README's Technical Details section, I have extensively explained what and how I have done things in this project. So I won't copy paste them again here.

Built with πŸ”¨

  • Next.js
  • TypeScript
  • Tailwind
  • Prisma ORM
  • React Aria Components
  • Motion
  • React Hook Form
  • Zod
  • D3
  • Supabase (Postgres)
  • Cloudinary

Features ✨

  • User authentication with session management using JWTs.
  • Daily mood logging including feelings, sleep duration, and reflection.
  • Today’s entry summary displaying the mood, sleep, and note logged for the current day.
  • Trend comparison showing average mood and sleep from the last 5 entries, along with how they compare to the previous 5 entries.
  • Bar chart visualization of mood and sleep patterns over time.
  • Profile management with support for updating name and avatar.

Improvements and few more features I would like to add πŸ“

  • One main thing this project lack is automated testing, something I never looked at. Will look into start writing tests in my next project and maybe come and update this as well. Also want to start using Storybook as well.
  • Currently only the 10 latest moods get displayed in the chart, but I would like to add a select and allow the user to cotnrol it. Past 7 days, past month, past 3 months etc.
  • Adding an account deletion option.
What specific areas of your project would you like help with?

Any sort of feedback is appreciated. Also please let me know if you encounter any bugs.

Code
Loading...

Please log in to post a comment

Log in

Community feedback

No feedback yet. Be the first to give feedback on Darkstar’s solution.

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord