Example Curriculum
Introduction
Available in
days
days
after you enroll
Next.js Fundamentals (including React)
Available in
days
days
after you enroll
- Section Overview (2:07)
- What is Next.js? (1:52)
- Optional: Learn React Fundamentals
- Benefits of Next.js and Different Rendering Techniques (4:38)
- Performance with Next.js (6:26)
- Image Component in Next.js (4:13)
- File Based Routing and SEO (6:11)
- Serverless Functions in Next.js (4:35)
- Next.js vs Create React App (6:11)
- Web Developer Monthly
- Unlimited Updates
Project #1: Build Your First Next.js App | Coffee Connoisseur
Available in
days
days
after you enroll
- Project overview: What are we building? (1:59)
- Github Projects and Resources
- Create a Next.js app: Zero Config (7:17)
- How To Upgrade Your Next.js Version (11:56)
- Exercise: Upgrade Next.js Version to Next.js 12
- Quick Note: Next.js Versions
- Upgrade to Next.js 12 (3:39)
- Next.js Version Breaking Changes (6:01)
- Features of Next.js 12 (13:38)
- Next.js setup project walkthrough (8:24)
- _app.js Exercise with Footer
- _app.js Solution with Footer (4:12)
- What is Fast Refresh? (3:32)
- What are CSS modules? (7:48)
- Let's get ready for Home Page (1:36)
- App background (5:10)
- Banner Component (6:44)
- Mobile First Development & Banner Component Styling (7:06)
- Next.js Head Component (2:47)
Project #1: Routing with Next.js
Available in
days
days
after you enroll
Project #1: Styling in Next.js
Available in
days
days
after you enroll
- Style our homepage (5:02)
- Hero Image Generator (2:59)
- Add Hero Component (0:50)
- Next.js Image component (4:19)
- Hero Image on Home Page (2:33)
- Exercise: Hero Image and Button Layout
- Solution: Hero Image and Button Layout
- Setup fonts in Next.js (1:52)
- Load fonts on the page (3:00)
- Document in Next.js (6:44)
- Apply fonts in Document (5:57)
- Quick Note: Fonts in Next.js
Hydration, SEO and Different Rendering Techniques in Next.js
Available in
days
days
after you enroll
- What is SEO? (7:48)
- Pre-rendering in Next.js (5:43)
- Plain React vs Next.js app (4:17)
- Different Rendering Techniques in Next.js (2:09)
- How Pre-rendering helps with Performance (4:41)
- Static Site Generation (SSG) in Next.js (5:16)
- Incremental Static Regeneration (ISG) in Next.js (6:29)
- Quick Note: Incremental Static Regeneration
- Serverside Rendering (SSR) in Next.js (4:38)
- Client Side Rendering (CSR) in Next.js (3:39)
Project #1: Static Coffee Store Pages
Available in
days
days
after you enroll
- Project Component Architecture (2:54)
- Card Component Structure (6:02)
- Card Component Styling (7:28)
- Grid Layout For Card Component (6:05)
- Coffee Stores data
- React Strict and Coffee Stores Rendering Twice
- Add Coffee Stores on Page (4:43)
- Next.js: next.config.js Use Unsplash Image (4:28)
- What to Pre-render in Coffee Connoisseur App (2:55)
- Default Pre-rendering in Next.js (1:45)
- Implement Static Site Generation (SSG) (6:57)
- Characteristics of Get Static Props in Next.js (6:45)
- Coffee Stores Heading (7:00)
- Get Static Paths in Next.js (3:57)
- Characteristics of Get Static Paths in Next.js (2:14)
- Implement Get Static Props and Get Static Paths in Next.js (7:58)
- Fallback in Next.js (9:23)
- Fallback: false with 404 Page (2:05)
- Fallback: true (9:40)
- Refactor Coffee Store Page (5:29)
- Coffee Store Page Styling (7:36)
- Coffee Store Page Styling (continued) (9:36)
- Setup Foursquare Account (6:01)
- Foursquare Places API (3:55)
- Rate Limiting (2:25)
- Foursquare Places API Playground (3:24)
- Foursquare API in Get Static Props (2:06)
- Fetch API Async Await (7:33)
- Env Local vs Env Next.config.js (3:59)
- Environment Variables in Next.js (2:11)
- Coffee Stores Library (5:40)
- Update Foursquare API in Get Static Paths (4:19)
- Update Coffee Store Library Data (3:31)
- Important Note: Unsplash API Account
- Setup Unsplash API (6:46)
- Invoke Unsplash API for Coffee Store Images - Part 1 (3:19)
- Invoke Unsplash API for Coffee Store Images - Part 2 (2:33)
- Update Coffee Store Library with Images (2:37)
- Quick Note: Unsplash API perPage should be 30
- Display Coffee Store Images in the Card (5:52)
- Exercise: Display all coffee store images
- Solution: Display all coffee store images
- Individual Coffee Store Page data (5:32)
- Update Styling for the App (1:57)
Project #1: Coffee Stores by Location
Available in
days
days
after you enroll
- Section Overview (1:28)
- Geolocation API Docs (4:32)
- Using React Hooks (1:18)
- Create React Hook for Retrieving User Location (6:19)
- Use the hook for Retrieving User Location (10:19)
- Quick Note: useEffect in Function
- Client Side Rendering (CSR) Coffee Stores (9:23)
- Display Coffee Stores by Location on the Page (4:55)
- Refresh the Dynamic Route (Non-static) (4:02)
- Fallback in Next.js (3:39)
- Use React Context and Why to Use Context? (4:09)
- Create Store Context (5:17)
- Create Store Reducer in Context (7:53)
- Store Coffee Stores in Store Context (8:51)
- Coffee Store Page with Context (3:31)
- Coffee Store Page for Non-SSG Routes (6:35)
- Refactor Coffee Store App (4:30)
Project #1: Serverless Functions
Available in
days
days
after you enroll
- What are API's? (7:49)
- What are Serverless Functions? (6:24)
- API routing with Next.js (2:28)
- Hello World API route (4:39)
- Exercise: Create a Serverless Function
- Solution: Create a Serverless Function
- Catch All Routes in Next.js (5:32)
- Create a Serverless Function for Getting Coffee Stores (8:39)
- Invoke Serverless Function: Get Coffee Stores (5:37)
- Serverless Functions inside Get Static Props (3:16)
Project #1: Data Storage Using Airtable
Available in
days
days
after you enroll
- Project Architecture (7:25)
- What is Airtable? (4:25)
- Setup Airtable (8:21)
- API Architecture: Coffee Store Page (5:41)
- Airtable Library (7:08)
- Basic Coffee Store API / Serverless function (6:50)
- API Design: Create Coffee Store (7:21)
- Find Coffee Store API (5:28)
- Transform Coffee Store Data (5:13)
- Airtable Docs: Create Coffee Store (9:05)
- Airtable Docs: Create Coffee Store (continued) (5:03)
- API Error Handling (5:59)
- Refactor Create Coffee Store API (9:14)
- API Architecture: Invoke API on Coffee Store Page (4:29)
- Important Note: Coffee Stores are created twice and React Strict Mode
- Invoke Coffee Store API once user navigates (9:56)
- Create Coffee Store for Statically Generated Route (5:33)
- Exercise: Imposter Syndrome (2:55)
Project #1: SWR with Client Side Rendering
Available in
days
days
after you enroll
- SWR Design (3:33)
- Voting Feature Design (4:09)
- Coffee Store By Id API (7:15)
- Coffee Store By Id API Validation (5:59)
- Refactor Coffee Store By Id API (8:57)
- What is SWR? (State While Revalidate) (7:02)
- Important Note: Latest SWR Version: Breaking Changes
- SWR Docs Fetch API (0:51)
- Use SWR on the Coffee Store Page (8:58)
- API Design: Favourite Coffee Store By Id API (6:14)
- Airtable Docs: Favourite Coffee Store By Id API (6:50)
- Favourite Coffee Store By Id API (9:29)
- Favourite Coffee Store By Id API (continued) (7:51)
- Favourite Coffee Store By Id API wrap (8:16)
- Invoke Favourite Coffee Store By Id API (5:19)
- Application Demo (5:44)
- Airtable Final Demo (3:05)
- Refactor and Cleanup (4:19)
Project #1: Deployment and Build Optimization
Available in
days
days
after you enroll
- What is Deployment? (4:49)
- Important Note: Running Next Build
- Running Your Application Next Build (8:55)
- Cloud Ready Application (5:42)
- Setting up Github Repository (1:14)
- Create a Github Repository and Push Your Code (6:06)
- Important: Coffee stores appear from different location on Vercel
- Deployment to Vercel (10:19)
- Quick Note: Environment Variables
- Vercel Dashboard Walkthrough (2:44)
- Vercel Production Build Files (4:59)
- What is Netlify? (6:00)
- Netlify Deployment (10:37)
- Quick Note: Netlify Plugin Updates
- Netlify Deployment Configuration Changes (9:33)
- Lighthouse Performance (4:31)
- Quick Note: Lighthouse Score
- Lighthouse Performance and SEO Report (9:16)
- Exercise: Lighthouse Improvements
- Quick Note: Lighthouse Performance
Master Project: Project Setup | Netflix with Next.js
Available in
days
days
after you enroll
Master Project: Netflix Home Page and Video
Available in
days
days
after you enroll
- Netflix Component Architecture (4:27)
- Banner Component (3:49)
- Banner Component Structure (9:35)
- Banner Component Button With Font (8:25)
- Icons with Google Fonts (4:02)
- NavBar Component Structure (7:27)
- NavBar Component Styling (8:54)
- NavBar Router (8:54)
- NavBar Dropdown (4:56)
- NavBar Logo Icons (7:02)
- Card Component Architecture (2:19)
- Card Component Structure (6:09)
- Card Component Size (8:34)
- Card Component Error Handling (9:32)
- Card Component Image Error (4:00)
- Framer Motion with Card (4:15)
- Implement Framer Motion with Card (8:35)
- Section Cards Architecture (1:17)
- Section Cards Structure (6:43)
- Section Cards Styling (5:15)
- Card Scaling Feature (8:13)
- Refactor Section Cards Component (8:04)
- Youtube API Overview (2:25)
- Which Youtube API To Use? (6:35)
- Implement Youtube Search API (6:26)
- Implement Youtube Search API (continued) (4:59)
- Data Fetching Technique: Server Side Rendering (6:17)
- Serverside Rendering (SSR) Rules in Next.js (2:48)
- Implement Serverside Rendering (SSR) to Fetch Videos (6:34)
- Youtube API: Google Console Project (7:04)
- Invoke Youtube API (7:30)
- Exercise: Youtube API Query
- Solution: Youtube API Query
- Implement More Sections For Videos (5:44)
- Error Handling for Video Library (6:29)
- Popular Videos API Docs (8:46)
- Implement Popular Videos (6:17)
Master Project: Authentication with Magic | Netflix with Next.js
Available in
days
days
after you enroll
- Section Overview (2:28)
- What is Passwordless Authentication? (4:58)
- Overview of Sign-in Page (3:43)
- Setup of Sign-in Page (5:39)
- Quick Note: EsLint Error
- Sign-in Header Component (3:55)
- Sign-in Page Structure (5:58)
- Sign-in Page Styling (7:13)
- Sign-in Form Validation (9:23)
- Sign-in Routing To Dashboard (7:18)
- What is Magic Links? (8:57)
- Setup Magic Account (6:55)
- Install Magic in App (3:45)
- Magic API Keys (6:35)
- Magic SDK (continued) (2:57)
- Magic Docs For Login (4:33)
- Magic Implementation (8:12)
- Magic SDK Storage and Routing (4:30)
- Magic Loading State (5:58)
- Routing Delay with Login (6:53)
- Quick Note: Next.js Warning: useEffect with async
- Username on NavBar (9:17)
- SignOut a User (8:45)
- App Route once LoggedIn (7:12)
- Routing Flicker with Login (6:14)
- Loading Component (4:22)
Master Project: Incremental Static Regeneration | Netflix with Next.js
Available in
days
days
after you enroll
- Project Architecture (3:49)
- What Are We Building and Video Id Page Route (4:25)
- Create Dynamic Route: Video Id Page (3:37)
- Link Dynamic Page to Card Component Routing (4:25)
- Connect Link Component (2:53)
- Exercise: Link Component
- Solution: Link Component
- Connect Banner Component (3:54)
- React Modal Docs (2:56)
- Install React Modal Component (8:33)
- Quick Note: Modal onRequestClose stopped working after applying styling
- Modal Component Styles (1:44)
- Implement Youtube API Player & Docs (8:32)
- Youtube Player Styling (4:17)
- Modal Component Structure (9:21)
- Modal Styling (3:13)
- Which Data Fetching Techniques To Use? (7:43)
- What is Incremental Static Regeneration? (7:05)
- Incremental Static Regeneration Fallback (4:27)
- ISR (Incremental Static Regeneration) Demo and Next Steps (3:18)
- Incremental Static Regeneration (ISR) Docs (4:49)
- Implement Incremental Static Regeneration (ISR) (7:25)
- Incremental Static Regeneration with Youtube API Docs (5:19)
- Architectural Diagram (1:16)
- Youtube API by ID (10:24)
- Fix Link Component Route (2:24)
- ISR Query Params (5:41)
- Navbar Component (4:39)
- YouTube Quota Limit: Test Data (8:50)
Master Project: Hasura GraphQL | Netflix with Next.js
Available in
days
days
after you enroll
- Section Overview (4:15)
- Why GraphQL? (7:33)
- What is GraphQL? (6:53)
- GraphQL Example (4:57)
- GQL Query vs Mutation (5:45)
- What is Hasura? (5:49)
- Hasura API Explorer (7:32)
- Hasura Dashboard and Signup (5:54)
- Hasura Create PostGres DB (5:27)
- Hasura DB Architecture (7:22)
- Hasura DB Architecture (continued) (6:23)
- Setup DB (6:37)
- Hasura Try Out Tables (5:09)
- Query Live Hasura Server (6:40)
- Query Live Hasura Server with Environment Variables (5:45)
- Hasura User Roles (7:35)
- User Roles: Why JWT (JSON Web Tokens) (5:17)
- What is JWT (JSON Web Token) (6:52)
- JWT (JSON Web Token) Secret (6:39)
- Create JWT Secret and Update Roles (7:24)
Master Project: Authentication with Hasura | Netflix with Next.js
Available in
days
days
after you enroll
- Section Overview (2:28)
- Authentication Architecture (5:32)
- Quick Note: How to use Postman?
- Login API (5:18)
- Login API Architecture (6:07)
- Login API Create Auth Header (5:02)
- Login API Magic Server Side SDK (6:24)
- Login API Magic Server Side SDK Testing (5:47)
- Login API JWT (JSON Web Token) Docs (4:37)
- Important Note: Users array is Empty and JWT content in HASURA
- Login API Create JWT (JSON Web Token) (8:14)
- Login API Hasura Check New User (5:38)
- Login API Check New User Query (9:36)
- Login API Refactor (7:23)
- Login API New User Hasura Dashboard (4:07)
- Login API Create New User Mutation (10:31)
- Login API Overview and Cookie (5:27)
- Login API Set Token Cookie (8:02)
- Login API Set Token Cookie Testing (4:02)
- Login API Cleanup (2:13)
- Invoke Login API on Login (9:15)
Master Project: Ratings Service and My List Page | Netflix with Next.js
Available in
days
days
after you enroll
- Section Overview (1:53)
- App Architecture (5:20)
- Like and Dislike Button Functionality (9:36)
- Like and Dislike Button Styling (2:04)
- Like and Dislike Button States (8:46)
- Stats Rating API Architecture (4:35)
- Stats API Creation (3:55)
- Build Stats with Request Cookies (9:25)
- Stats API Overview with JWT Verification (4:00)
- Stats API JWT Verification (3:10)
- Stats API Design GraphQL (4:20)
- Stats API Design Find User By ID (3:42)
- Find User By Id GraphQL (9:34)
- Use Query String For Video ID (3:15)
- Conditional Logic Does Video Exist? (3:36)
- GraphiQL: Insert and Update Mutation (8:23)
- Stats API Use Insert and Update Mutation (10:47)
- Stats API Testing (4:39)
- Insert And Update Mutation Implementation (7:08)
- Stats API Wrap (9:14)
- Overview of Like Dislike Functionality (1:09)
- Like Dislike Functionality (10:07)
- Like Dislike Functionality Testing (3:25)
- Stats API Design: GET Request (3:26)
- Tweak Stats API GET Request (5:04)
- Stats API Refactor (6:17)
- Invoke Stats API on Frontend (9:14)
- Watch It Again Architecture (4:46)
- Watch it Again Query Hasura (6:49)
- Watch it Again Call in SSR (ServerSide Rendering) (6:09)
- Render Watch it Again Section on Page (6:46)
- High Resolution Images in the App (5:14)
- Cookies inside SSR (ServerSide Rendering) (5:34)
- Redirects in SSR (ServerSide Rendering) (9:23)
- Create Redirect User Hook (4:23)
- Testing the Redirect User Hook (5:35)
- My List Page Architecture (2:39)
- Build My List Page (6:11)
- Styling My List Page (2:39)
- Hasura Query for My List Page (4:56)
- Server Side Render My List Page (7:12)
- Wrap Cards in My List Page (8:46)
- Logout Assignment (6:00)
- Logout Solution
- Exercise: SSR Redirects
- Solution: SSR Redirects
NextJS 12: The New Features
Available in
days
days
after you enroll
Master Project: Deployment | Netflix with Next.js
Available in
days
days
after you enroll
Where To Go From Here?
Available in
days
days
after you enroll
Appendix: Learning React
Available in
days
days
after you enroll
- Introduction To React.js (12:21)
- Create React App (7:08)
- React App Folder Structure (8:14)
- React 18 Update (4:48)
- React Fundamentals (3:55)
- React Fundamentals 2 (4:59)
- Class vs Functional App.js (4:02)
- Hooks vs Classes (2:13)
- Quick Note: Service Worker File
- Your First React Component (20:13)
- Building A React App 1 (16:03)
- React.Fragment and Semantic HTML
- Exercise: Learn to Read the Docs
- Building A React App 2 (9:47)
- Building A React App 3 (26:35)
- Styling Your React App (4:59)
- Quick Note: JSON Placeholder
- Building A React App 4 (15:30)
- Building A React App 5 (8:53)
- Building A React App 6 (9:05)
- Project Files
- Keeping Your Projects Up To Date (8:30)
- Exercise: React 18
- Solution: Try Upgrading to React 18 (3:56)
- React Review (2:34)
- Error Boundary In React (8:11)
- Deploying Our React App (5:10)
- React Hooks (3:42)
- React Hooks 2 (3:47)
- React Hooks 3 (3:25)
- React Hooks 4 (4:01)
- React Hooks 5 (3:45)
- React Hooks 6 (6:54)
- React Hooks 7 (9:16)
- React Hooks 8 (4:48)
- Project Files - Hooks
- React Hooks 9 (5:58)
- Next Steps