Full Stack Development With Next.js: Markdown App

Focused View

Travis Luong

5:55:17

13 View

1 - Introduction

1 - Introduction.mp4

00:36

2 - Requirements.mp4

01:01

3 - Who This Course Is For.mp4

00:47

4 - Process.mp4

01:23

5 - Instructor.mp4

00:55

6 - Technologies.mp4

00:56

7 - Installation.mp4

01:22

8 - Discovery.mp4

01:20

9 - Demo.mp4

05:09

2 - Initial Setup

10 - Initialize NextJS Project.mp4

02:09

10 - full-stack-development-with-nextjs-markdown-app-resource-doc-v1.pdf

11 - Create GitHub Repo.mp4

01:03

12 - Clean Up Home Page.mp4

00:43

13 - Dark Mode And Light Mode Styles.mp4

01:24

3 - Database Development

14 - Create Database.mp4

02:01

15 - Initial Schema.mp4

04:30

16 - Check In Initial Schema.mp4

01:10

17 - Install bcrypt faker pg and tsx.mp4

02:20

18 - Run A TypeScript Script With tsx.mp4

01:50

19 - Connect To Postgres With pg.mp4

07:32

20 - Seed Database With Fake Data.mp4

09:34

4 - Home Page

21 - Route Groups.mp4

05:08

22 - Build The Home Page.mp4

02:52

5 - Log In Page

23 - Build The Log In Form.mp4

03:10

24 - Install zod And jose.mp4

01:04

25 - Implement SQL Helper.mp4

02:42

26 - Update Configuration For JWT.mp4

01:16

27 - Implement The Log In Server Action.mp4

09:09

28 - Style The Log In Form.mp4

02:30

29 - Dispatch Server Action From Log In Form.mp4

04:32

6 - Sign Up Page

30 - Implement The Sign Up Server Action.mp4

10:38

31 - Build The Sign Up Form And Dispatch Action.mp4

10:14

32 - Expire Cookie.mp4

03:01

7 - Dashboard Page

33 - Parallel Routes.mp4

04:27

34 - Display Username On Sidebar.mp4

04:08

35 - Auth Middleware.mp4

04:10

36 - Notes Context Diagram.mp4

02:22

37 - Reducers.mp4

01:54

38 - Implement Initial Notes Context.mp4

07:25

39 - Use Notes Provider.mp4

00:58

8 - Sidebar Page

40 - Get Notes API Route.mp4

08:37

41 - Authenticate Notes API Routes.mp4

05:16

42 - Install Luxon And Implement Fetch Notes API Helper.mp4

05:14

43 - Implement Note Container.mp4

07:07

44 - Style The Note.mp4

01:16

45 - Create Note API Endpoint.mp4

02:51

46 - Create Note Btn.mp4

06:28

47 - Sort Select Component.mp4

05:17

48 - Implement Sort Notes Function.mp4

07:19

49 - Drag And Drop Events.mp4

04:38

50 - Update Parent API Endpoint.mp4

10:02

51 - Testing Update Parent API Endpoint.mp4

01:20

52 - Drop Event.mp4

02:12

53 - Update Current Drag Id.mp4

04:11

54 - Prevent Dragging Note Into Self.mp4

02:40

55 - Update Parent On Drop.mp4

04:32

56 - Dispatch Change Parent.mp4

03:41

57 - Implement Notes Map.mp4

04:20

58 - Implement Change Parent.mp4

06:27

59 - Render Child Notes With Recursive Component.mp4

04:19

60 - Debugging The Recursive Component.mp4

03:48

61 - Logging By Reference Vs Value.mp4

01:37

62 - Implement Expand Button.mp4

05:07

63 - Check If Note Is Descendent Note.mp4

04:48

64 - Conditional Styling With clsx.mp4

08:45

65 - Finalize Sidebar.mp4

00:54

9 - Content Page

66 - Use Search Params And Use Pathname.mp4

07:14

67 - Fetch Note API Endpoint.mp4

03:26

68 - Fetch Note And Render Title.mp4

04:08

69 - Update Note API Endpoint.mp4

08:18

70 - Install Use Debounce And Implement Title Input.mp4

07:42

