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!
Overview
Syllabus
- 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
Taught by
Scott Moss