🌙 SleepTracker

A modern, responsive, and feature-rich Next.js web application designed to help users monitor, track, and improve their sleep habits. With interactive charts, personalized sleep statistics, and secure user profiles, SleepTracker provides actionable insights to help you wake up feeling refreshed.

---

🚀 Tech Stack

• Framework: Next.js 16 (App Router)
• Frontend Logic & Rendering: React 19 & TypeScript
• Styling: Tailwind CSS v4 with PostCSS
• Authentication: Clerk Auth
• Database & ORM: Prisma ORM with PostgreSQL (hosted on Neon)
• Data Visualization: Chart.js & React ChartJS 2
• Caching & State Management: Server Actions & revalidatePath for real-time dashboard updates

---

✨ Features

1. Secure Authentication & User Syncing

• Secure login, registration, and user session management powered by Clerk.
• Automated user profile synchronization: the custom checkUser helper automatically registers new Clerk users in the PostgreSQL database upon their first visit and keeps existing ones synced.

2. Intuitive Sleep Logger

• Date Picker: Input sleep details for any chosen day.
• Sleep Quality Selector: Tag your sleep state (🌞 Refreshed, 😴 Tired, 😐 Neutral, 😫 Exhausted, ⚡ Energetic).
• Hours Slept Slider: Log exact durations between 0 and 12 hours in steps of 0.5 hours.
• Smart Updates: If you enter a record for an existing date, the app automatically updates the record instead of creating a duplicate.

3. Analytics Dashboard

• Average Sleep Tracker: Computes your precise monthly average sleep duration down to hours and minutes.
• Best and Worst Sleep Metrics: Displays your longest and shortest sleep durations.
• Sleep Record Chart: Interactive bar chart visualizing the last 10 sleep sessions, color-coded based on healthy benchmarks (teal/green for $\ge 7$ hours, red/pink for $< 7$ hours).

4. Interactive History Log

• A clean list of recent records showing date, duration, and sleep mode.
• Threshold alerts: Left-hand border visual indicators (Green for $\ge 7$ hours, Red for $< 7$ hours) to instantly highlight sleep deficiencies.
• Inline delete functionality with responsive loading states.

5. Static & Support Pages

• Guest Landing Page: Includes product introduction, FAQs, and user testimonials.
• About Page: Outlines the core mission, benefits, and development story of the application.
• Contact Page: A fully working email-based feedback form targeting support@sleeptracker.com using native mailto integration.

---

📂 Project Architecture

├── app/
│   ├── about/             # About Page implementation
│   ├── actions/           # Next.js Server Actions (CRUD Operations, DB Queries)
│   ├── contact/           # Contact Page implementation
│   ├── sign-in/           # Clerk authentication route
│   ├── sign-up/           # Clerk registration route
│   ├── globals.css        # Global CSS stylesheet & Tailwind imports
│   ├── layout.tsx         # Core layout containing Navbar, Footer, and ClerkProvider
│   └── page.tsx           # Dashboard / Guest Home router
├── components/            # Reusable UI & Chart Components
├── lib/
│   ├── checkUser.ts       # Clerk-to-Prisma user sync utility
│   └── db.ts              # Global Prisma Client instance
├── prisma/
│   ├── schema.prisma      # DB Schema definition (PostgreSQL)
│   └── migrations/        # Database migrations history
├── public/                # Static assets (images, icons)
├── types/                 # Shared TypeScript interfaces
├── package.json           # Project dependencies & scripts
└── tsconfig.json          # TypeScript configurations

---

🗄️ Database Schema

The database uses PostgreSQL via Prisma. It contains two relational tables:

User Model

Represents registered users authenticated through Clerk:

• id: Primary key (UUID).
• clerkUserId: Unique identifier linked to Clerk.
• email: User's primary email address.
• name: User's display name.
• imageUrl: User's avatar URL.
• createdAt & updatedAt: Timestamps.

Record Model

Stores specific sleep tracking records:

• id: Primary key (UUID).
• text: Sleep quality label (e.g., "Refreshed", "Tired").
• amount: Numeric value indicating hours slept.
• date: Date of the sleep entry (defaults to current timestamp).
• userId: Foreign key linking to the User table (cascades on delete).

---

⚙️ Configuration & Setup

1. Prerequisites

Ensure you have the following installed on your machine:

• Node.js (v18.x or later)
• npm or yarn

2. Environment Variables

Create a .env file in the root directory and configure the following credentials:

# Database connection string (PostgreSQL / Neon)
DATABASE_URL="postgresql://username:password@hostname/dbname?sslmode=require"

# Clerk authentication keys
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="your_clerk_publishable_key"
CLERK_SECRET_KEY="your_clerk_secret_key"

# Clerk redirect routes
NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL="/"
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL="/"

3. Installation

Clone the repository and install dependencies:

npm install

4. Database Setup

Sync the database schemas using Prisma:

npx prisma db push

5. Running the Application

Run the Next.js development server:

npm run dev

Open http://localhost:3000 to view it in the browser.