Full Stack Development With Next.Js 13

Build and Deploy a Social Media App with Next.js 13, PostgreSQL, TailwindCSS, and Vercel

What you'll learn

How to use NextJS to build a simple social media app

How to create modular React components

How to work with TypeScript

How to work with PostgreSQL

How to work with pg, a low level database driver for NodeJS

How to secure the app with json web token authentication (JWT)

How to implement simple role based authorization logic

How to create, deploy, and secure cron jobs using Vercel Cron

How to run scripts locally and on production

How to deploy the app to Vercel

How to style the app with TailwindCSS

How to use SWR for data fetching and mutations

How to use Postman to test an API

How to use NextJS route groups to organize routes

How to use Git and GitHub for source control

Requirements

No programming experience is needed, but some is recommended

Basic knowledge of HTML, CSS, JavaScript, Git, and SQL is recommended

Basic computer skills

Description

Drawing inspiration from Meta's recent unveiling of Threads, this comprehensive course is meticulously crafted to empower students with the skills and knowledge needed to construct their very own Twitter Clone. Immerse yourself in a dynamic learning journey designed to mirror the authentic design and development processes of the real world. Through this course, you'll master indispensable proficiencies essential for crafting modern web applications employing cutting-edge tools and technologies.In the ever-evolving landscape of the tech industry, the demand for Full Stack Developers is at an all-time high. These technical polymaths excel in Front End Development, Back End Development, and DevOps, often spearheading entire feature sets and projects from inception to deployment. Their versatility renders them indispensable assets, equally sought after by startups and corporate giants alike.Upon completing this transformative course, you will have successfully conceptualized, constructed, and deployed a fully functional web app to the cloud. Armed with this foundational expertise, you'll possess the competence to delve into more advanced domains of study, setting the stage for a highly lucrative and fulfilling career in the ever-expanding tech sector.Delve into this immersive learning experience structured as a step-by-step tutorial series. Seamlessly follow along on your computer as you unlock the secrets of web development. Beyond the lines of code, each tutorial will unravel the underlying thought processes, providing you with not only the "how" but also the essential "why" behind every strategic decision.This course is ideally suited for students possessing a foundational understanding of programming. However, even if you lack prior programming experience, your innate technical aptitude will be nurtured through our meticulously crafted tutorials, allowing you to seamlessly engage with the content and thrive in your learning journey.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Install Tools and Technologies

Lecture 3 Discovery

Section 2: Design

Lecture 4 Excalidraw

Lecture 5 Design the UI Mock Up

Lecture 6 Design the API Routes

Lecture 7 Design the Database Schema

Section 3: Setup

Lecture 8 Windows Users: Set Up Git Bash

Lecture 9 Initialize NextJS Project

Lecture 10 Create and add SSH Key to GitHub

Lecture 11 Push Project Repo to GitHub

Lecture 12 Deploy Project to Vercel

Section 4: Home Page

Lecture 13 Home Page

Lecture 14 Deploy Home Page

Section 5: Database Development

Lecture 15 Create Initial SQL Migration

Lecture 16 SQL and TypeScript Intro

Lecture 17 Establish DB Connection

Lecture 18 Load Fake Users

Lecture 19 Load Fake Posts

Lecture 20 Load Fake Follows

Lecture 21 bcrypt

Lecture 22 Load Admin User

Lecture 23 Refactor DB Connection

Lecture 24 Check In Code

Section 6: Sign In Page

Lecture 25 Sign In Page Intro

Lecture 26 Install Jose

Lecture 27 Log In Endpoint

Lecture 28 Refactor DB Helper

Lecture 29 Generate JWT Token

Lecture 30 Test With Postman

Lecture 31 Sign In And Feed Page Stubs

Lecture 32 Form Component HTML

Lecture 33 Testing The Form

Lecture 34 Style Sign In Page

Lecture 35 Check In Code

Section 7: Sign Up Page

Lecture 36 Sign Up Endpoint

Lecture 37 Check In Sign Up Endpoint

Lecture 38 Sign Up Page

Lecture 39 Check In Sign Up Page

Lecture 40 Set Up Production DB

Lecture 41 Production Migration

