Build a Modern Sleep Tracker App with Next.js 15, Tailwind, Neon & Clerk (Full-Stack Tutorial)

Build a Full Sleep Tracker App with Next.js 15, Clerk, Neon & Tailwind CSS – Fullstack Tutorial

Neon → https://fyi.neon.tech/1cws
Clerk → https://go.clerk.com/wsJiD3K

Learn how to build a fully responsive and modern Sleep Tracker web app using the latest fullstack technologies including Next.js 15, Tailwind CSS, Clerk, Neon, and Vercel — completely serverless and production-ready.

This project features full authentication, sleep data tracking, dynamic dashboards, and data visualisation — all deployed for free using cutting-edge tools. It’s perfect for your portfolio or real-world learning.

👩‍💻 Learn to Code (Save 20% Pro)
https://scrimba.com/s0fg0h412l?via=reactproject

🔗 Useful Links:

Neon → https://fyi.neon.tech/1cws
Clerk → https://go.clerk.com/wsJiD3K
GitHub Repo → https://github.com/sahandghavidel/sleep-tracker-next
Eraser Diagram → https://app.eraser.io/workspace/h55ErwgagKBTMJ9dronI?origin=share
Next.js → https://nextjs.org
Tailwind CSS → https://tailwindcss.com
Vercel → https://vercel.com

🚀 What You'll Learn:

Next.js 15 App Router, Server Actions & SSR
Tailwind CSS design with fully responsive layout
User sign up / login via Clerk (Google, GitHub, Facebook, or email)
Dynamic dashboard with personal sleep data
Real-time visual Sleep Chart using chart libraries
Sleep tracking form with quality, time, and date
Average sleep analytics for the last 30 days
Sleep history with deletion functionality
Scalable, serverless PostgreSQL with Neon
Seamless deployment to Vercel

📌 Perfect for:

Developers building a portfolio project
Learners exploring the fullstack ecosystem
Anyone looking to master serverless app development
Those interested in data tracking & visualisation

📅 Timestamps:
00:00 – Intro
04:54 – Install Next.js 15 and Tailwind CSS, create first template
17:57 – Set up Neon and Prisma
31:59 – Add Clerk authentication and user management
45:16 – Build About and Contact pages, implement Footer and Guest layout
01:00:35 – Add Sleep Tracking form (AddSleepRecord component)
01:16:17 – Build Sleep Chart and BarChart for visualising sleep quality
01:26:07 – Display Average Sleep using getUserRecord and AverageSleep component
01:30:49 – Add Best/Worst Sleep analysis
01:34:28 – Build full Record History and enable deletion
01:41:25 – Deploy to Vercel

Видео Build a Modern Sleep Tracker App with Next.js 15, Tailwind, Neon & Clerk (Full-Stack Tutorial) канала React & Next js Projects with Sahand