Moody: Your Personal AI Powered Mood Tracker

Moody is a minimalistic and modern mood-tracking web application built with Next.js, React, and Firebase. Designed for simplicity and ease of use, it allows users to log their daily moods, visualize their mood history, and manage their account securely with authentication. The app features a beautiful UI, accessibility enhancements, and real-time feedback—all while maintaining a clutter-free, focused experience.

🚀 Features

• User Authentication: SignUp, LogIn, and LogOut securely using Firebase Authentication.
• Mood Tracking: Log your daily mood with a single click and view your mood history on a calendar.
• Dashboard: Personalized dashboard showing mood stats, average mood, current streak, and time remaining in the day.
• Quick Journal: Log a daily short note about what happened today.
• AI-Powered Journal Insights: Get instant, personalized insights, mood analysis, emotional triggers, and actionable pro tips for every journal entry using Google Gemini AI via Firebase AI SDK.
• AI-Generated Creative Placeholders: Every time you visit the journal, the input placeholder is uniquely generated by AI to inspire your writing.
• Animated Skeleton Loader: Enjoy a modern animated shimmer while the AI crafts your journal prompt.
• Emotional Triggers Tags: See what influenced your mood, with AI-generated tags for each journal entry.
• Quote of the Day: Be greeted with a motivational or thoughtful quote every time you visit the homepage, helping set a positive tone for your day.
• Accessibility: Show/hide password toggle for better accessibility.
• Error & Success Feedback: Toast notifications for login errors, registration errors, and successful logins.
• Responsive Design: Fully responsive and mobile-friendly UI using Tailwind CSS.
• Modern UI: Clean, attractive, and easy-to-use interface with a minimalistic approach.

🆕 Recent Features & Improvements

• Animated Gradient Glow Background: A beautiful, subtle animated glow effect that moves with scroll and sits behind all content for a modern look.
• Animated Divider in Hero: The Hero section now features a custom animated divider with glowing orb and floating particles.
• Improved Calendar Navigation: Decorative backgrounds in the calendar no longer block navigation button clicks.
• Streak Calculation Fix: Streaks are now calculated accurately and stored in the database, reflecting only consecutive days with mood entries.
• Login Toast Logic Improved: Success toast only appears on actual login, not on every refresh.

🛠️ Tech Stack

• Next.js (App Router)
• React 19+
• Firebase (Authentication, Firestore, and AI SDK)
• Google Gemini AI (via Firebase AI SDK)
• Tailwind CSS (for easy styling)
• react-hot-toast (for notifications)

📦 Getting Started

1. Clone the repository:

   git clone https://www.github.com/aditya-2k23/moody.git
   cd moody

2. Install dependencies:

   npm install

3. Set up environment variables:
   Copy .env.example to .env and fill in your Firebase credentials.

   NEXT_PUBLIC_API_KEY=your_api_key
   NEXT_PUBLIC_AUTH_DOMAIN=your_auth_domain
   NEXT_PUBLIC_PROJECT_ID=your_project_id
   NEXT_PUBLIC_STORAGE_BUCKET=your_storage_bucket
   NEXT_PUBLIC_MESSAGING_SENDER_ID=your_messaging_sender_id
   NEXT_PUBLIC_APP_ID=your_app_id

4. Run the development server:

   npm run dev

   Open http://localhost:3000 to view the app.

📝 How to Use

1. Sign Up: Click the "Sign Up" button on the homepage CTA to create a new account.
2. Log In: Use your credentials to log in. If you enter a wrong password or non-existent user, a toast will notify you.
3. Dashboard: After logging in, you'll be redirected to your dashboard where you can:
   • Log your mood for the day
   • View your mood history on a calendar
   • See stats like average mood, current streak, and number of days tracked
   • Log a daily journal to maintain a better history of the reasons of your current mood
   • Get instant AI-powered insights, emotional triggers, and pro tips for every journal entry
   • Enjoy a new creative placeholder every time you open the journal
4. Show/Hide Password: Use the eye icon in the password field to toggle visibility.
5. Log Out: Use the logout button in the dashboard to end your session.

📁 Project Structure

• app/ - Next.js app directory (routing, pages)
• components/ - Reusable React components (Button, Input, Dashboard, etc.)
• context/ - React context for authentication
• public/ - Static assets
• utils/ - Utility functions (including AI prompt and placeholder logic)
• firebase.js - Firebase configuration and AI SDK setup

🙏 Credits

• Built with 💜 by Aditya
• Inspired by Smoljames mood-tracking app Broodl