Full Stack Twitter Prototype With Next.js

• Course
• Certificate

Section 1: Introduction

• 1. Intro

  05:53
• 2. Install

  02:30
• 3. Discovery

  01:30
• 4.

  Resources

Section 2: Design

• 1.

  Excalidraw

  04:27
• 2.

  Design Ui Mockup

  03:14
• 3.

  Design Api

  08:31
• 4.

  Design Database

  08:58

Section 3: Setup

• 1.

  Git Bash

  01:26
• 2.

  Initialize Nextjs Project

  02:49
• 3.

  Ssh Key Github

  04:44
• 4.

  Push Code To Github

  02:02
• 5.

  Deploy Project To Vercel

  04:17
• 6.

  Source Code

  03:42

Section 4: Home Page

• 1.

  Home Page Fe

  13:09
• 2.

  Home Page Deploy

  02:11

Section 5: Database Development

• 1.

  Initial Migration

  16:15
• 2.

  Sql And Typescript Intro

  07:26
• 3.

  Db Connection

  09:11
• 4.

  Load Fake Users

  06:58
• 5.

  Load Fake Posts

  07:12
• 6.

  Load Fake Follows

  04:38
• 7.

  Bcrypt

  07:13
• 8.

  Load Admin User

  08:20
• 9.

  Refactor Db Connection

  02:06
• 10.

  Check In Code

  00:35

Section 6: Signin Page

• 1.

  Signin Page Intro

  00:34
• 2.

  Install Jose

  00:29
• 3.

  Login Endpoint

  07:37
• 4.

  Refactor Db Helper

  03:24
• 5.

  Generate Jwt Token

  07:41
• 6.

  Test With Postman

  07:39
• 7.

  Signin And Feed Page Stubs

  06:38
• 8.

  Form Component Html

  11:02
• 9.

  Testing The Form

  02:19
• 10.

  Style Signin Page

  06:12
• 11.

  Check In Code

  00:40

Section 7: Signup Page

• 1.

  Signup Endpoint

  06:45
• 2.

  Check In Signup Endpoint

  00:28
• 3.

  Sign Up Page

  10:10
• 4.

  Check In Sign Up

  00:22
• 5.

  Setup Production Db

  05:12
• 6.

  Production Migration

  07:27
• 7.

  Confirm Password Error

  03:44
• 8.

  Env Example File

  02:01

Section 8: Authentication And Private Layout

• 1.

  Private Layout

  04:55
• 2.

  Jwt Verification

  09:44
• 3.

  Reset Db

  02:51
• 4.

  Auth Middleware

  06:51
• 5.

  Check In Middleware

  00:19
• 6.

  Swr Fetcher

  07:03
• 7.

  Refactor Fetcher

  04:25
• 8.

  Swr Must Use Client

  00:47
• 9.

  Check In Swr Config

  00:19
• 10.

  Styling The Header

  05:36
• 11.

  Display User Avatar

  06:40
• 12.

  Display Avatar Placeholder

  01:13
• 13.

  Center The Private Layout

  02:21
• 14.

  Navbar And Footer

  03:53
• 15.

  Page Stubs For Private Layout

  02:15
• 16.

  Highlight Active Link

  02:16
• 17.

  Check In Active Link

  00:22

Section 9: Feed Page

• 1.

  Feed Page Intro

  04:59
• 2.

  Sql Query For Feed

  04:41
• 3.

  Feed Endpoint

  04:02
• 4.

  Debugging The 500 Error

  04:45
• 5.

  Fix The 500 Error

  01:35
• 6.

  Check In Code

  01:10
• 7.

  Feed Container And List

  10:15
• 8.

  Post Component

  08:39
• 9.

  Styling The Post Component Part 1

  05:17
• 10.

  Styling The Post Component Part 2

  03:07

Section 10: Profile Page

• 1.

  Profile Page Intro

  00:58
• 2.

  Get Posts Endpoint

  09:02
• 3.

  Get Post Endpoint

  05:13
• 4.

  Update Post Endpoint Part 1

  03:56
• 5.

  Update Post Endpoint Part 2

  02:02
• 6.

  Delete Post Endpoint

  03:04
• 7.

  Create Post Endpoint

  03:42
• 8.

  Create Post Form

  09:26
• 9.

  Post Container And List

  10:15
• 10.

  Swr Mutate To Refresh Post List

  02:47
• 11.

  Swr Mutate Explained

  01:21
• 12.

  Wrap Up Profile Page

  01:35
• 13.

  Fix React Key Error

  01:18

Section 11: Following And Followers Page

• 1.

  Get Following Endpoint

  06:05
• 2.

  Following Page Ui

  09:50
• 3.

  Followers Endpoint

  05:25
• 4.

  Followers Page Ui

  02:49

Section 12: Account Page

• 1.

  Account Page Intro

  01:09
• 2.

  Logout Endpoint

  02:13
• 3.

  Account Page Ui

  06:30
• 4.

  Check In Account Page

  00:31

Section 13: User Page

• 1.

  User Page Intro

  01:42
• 2.

  Get Users Endpoint

  06:15
• 3.

  Get Follows Endpoint

  05:03
• 4.

  Create Follow Endpoint

  05:13
• 5.

  Delete Follow Endpoint

  03:32
• 6.

  User Page Ui Intro

  01:08
• 7.

  User Page Stub

  01:58
• 8.

  User Page Header

  14:59
• 9.

  User Page Header Styles

  01:58
• 10.

  User Page Posts List

  04:52
• 11.

  User Not Found Error

  03:34

Section 14: Search Bar

• 1.

  Search Bar Intro

  00:43
• 2.

  Search Endpoint Part 1

  03:19
• 3.

  Search Endpoint Part 2

  01:43
• 4.

  Search Bar Stub

  01:16
• 5.

  Wire Input To Search Api

  07:45
• 6.

  Lodash Debounce

  04:48
• 7.

  Display Search Results

  05:47
• 8.

  Handle Click Outside

  12:59

Section 15: Edit Post Page

• 1.

  Edit Post Page Intro

  00:41
• 2.

  Edit Post Page

  10:33
• 3.

  Debugging Patch Request

  03:58
• 4.

  Conditional Edit Post Btn

  09:59
• 5.

  Delete Post Endpoint

  10:23
• 6.

  Cleanup And Deployment

  03:09
• 7.

  Add Jwt Secret On Prod

  03:37
• 8.

  Testing Prod Site

  01:03

Section 16: Authorization And Cron Jobs

• 1.

  Misinformation Flag Intro

  02:46
• 2.

  Misinformation Sql Migration

  03:26
• 3.

  Flag Misinformation Endpoint And Authorization

  12:27
• 4.

  Delete Misinformation Job

  06:51
• 5.

  Secure Vercel Cronjob

  07:59
• 6.

  Run Migration On Prod

  01:24
• 7.

  Run Cronjob On Vercel

  02:08

Section 17: Extras

• 1.

  Server Components

  06:10
• 2.

  Light Mode And Dark Mode

  10:11
• 3.

  Fix Key Error And Lint Warnings

  05:06
• 4.

  Upload Avatar With Vercel Blob

  13:20

Section 18: Conclusion

• 1.

  Conclusion

  00:28