Build a Fullstack App from Scratch (feat Next.js)

Learn by coding through a fun, project-based course full real-world design problems from front-end to back-end. You’ll build a music app with features like playlists, audio player, shuffle, and more! Use a modern stack of tools: React, Next.js, Typescript, and Postgres. Code reusable UI components, database schemas and migrations, API calls with serverless functions, and deploy it for the world to see!

• Introduction
• Setup
• Setup Next.js, ESLint, & Typescript
• Course App Overview
• Setup Chakra UI
• Creating Player Layout
• Playlist Container Setup
• Creating the Sidebar
• Adding the Logo
• Create a List Nav with LinkBox
• Create Playlist Menu
• Setup Prisma & PostgreSQL on Heroku
• Prisma Schema
• Data Modeling
• Creating Schema & Migrations with Prisma
• Seeding Data
• Running the Seed Script
• Seeding User Data
• Seeding Playlist Data
• Seeding Playlist Data Q&A
• Serverless API Overview
• Signup API Route
• Signup API Route Recap & Test
• Signin API Route
• Fetcher & Auth Mutation
• Auth Pages
• Sign In & Sign Up
• Protected Route Handler
• Middleware Edge Functions
• Middleware Q&A
• Custom Hooks for Fetching Data
• Fetch & Render Data into Components
• Gradient Background & Image Box
• Title & Subtitle UI Layout
• Load Artists Data
• Artists List UI Layout
• Seed User Data
• Build Dynamic Playlist Pages
• Playlist Page UI
• Songs Table UI
• Song UI & Time format
• Auth Error Handling
• Player UI Container
• Player State with Easy Peasy
• Player Controls UI
• Seek Bar UI
• Player Controls State
• Playing Songs State
• Shuffle and Next Song Controls
• Seek Bar Controls
• requestAnimationFrame & Synching UI
• End Song & Repeat Handlers
• Deploying with Vercel
• Testing & CI
• Wrapping Up