Full Stack Development with Next.js 13

Focused View

Travis Luong

9:58:44

76 View

1. Introduction

1. Introduction.mp4

05:53

2.1 Excalidraw.html

2.2 Git.html

2.3 GitHub.html

2.4 Next.js.html

2.5 Node.js.html

2.6 Postman.html

2.7 TypeScript.html

2.8 Vercel.html

2.9 VSCode.html

2. Install Tools and Technologies.mp4

02:30

3. Discovery.mp4

01:30

2. Design

1. Excalidraw.mp4

04:27

2. Design the UI Mock Up.mp4

03:14

3.1 Best practices for REST API design.html

3. Design the API Routes.mp4

08:31

4. Design the Database Schema.mp4

08:58

3. Setup

1. Windows Users Set Up Git Bash.mp4

01:26

2. Initialize NextJS Project.mp4

02:49

3.1 Generating a new SSH key.html

3. Create and add SSH Key to GitHub.mp4

04:44

4.1 Source Code.html

4. Push Project Repo to GitHub.mp4

02:02

5. Deploy Project to Vercel.mp4

04:17

4. Home Page

1. Home Page.mp4

13:09

2. Deploy Home Page.mp4

02:11

5. Database Development

1. Create Initial SQL Migration.mp4

16:15

2. SQL and TypeScript Intro.mp4

07:26

3. Establish DB Connection.mp4

06:47

4. Load Fake Users.mp4

06:58

5. Load Fake Posts.mp4

07:12

6. Load Fake Follows.mp4

04:38

7.1 bcrypt.html

7. bcrypt.mp4

07:13

8. Load Admin User.mp4

08:20

9. Refactor DB Connection.mp4

02:06

10. Check In Code.mp4

00:35

6. Sign In Page

1. Sign In Page Intro.mp4

00:34

2.1 jose.html

2. Install Jose.mp4

00:29

3. Log In Endpoint.mp4

07:37

4. Refactor DB Helper.mp4

03:24

5. Generate JWT Token.mp4

07:41

6. Test With Postman.mp4

07:39

7. Sign In And Feed Page Stubs.mp4

06:38

8. Form Component HTML.mp4

11:02

9. Testing The Form.mp4

02:19

10. Style Sign In Page.mp4

06:12

11. Check In Code.mp4

00:40

7. Sign Up Page

1. Sign Up Endpoint.mp4

06:45

2. Check In Sign Up Endpoint.mp4

00:28

3. Sign Up Page.mp4

10:10

4. Check In Sign Up Page.mp4

00:22

5. Set Up Production DB.mp4

05:12

6. Production Migration.mp4

07:27

7. Confirm Password Error.mp4

03:44

8. Env Example File.mp4

02:01

8. Authentication and Private Layout

1. Private Layout.mp4

04:55

2. JWT Verification.mp4

09:44

3. Reset DB.mp4

02:51

4. Auth Middleware.mp4

06:51

5. Check In Auth Middleware.mp4

00:19

6.1 swr.html

6. SWR Fetcher.mp4

07:03

7. Refactor Fetcher.mp4

04:25

8. SWR Must Use Client.mp4

00:47

9. Check In SWR Config.mp4

00:19

10. Styling the Header.mp4

05:36

11. Display User Avatar.mp4

06:40

12. Display Avatar Placeholder.mp4

01:13

13. Center the Private Layout.mp4

02:21

14. NavBar and Footer.mp4

03:53

15. Page Stubs for Private Layout.mp4

02:15

16. Highlight Active Link.mp4

02:16

17. Check In Active Link.mp4

00:22

9. Feed Page

1. Feed Page Intro.mp4

04:59

2. SQL Query for Feed.mp4

04:41

3. Feed Endpoint.mp4

04:02

4. Debugging the 500 Error.mp4

04:45

5. Fix the 500 Error.mp4

01:35

6. Check In Code.mp4

01:10

7. Feed Container and List.mp4

10:15

8. Post Component.mp4

08:39

9. Styling the Post Component Part 1.mp4

