Full Stack Development With Next.Js: Markdown App

Build and Deploy a Markdown Note Taking App with Next.js, 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

Requirements

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

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?IMPORTANT! Please review the curriculum and course details before purchasing the course to ensure it aligns with your learning goals.CurriculumIntroduction: 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.Course DetailsThis course provides a pragmatic exploration of each technology, guiding you efficiently through the process of building a Full Stack App.    Emphasis is placed on front-end state management using React Context and useReducer.Some Next.js features are explored with just enough detail to achieve specific coding objectives.    The style of this course revolves around following along as the instructor codes, providing insights into the thought process.Open-source libraries for the markdown editor are leveraged for a streamlined learning experience.The course style is less focused on theories and deep explanations, aiming for a more hands-on and practical approach.This is NOT an exhaustive exploration of every feature within Next.js; rather, it focuses on practical application.This course assumes a foundational understanding of web development concepts; it is NOT designed for total beginners.Tailored for a broad audience, this is NOT an advanced or expert-level developer course.This is NOT an in-depth dive into building a custom markdown editor and renderer; instead, we utilize existing open-source solutions for efficiency.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Requirements

Lecture 3 Who This Course Is For

Lecture 4 Process

Lecture 5 Instructor

Lecture 6 Technologies

Lecture 7 Installation

Lecture 8 Discovery

Lecture 9 Demo

Section 2: Initial Setup

Lecture 10 Initialize NextJS Project

Lecture 11 Create GitHub Repo

Lecture 12 Clean Up Home Page

Lecture 13 Dark Mode And Light Mode Styles

Section 3: Database Development

Lecture 14 Create Database

Lecture 15 Initial Schema

Lecture 16 Check In Initial Schema

Lecture 17 Install bcrypt, faker, pg, and tsx

Lecture 18 Run A TypeScript Script With tsx

Lecture 19 Connect To Postgres With pg

Lecture 20 Seed Database With Fake Data

Section 4: Home Page

Lecture 21 Route Groups

Lecture 22 Build The Home Page

Section 5: Log In Page

Lecture 23 Build The Log In Form

Lecture 24 Install zod And jose

Lecture 25 Implement SQL Helper

Lecture 26 Update Configuration For JWT

Lecture 27 Implement The Log In Server Action

Lecture 28 Style The Log In Form

Lecture 29 Dispatch Server Action From Log In Form

Section 6: Sign Up Page

Lecture 30 Implement The Sign Up Server Action

Lecture 31 Build The Sign Up Form And Dispatch Action

Lecture 32 Expire Cookie

Section 7: Dashboard Page

Lecture 33 Parallel Routes

Lecture 34 Display Username On Sidebar

Lecture 35 Auth Middleware

Lecture 36 Notes Context Diagram

Lecture 37 Reducers

Lecture 38 Implement Initial Notes Context

Lecture 39 Use Notes Provider

Section 8: Sidebar Page

Lecture 40 Get Notes API Route

Lecture 41 Authenticate Notes API Routes

Lecture 42 Install Luxon And Implement Fetch Notes API Helper

Lecture 43 Implement Note Container

Lecture 44 Style The Note

Lecture 45 Create Note API Endpoint

Lecture 46 Create Note Btn

Lecture 47 Sort Select Component

Lecture 48 Implement Sort Notes Function

Lecture 49 Drag And Drop Events

Lecture 50 Update Parent API Endpoint

Lecture 51 Testing Update Parent API Endpoint

Lecture 52 Drop Event

Lecture 53 Update Current Drag Id

Lecture 54 Prevent Dragging Note Into Self

Lecture 55 Update Parent On Drop

Lecture 56 Dispatch Change Parent

Lecture 57 Implement Notes Map

Lecture 58 Implement Change Parent

Lecture 59 Render Child Notes With Recursive Component

Lecture 60 Debugging The Recursive Component

Lecture 61 Logging By Reference Vs Value

Lecture 62 Implement Expand Button

Lecture 63 Check If Note Is Descendent Note

Lecture 64 Conditional Styling With clsx

Lecture 65 Finalize Sidebar

Section 9: Content Page

Lecture 66 Use Search Params And Use Pathname

Lecture 67 Fetch Note API Endpoint

Lecture 68 Fetch Note And Render Title

Lecture 69 Update Note API Endpoint

Lecture 70 Install Use Debounce And Implement Title Input

Lecture 71 Dispatch Update Note

Lecture 72 React Ace And React Markdown

Lecture 73 Style React Markdown

Lecture 74 Publish Checkbox

Section 10: Published Page

Lecture 75 Published Page

Lecture 76 Published Note Detail View

Lecture 77 Search Component

Lecture 78 Wire Up Search Component

Lecture 79 Add Sort Param To Get Notes

Section 11: Deployment

Lecture 80 Import Project To Vercel

Lecture 81 Fix Lint Error

Lecture 82 View The Deployed Home Page

Lecture 83 Attach Postgres DB To Project

Lecture 84 Connect To Prod Postgres And Run Initial SQL

Lecture 85 Run Seed Script Against Production

Lecture 86 Fix Connection Errors On Prod

Lecture 87 Testing The App On Prod

Section 12: Congratulations

Lecture 88 Congratulations

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