Lecture 42 Confirm Password Error

Lecture 43 Env Example File

Section 8: Authentication and Private Layout

Lecture 44 Private Layout

Lecture 45 JWT Verification

Lecture 46 Reset DB

Lecture 47 Auth Middleware

Lecture 48 Check In Auth Middleware

Lecture 49 SWR Fetcher

Lecture 50 Refactor Fetcher

Lecture 51 SWR Must Use Client

Lecture 52 Check In SWR Config

Lecture 53 Styling the Header

Lecture 54 Display User Avatar

Lecture 55 Display Avatar Placeholder

Lecture 56 Center the Private Layout

Lecture 57 NavBar and Footer

Lecture 58 Page Stubs for Private Layout

Lecture 59 Highlight Active Link

Lecture 60 Check In Active Link

Section 9: Feed Page

Lecture 61 Feed Page Intro

Lecture 62 SQL Query for Feed

Lecture 63 Feed Endpoint

Lecture 64 Debugging the 500 Error

Lecture 65 Fix the 500 Error

Lecture 66 Check In Code

Lecture 67 Feed Container and List

Lecture 68 Post Component

Lecture 69 Styling the Post Component Part 1

Lecture 70 Styling the Post Component Part 2

Section 10: Profile Page

Lecture 71 Profile Page Intro

Lecture 72 Get Posts Endpoint

Lecture 73 Get Post Endpoint

Lecture 74 Update Post Endpoint Part 1

Lecture 75 Update Post Endpoint Part 2

Lecture 76 Delete Post Endpoint

Lecture 77 Create Post Endpoint

Lecture 78 Create Post Form

Lecture 79 Post Container and List

Lecture 80 SWR Mutate to Refresh Post List

Lecture 81 SWR Mutate Explained

Lecture 82 Wrap Up Profile Page

Lecture 83 Fix React Key Error

Section 11: Following Page and Followers Page

Lecture 84 Get Following Endpoint

Lecture 85 Following Page UI

Lecture 86 Followers Endpoint

Lecture 87 Followers Page UI

Section 12: Account Page

Lecture 88 Account Page Intro

Lecture 89 Log Out Endpoint

Lecture 90 Account Page UI

Lecture 91 Check In Account Page

Section 13: User Page

Lecture 92 User Page Intro

Lecture 93 Get Users Endpoint

Lecture 94 Get Follows Endpoint

Lecture 95 Create Follow Endpoint

Lecture 96 Delete Follow Endpoint

Lecture 97 User Page UI Intro

Lecture 98 User Page Stub

Lecture 99 User Page Header

Lecture 100 User Page Header Styles

Lecture 101 User Page Posts List

Lecture 102 User Not Found Error

Section 14: Search Bar

Lecture 103 Search Bar Intro

Lecture 104 Search Endpoint Part 1

Lecture 105 Search Endpoint Part 2

Lecture 106 Search Bar Stub

Lecture 107 Wire Input to Search API

Lecture 108 Lodash Debounce

Lecture 109 Display Search Results

Lecture 110 Handle Click Outside

Section 15: Edit Post Page

Lecture 111 Edit Post Page Intro

Lecture 112 Edit Post Page

Lecture 113 Debugging Patch Request

Lecture 114 Conditional Edit Post Btn

Lecture 115 Delete Post Endpoint

Lecture 116 Cleanup and Deployment

Lecture 117 Add JWT Secret on Prod

Lecture 118 Testing Prod Site

Section 16: Authorization and Cron Jobs

Lecture 119 Misinformation Flag Intro

Lecture 120 Misinformation SQL Migration

Lecture 121 Flag Misinformation Endpoint and Authorization

Lecture 122 Delete Misinformation

Lecture 123 Secure Vercel Cron Job

Lecture 124 Run Migration on Prod

Lecture 125 Run Cron Job on Vercel

Section 17: Server Components

Lecture 126 Server Components

Section 18: Conclusion

Lecture 127 Conclusion

Beginner and intermediate developers looking to learn Full Stack Development with NextJS,Pro developers looking to learn more about NextJS 13 features like App Router,Anyone wishing to learn how to build a web app using modern web technologies