05:17

10. Styling the Post Component Part 2.mp4

03:07

10. Profile Page

1. Profile Page Intro.mp4

00:58

2. Get Posts Endpoint.mp4

09:02

3. Get Post Endpoint.mp4

05:13

4. Update Post Endpoint Part 1.mp4

03:56

5. Update Post Endpoint Part 2.mp4

02:02

6. Delete Post Endpoint.mp4

03:04

7. Create Post Endpoint.mp4

03:42

8. Create Post Form.mp4

09:26

9. Post Container and List.mp4

10:15

10.1 swr mutate.html

10. SWR Mutate to Refresh Post List.mp4

02:47

11. SWR Mutate Explained.mp4

01:21

12. Wrap Up Profile Page.mp4

01:35

13. Fix React Key Error.mp4

01:18

11. Following Page and Followers Page

1. Get Following Endpoint.mp4

06:05

2. Following Page UI.mp4

09:50

3. Followers Endpoint.mp4

05:25

4. Followers Page UI.mp4

02:49

12. Account Page

1. Account Page Intro.mp4

01:09

2. Log Out Endpoint.mp4

02:14

3. Account Page UI.mp4

06:30

4. Check In Account Page.mp4

00:31

13. User Page

1. User Page Intro.mp4

01:42

2. Get Users Endpoint.mp4

06:15

3. Get Follows Endpoint.mp4

05:03

4. Create Follow Endpoint.mp4

05:13

5. Delete Follow Endpoint.mp4

03:32

6. User Page UI Intro.mp4

01:08

7. User Page Stub.mp4

01:58

8. User Page Header.mp4

14:59

9. User Page Header Styles.mp4

01:58

10. User Page Posts List.mp4

04:52

11. User Not Found Error.mp4

03:34

14. Search Bar

1. Search Bar Intro.mp4

00:44

2. Search Endpoint Part 1.mp4

03:19

3. Search Endpoint Part 2.mp4

01:43

4. Search Bar Stub.mp4

01:16

5. Wire Input to Search API.mp4

07:45

6.1 lodash.html

6. Lodash Debounce.mp4

04:48

7. Display Search Results.mp4

05:47

8. Handle Click Outside.mp4

12:59

15. Edit Post Page

1. Edit Post Page Intro.mp4

00:41

2. Edit Post Page.mp4

10:33

3. Debugging Patch Request.mp4

03:58

4. Conditional Edit Post Btn.mp4

09:59

5. Delete Post Endpoint.mp4

10:23

6. Cleanup and Deployment.mp4

03:09

7. Add JWT Secret on Prod.mp4

03:37

8. Testing Prod Site.mp4

01:03

16. Authorization and Cron Jobs

1. Misinformation Flag Intro.mp4

02:46

2. Misinformation SQL Migration.mp4

03:26

3. Flag Misinformation Endpoint and Authorization.mp4

12:27

4. Delete Misinformation.mp4

06:51

5.1 How To Secure Cron Jobs.html

5. Secure Vercel Cron Job.mp4

07:59

6. Run Migration on Prod.mp4

01:24

7. Run Cron Job on Vercel.mp4

02:08

17. Server Components

1.1 React Essentials.html

1. Server Components.mp4

06:10

18. Conclusion

1. Conclusion.mp4

00:28

Description

Build and Deploy a Social Media App with NextJS 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

Who is this for?

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

What You Need to Know?

No programming experience is needed, but some is recommended

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

Basic computer skills

More details

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.
Who this course is for:
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

User Reviews

Rating

average 0

Total votes0

Focused display

Hello. My name is Travis. I am a programmer. Welcome to my Udemy Profile.I am a Full Stack Developer with over a decade of experience developing web applications for a variety of clients and companies. I have built apps from the ground up for startups as well as worked on large enterprise systems. My current focus includes the following: - Front End Development: Next.js, React, TypeScript- Back End Development: Python, FastAPI, Java, SpringBoot, Node.js, TypeScript- DevOps: AWS, CircleCI, and Kubernetes

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.