71 - Dispatch Update Note.mp4

05:15

72 - React Ace And React Markdown.mp4

06:55

73 - Style React Markdown.mp4

03:08

74 - Publish Checkbox.mp4

02:34

10 - Published Page

75 - Published Page.mp4

06:41

76 - Published Note Detail View.mp4

05:44

77 - Search Component.mp4

05:56

78 - Wire Up Search Component.mp4

02:48

79 - Add Sort Param To Get Notes.mp4

09:50

11 - Deployment

80 - Import Project To Vercel.mp4

02:22

81 - Fix Lint Error.mp4

01:57

82 - View The Deployed Home Page.mp4

01:03

83 - Attach Postgres DB To Project.mp4

01:15

84 - Connect To Prod Postgres And Run Initial SQL.mp4

02:32

85 - Run Seed Script Against Production.mp4

03:47

86 - Fix Connection Errors On Prod.mp4

08:46

87 - Testing The App On Prod.mp4

01:41

12 - Congratulations

88 - Congratulations.mp4

00:04

Description

Build and Deploy a Markdown Note Taking App with NextJS, PostgreSQL, TailwindCSS, and Vercel

What You'll Learn?

Build a markdown note taking app with NextJS
Work with PostgreSQL and the pg library
Work with TablePlus database client
Use server actions and server components
Validate data with the zod library
Manage state with React Context and useReducer
Build a recursive component for rendering nested tree structure
Implement a drag and drop UI for organizing notes
Build NextJS API routes
Use NextJS layouts, parallel routes, and route groups to structure the front end code
Authenticate users with bcrypt and JWT
Style application with TailwindCSS
Use react-ace and react-markdown to build the markdown editor
Work with TypeScript
Deploy app to Vercel

Who is this for?

Beginner and intermediate developers

Anyone wanting to learn how to use NextJS and open source libraries to build a basic markdown note taking app

Expert developers may NOT find value in this course

What You Need to Know?

Basic knowledge of HTML, CSS, JavaScript is required

Basic knowledge Command Line, Git, and GitHub is required

Some knowledge of React, NextJS, SQL is recommended

Some knowledge of tree data structures and recursion is recommended

More details

Description
Embark on a dynamic journey into Full Stack Web Development with our "Full Stack Development With Next.js: Markdown App" Course. This meticulously crafted program guides you through the essentials of Next.js, PostgreSQL, TailwindCSS, and Vercel, empowering you to swiftly build and deploy a fully functional web application. Delve into key areas such as front-end state management, database schema design, and the implementation of server actions for secure authentication. Our course strikes a balance, offering practical insights into each technology without overwhelming detail. Whether you're building the home page, login/signup forms, or intricate features like a nested tree-structured sidebar, we provide hands-on guidance. This course is not just about learning; it's about applying and exploring Full Stack Development in a pragmatic, efficient manner. Are you ready to elevate your skills?

Introduction: An initial section covering course prerequisites, technologies, a project demo, and other essential details.
Initial Setup: Dive into the project by setting up the repository and configuring dark mode.
Database Development: Explore designing the database schema and creating a script to seed the database with mock data.
Home Page: Build the home page and understand Next.js route groups in a concise section.
Log In Page: Construct the login form utilizing server actions, JWT, and jose for secure authentication.
Sign Up Page: Develop the signup page using server actions for a seamless user registration process.
Dashboard Page: Focus on the dashboard layout using Next.js parallel routes. Learn about React Context and reducers for efficient state management.
Sidebar Page: Comprehensive coverage of building the sidebar for organizing notes in a nested tree structure. Emphasis on state management with React Context and implementing drag-and-drop user interactions.
Content Page: Build the markdown editor section of the app. This section is brief as open-source libraries will be used for implementation.
Published Page: Construct the Published View of the web app, leveraging server components. Implement sorting and searching on the server side.
Deployment: A section on deploying the app to Vercel. Assumes students already have a GitHub and Vercel account and are familiar with pushing code to GitHub.
Who this course is for:
Beginner and intermediate developers
Anyone wanting to learn how to use NextJS and open source libraries to build a basic markdown note taking app
Expert developers may NOT find value in this course

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.