A modern, full-stack sleep tracking application built with Next.js, React, and TypeScript. Track your sleep patterns, analyze trends, and improve your rest quality with an intuitive interface.
- Frontend: Next.js 15 , React 19, TypeScript
- Styling: Tailwind CSS 4
- Database: Neon PostgreSQL with Prisma 6.16.2 ORM
- Authentication: Clerk
- Deployment: Vercel
- 🔐 Secure Authentication - User login/signup with Clerk
- 📝 Sleep Logging - Record sleep quality, duration, and date
- 📊 Analytics Dashboard - Visual charts of sleep patterns
- 📈 Progress Tracking - Best/worst sleep records and averages
- 📱 Responsive Design - Works seamlessly on all devices
- 🗃️ Data Management - Full CRUD operations for sleep records
- 🎨 Modern UI/UX - Clean interface with gradient designs
- App Router - Next.js 13+ app directory structure
- Server Components - For data fetching and static content
- Client Components - For interactive UI elements
- Server Actions - For form submissions and database operations
- Node.js 18+
- npm or yarn
- Neon PostgreSQL database
- Clerk account for authentication
-
Clone the repository
git clone https://github.com/viboverse/next-sleep-tracker.git cd next-sleep-tracker -
Install dependencies
npm install
-
Set up environment variables
# Database DATABASE_URL="postgresql://username:password@host/database?sslmode=require" # Clerk Authentication NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_... CLERK_SECRET_KEY=sk_test_... NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/ NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/ NEXT_PUBLIC_CLERK_SIGN_OUT_FALLBACK_REDIRECT_URL=/
-
Set up the database
npx prisma generate npx prisma db push
-
Run the development server
npm run dev
Contributions are welcome! Please feel free to submit a Pull Request.