Project Overview
Couch to Crunch is a workout video discovery platform designed to help users find, filter, and save fitness content tailored to their goals. The project challenged me to build a full-stack application from scratch — handling everything from database architecture and authentication to responsive UI design and performance optimization.
Browse, Filter & Search
The homepage presents a responsive video grid populated with curated YouTube workout content. Users can narrow results using multi-select filters for level (beginner, intermediate, advanced), workout type (cardio, strength, yoga, and more), and duration. A sort control lets users prioritize by newest or most popular. All filtering and full-text search runs server-side via PostgreSQL’s native search capabilities, keeping the UI fast and accurate even as the dataset grows.
The content pipeline feeds this grid automatically. A custom seed script fetches from 32 curated YouTube search queries across workout categories, classifies each video, filters out irrelevant results, and upserts the data into PostgreSQL — making it safe to re-run without creating duplicates.
Bookmarks, Authentication & Data
Users can save favourite workouts to a personal library using a dual-storage system. Guests save to localStorage immediately — no account required — while authenticated users have their saves persisted to the database. When a guest signs in via Google OAuth (powered by NextAuth), locally saved videos are automatically synced to their account so nothing is lost on login.
On the backend, Prisma handles all database interactions with type-safe queries, and the data layer is structured around clear separation between public browsing and authenticated user operations. API routes manage save, unsave, and sync actions, giving the application a reliable and predictable data flow from client to database.
What I Learned
This project deepened my understanding of full-stack architecture, especially the balance between server-side and client-side rendering in Next.js 15’s App Router. Managing authentication flows, database migrations with Prisma, and deploying a production-ready app on Vercel gave me confidence in taking a project from idea to live deployment. I also gained practical experience writing TypeScript across both frontend components and backend API routes, which improved the reliability and maintainability of the codebase throughout development.