Full Stack Markdown App With Next.js

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

Created by: Travis Luong
Full Stack Developer

What Will I 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

Target audience

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