Moodify — Daily Mood Tracker

Overview

Moodify helps users track and visualize their daily emotional well-being. Log your mood each day and build a comprehensive history of how you've been feeling throughout the year, visualized on an interactive calendar.

Features

• User Authentication — Secure sign-up and login via Firebase Authentication
• Daily Mood Tracking — Log your mood using a simple, intuitive interface (😭 to 😍)
• Interactive Calendar — View mood history on a beautifully color-coded responsive calendar
• Mood Statistics — Calculate and display average mood and total days tracked
• Responsive Design — Seamless experience on both desktop and mobile

Tech Stack

• Framework: Next.js 14 (App Router)
• UI Library: React 18
• Styling: Tailwind CSS
• Backend & Auth: Firebase (Auth + Cloud Firestore)
• Typography: Custom fonts via next/font/google (Fugaz One & Open Sans)

Getting Started

cd moods
npm install
npm run dev

Environment Variables

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

Project Structure

• /app — Next.js App Router (pages, routing, global styles)
• /components — Modular React components (Dashboard, Calendar, Hero, Login)
• /context — Global state management with React Context API
• firebase.js — Firebase initialization and service exports

Links

• Live Demo
• GitHub