Moodify
Moodify is a mood-tracking application designed to help users log their daily emotions, thoughts, and events to gain insights into their emotional well-being. The idea originated from my experience during an intense academic term, where I observed that my classmates and I were struggling with stress and pressure due to our workload. This app aims to help users recognize patterns in their moods and make informed decisions to improve their mental health.
Technologies
- React
- Next.js
- Vite
- TanStack Router
- TailwindCSS
- Shadcn
- Radix UI
- Chart.js
- TypeScript
- TanStack Query
- TanStack Form
- Drizzle ORM
- Bun
- Hono
- PostgreSQL
- Kinde Auth
- Zod
Link
Purpose
Emotions can be complex and hard to keep track of. In a bid to help users better understand their emotional well-being, Moodify was developed. The application exposes the user to prompts like tracking daily moods, thoughts, and events. As a result, the user is able to get precise insights about themselves which then help in self-awareness and maintaining one's mental health. This service is of utmost importance to students and professionals who are facing chronic stress.
While Moodify's primary audience is students, its use case also extends to family members and professionals seeking to monitor their own emotional health trends. The app is designed with scalability in mind, ensuring it remains functional and efficient for both individual users and organizations.
My Role
As the sole developer and designer of Moodify, I was responsible for:
- Researching and conceptualizing the app's functionality.
- Designing the user interface and experience.
- Developing the frontend and backend infrastructure.
- Implementing authentication and database management.
- Optimizing performance and ensuring data security.
Technologies Used
- Next.js: For server-side rendering and optimized performance.
- TanStack Query & Drizzle ORM: Allows efficient real-time data handling without performance trade-offs.
- Bun & Hono: Enables a lightweight, fast backend infrastructure.
- PostgreSQL: A Reliable and scalable database choice for storing user data securely.
- Kinde Auth: Provides seamless authentication while maintaining high-security standards.
- TailwindCSS, Radix UI, and Shadcn: For a modern, clean, and easily customizable UI.
Development and Thought process
The project started with defining the core functionalities Moodify needed:
- Mood Logging: Users should be able to record daily moods with notes.
- Data Visualization: Insights should be provided to help users recognize emotional patterns with the Mood Chart and the Mood Count feature.
- Security & Authentication: Ensuring personal data remains secure.
- Scalability: The app should support both individuals and organizations.
I mapped out a user journey to determine the optimal user flow and then wireframed different screens, ensuring an intuitive experience. By leveraging Next.js and server-side rendering (SSR), I ensured that the app remained performant, even as data volumes increased.
Artboards and Features
Home Screen & Mood Overview: In the home screen, the most recent user mood captured, a mood chart, mood count and calendar view for date based tracking is availble. It also contains inspiring quotes to motivate people and uplift their mood.
Mood Tracking Interface: Users can log their daily mood using a simple and accessible UI. Each mood is colour-coded for easy recognition. Users can add detailed notes and categories.
View All Moods: Users can view a full history of their recorded moods in a clean, organized layout by date. They also can modify and delete their mood.
Challenges
Data Privacy: Handling sensitive user data meant implementing encryption and secure authentication. I used Kinde Auth for security and encrypted database storage.
Conclusion and Reflection
I successfully built a secure, scalable, and visually appealing application. The app provides meaningful insights, providing mood tracking for users through visualized mood trends.
Next Steps
- Photo Uploads: Enable users to add photos to mood logs.
- Expanded Mood Categories: Introduce sub-categories for more detailed tracking.
- Mood Reports: Implement a feature that generates mood reports for the users.