Full Stack Markdown App With Next.js

Full Stack Markdown App With Next.js, available at $19.99, has an average rating of 4.67, with 80 lectures, based on 3 reviews, and has 72 subscribers.

You will learn about 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 This course is ideal for individuals who are Beginner and intermediate developers or Anyone wanting to learn how to use NextJS and open source libraries to build a basic markdown note taking app It is particularly useful for Beginner and intermediate developers or Anyone wanting to learn how to use NextJS and open source libraries to build a basic markdown note taking app.

Enroll now: Full Stack Markdown App With Next.js

Summary

Title: Full Stack Markdown App With Next.js

Price: $19.99

Average Rating: 4.67

Number of Lectures: 80

Number of Published Lectures: 80

Number of Curriculum Items: 81

Number of Published Curriculum Objects: 81

Original Price: $59.99

Quality Status: approved

Status: Live

What You Will 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 Should Attend

Beginner and intermediate developers

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

Target Audiences

Beginner and intermediate developers

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

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?

1. Introduction: An initial section covering course prerequisites, technologies, a project demo, and other essential details.

2. Initial Setup: Dive into the project by setting up the repository and configuring dark mode.

3. Database Development: Explore designing the database schema and creating a script to seed the database with mock data.

4. Home Page: Build the home page and understand Next.js route groups in a concise section.

5. Log In Page: Construct the login form utilizing server actions, JWT, and jose for secure authentication.

6. Sign Up Page: Develop the signup page using server actions for a seamless user registration process.

7. Dashboard Page: Focus on the dashboard layout using Next.js parallel routes. Learn about React Context and reducers for efficient state management.

8. 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.

9. Content Page: Build the markdown editor section of the app. This section is brief as open-source libraries will be used for implementation.

10. Published Page: Construct the Published View of the web app, leveraging server components. Implement sorting and searching on the server side.

11. 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.

Course Curriculum

Chapter 1: Initial Setup

Lecture 1: Demo

Lecture 2: Initialize NextJS Project

Lecture 3: Create GitHub Repo

Lecture 4: Clean Up Home Page

Lecture 5: Dark Mode And Light Mode Styles

Chapter 2: Database Development

Lecture 1: Create Database

Lecture 2: Initial Schema

Lecture 3: Check In Initial Schema

Lecture 4: Install bcrypt, faker, pg, and tsx

Lecture 5: Run A TypeScript Script With tsx

Lecture 6: Connect To Postgres With pg

Lecture 7: Seed Database With Fake Data

Chapter 3: Home Page

Lecture 1: Route Groups

Lecture 2: Build The Home Page

Chapter 4: Log In Page

Lecture 1: Build The Log In Form

Lecture 2: Install zod And jose

Lecture 3: Implement SQL Helper

Lecture 4: Update Configuration For JWT

Lecture 5: Implement The Log In Server Action

Lecture 6: Style The Log In Form

Lecture 7: Dispatch Server Action From Log In Form

Chapter 5: Sign Up Page

Lecture 1: Implement The Sign Up Server Action

Lecture 2: Build The Sign Up Form And Dispatch Action

Lecture 3: Expire Cookie

Chapter 6: Dashboard Page

Lecture 1: Parallel Routes

Lecture 2: Display Username On Sidebar

Lecture 3: Auth Middleware

Lecture 4: Notes Context Diagram

Lecture 5: Reducers

Lecture 6: Implement Initial Notes Context

Lecture 7: Use Notes Provider

Chapter 7: Sidebar Page

Lecture 1: Get Notes API Route

Lecture 2: Authenticate Notes API Routes

Lecture 3: Install Luxon And Implement Fetch Notes API Helper

Lecture 4: Implement Note Container

Lecture 5: Style The Note

Lecture 6: Create Note API Endpoint

Lecture 7: Create Note Btn

Lecture 8: Sort Select Component

Lecture 9: Implement Sort Notes Function

Lecture 10: Drag And Drop Events

Lecture 11: Update Parent API Endpoint

Lecture 12: Testing Update Parent API Endpoint

Lecture 13: Drop Event

Lecture 14: Update Current Drag Id

Lecture 15: Prevent Dragging Note Into Self

Lecture 16: Update Parent On Drop

Lecture 17: Dispatch Change Parent

Lecture 18: Implement Notes Map

Lecture 19: Implement Change Parent

Lecture 20: Render Child Notes With Recursive Component

Lecture 21: Debugging The Recursive Component

Lecture 22: Logging By Reference Vs Value

Lecture 23: Implement Expand Button

Lecture 24: Check If Note Is Descendent Note

Lecture 25: Conditional Styling With clsx

Lecture 26: Finalize Sidebar

Chapter 8: Content Page

Lecture 1: Use Search Params And Use Pathname

Lecture 2: Fetch Note API Endpoint

Lecture 3: Fetch Note And Render Title

Lecture 4: Update Note API Endpoint

Lecture 5: Install Use Debounce And Implement Title Input

Lecture 6: Dispatch Update Note

Lecture 7: React Ace And React Markdown

Lecture 8: Style React Markdown

Lecture 9: Publish Checkbox

Chapter 9: Published Page

Lecture 1: Published Page

Lecture 2: Published Note Detail View

Lecture 3: Search Component

Lecture 4: Wire Up Search Component

Lecture 5: Add Sort Param To Get Notes

Chapter 10: Deployment

Lecture 1: Import Project To Vercel

Lecture 2: Fix Lint Error

Lecture 3: View The Deployed Home Page

Lecture 4: Attach Postgres DB To Project

Lecture 5: Connect To Prod Postgres And Run Initial SQL

Lecture 6: Run Seed Script Against Production

Lecture 7: Fix Connection Errors On Prod

Lecture 8: Testing The App On Prod

Chapter 11: Congratulations

Lecture 1: Congratulations

Instructors

Travis Luong
Full Stack Developer

Rating Distribution

1 stars: 0 votes

2 stars: 0 votes

3 stars: 0 votes

4 stars: 1 votes

5 stars: 2 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!