Mood Tracker

This is a solution to the Mood Tracker project, which helps users log and track their daily moods. This project provides an intuitive and simple interface where users can log their mood and view trends over time.

Table of Contents

• Overview
  • The Challenge
  • Screenshot
  • Links
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The Challenge

Users should be able to:

• Log their mood on a daily basis with a description.
• View mood trends over time using interactive charts.
• View their profile and update their details.
• Be able to securely register, log in, and log out.

Screenshot

Links

• Solution URL: https://github.com/ussyalfaks/mood-tracker
• Live Site URL: https://mood-tracker-live-site.com

Built with

• React.js
• React Context API
• Tailwind CSS
• Node.js
• Express
• MongoDB (or another database)
• JWT for authentication
• Chart.js for mood trends visualization

What I learned

Here’s a summary of what I learned while building the Mood Tracker app:

User Authentication:

I successfully implemented authentication features such as registration, login, and profile management using JWT (JSON Web Tokens) for secure communication between the client and the server.

Mood Tracking:

I used React Context API for state management, handling the user's mood entries and ensuring smooth updates between the frontend and backend.

Responsive Design:

By utilizing Tailwind CSS, I created a responsive layout that adjusts to different screen sizes, ensuring that the app looks great on both desktop and mobile devices.

Data Visualization:

I integrated Chart.js to display mood trends over time, allowing users to visualize their mood data in an engaging and interactive way.

Security:

I implemented secure authentication with password hashing and token-based authentication to protect user data.

Continued development

Accessibility (a11y):

Focus on improving accessibility by using semantic HTML elements and ARIA attributes to make the Mood Tracker app more inclusive. I plan to ensure keyboard navigation and screen reader compatibility.

Mood Data Analysis:

In the future, I want to implement more advanced data analysis features, such as tracking correlations between mood and external factors (e.g., weather, exercise, etc.). and changing the state management to Redux From React Context API

Enhanced Mobile Experience:

While the app is already responsive, I plan to further enhance the mobile experience by optimizing layouts and testing across a wider range of devices.

User Notifications:

I'll add user notifications for events like mood logging success, reminders to log moods, and insights about their mood trends.

Author

• GitHub - @ussyalfaks
• Twitter - @usman_alfaki