A modern, glass-morphic web application that helps users understand and improve their sleep patterns.

1. Dashboard – At-a-glance metrics: total hours, sleep score, and quality trend, with purple glass UI cards.
2. Sleep Log – Friendly form to record date, bedtime, wake time, 1-10 quality rating, and notes. Prevents duplicate entries.
3. Statistics & Analytics – Interactive charts (average duration, quality heatmap, bedtime vs. wake trends) powered by Chart.js.
4. Insights & Recommendations – AI-style tips plus smart bedtime reminder based on user goals and recent patterns.
5. Themes & Design – Tailwind CSS, lilac background, liquid-glass cards, responsive layout, dark-mode toggle.
6. Local Persistence – Zustand + localStorage keep data even after refresh.
7. Unit Tests – Vitest + React Testing Library with comprehensive tests for SleepLog.

• React 18 + TypeScript
• Vite for lightning-fast dev/build
• Tailwind CSS for utility styling
• Zustand (state) with middleware persist
• Chart.js & react-chartjs-2 for data viz
• Vitest / RTL / jest-dom for testing

# install deps
npm install

# start dev server
npm run dev

# run unit tests (watch)
npm test

The app runs at http://localhost:5173/ by default.

src/
 ├─ pages/       # Dashboard, SleepLog, Analytics, Insights
 ├─ components/  # Navigation, Empty states, shared UI
 ├─ store/       # Zustand sleepStore
 ├─ hooks/       # useTheme toggle
 ├─ test/        # global Vitest setup

The project is ready for Vercel (see vercel.json) or any static host.

Crafted with ❤️ and plenty of restful nights. TRAE 2.0