Learn NextJs (App Router) by building a full-stack Web App

Focused View

Pranjal Soni

7:09:27

75 View

1. Introduction and setting up the app dev environment

1. Introduction and demo of the app we are going to build.mp4

01:45

2. Setup the dev environment.mp4

13:09

2. Layout Design

1. Building the left sidebar of Twitter using Tailwind CSS.mp4

20:30

2. Building Twitter Timeline using Next.js And Tailwind CSS.mp4

22:39

3. Building the Trending Section Layout and Who to follow using Tailwind CSS.mp4

22:42

3. Database Setup

1. Designing Twitter Clone PostgreSQL Database using ChatGPT and dbdiagram.mp4

18:23

4. Authentication for Web Application

1. Authentication with Supabase in Next.js 13 app directory.mp4

40:45

5. Saving Tweets in DB

1. Saving Tweet in DB using NextJs Server Actions and Supabase.mp4

27:19

2. Handling errors in NextJs Server Action.mp4

16:44

3. Fetching all the Tweets in React Server Component.mp4

17:40

6. Like Tweet Feature

1. Like-Unlike Feature Part-1.mp4

18:31

2. Like-Unlike Feature Part-2.mp4

27:35

7. Optimising the Web App

1. Optimising the Web App.mp4

19:34

2. Fixing a bug.mp4

03:25

8. Drizzle ORM schema

1. Using ChatGPT to build Drizzle ORM schema from SQL.mp4

32:49

2. How to join tables and build a complex query using Drizzle ORM.mp4

38:20

9. Reply Tweet Feature

1. Reply Tweet Feature part-1.mp4

25:37

2. Reply Tweet Feature part-2.mp4

20:36

10. Infinite Reply Feature

1. Introduction of Infinite Reply feature.mp4

02:01

2. Implement Infinite Reply feature.mp4

17:28

3. Fetch Reply.mp4

13:42

4. Show Reply Count.mp4

08:13

Description

Build a Full Stack Twitter Clone using NextJs 13 (app router) + Tailwind CSS + Supabase + Drizzle ORM

What You'll Learn?

Learn to build a full-stack application using latest NextJs features
Learn to think in React
Learn to design full-stack web apps
Query and Mutate the data in database using the Drizzle ORM
Learn to build high quality and precise layouts using Tailwind CSS
Learn to authenticate users using Supabase Auth

Who is this for?

Beginner ReactJs/NextJs developers who want to dive into full-stack world

Developers who want to build full blown projects from scratch using modern tech stack

What You Need to Know?

Basics of HTML, CSS, JS and ReactJs

Experience of building basic web apps

More details

Description
Welcome to Full Stack NextJs (App Router) Course!

This course is designed to teach you how to build a full stack web application from scratch using the Latest NextJs App Router, and the best part is, it is a project-based course. We will apply all the learnings and build a Twitter clone

Whether you are a beginner or an experienced React/NextJs developer, this course is perfect for anyone looking to learn how to build a full-stack web application using the latest technologies.
Throughout the course, you will learn how to use Next.js to build the application's front end. You will learn how to create pages and routes, work with server components and server actions, and use built-in development tools to make your development process faster and more efficient. You will also learn how to use Supabase and Drizzle ORM to build the back end of the application. You will learn how to create a database schema, work with data, and use the Supabase Client JS Library and Drizzle ORM to interact with the database.
In addition to that, you will learn how to use Tailwind CSS to style the application. Tailwind is a utility-first CSS framework that makes it easy to create beautiful, responsive designs. You will learn how to use the built-in classes to style your application quickly and customize the design to match your brand. And you will learn how to use Zod for input validation. Zod is a powerful validation library that makes it easy to validate user input and ensure that your application is secure.
By the end of this course, you will have a solid understanding of how to build a full-stack web application with all the latest Next.js features.

You will also have a working Twitter clone at the end of this project. The course is designed to be hands-on and practical so that you will be building a real-world application throughout the course.
So, if you're ready to learn how to build a full-stack web application with Next.js for free, sign up for this course today!

With clear explanations and practical examples, you can build your web application with confidence and ease.
Who this course is for:
Beginner ReactJs/NextJs developers who want to dive into full-stack world
Developers who want to build full blown projects from scratch using modern tech stack

User Reviews

Rating

average 0

Total votes0

Focused display

Hi, I am Pranjal.I am a full-stack developer with proficiency in NextJs, React, React-Native, Node, and all things JS. I am passionate about writing, reading, and teaching code. It’s one thing to love to code, but it’s an entirely new level when you share what you know with others. I love to share my knowledge and learnings with others so that they can learn and be more effective programmers in their web development endeavors.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.