Full Stack Development With Next.js: Markdown App

Build and Deploy a Markdown Note Taking App with Next.js, PostgreSQL, TailwindCSS, and Vercel

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?

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.

Course Content

• Introduction –> 9 lectures • 13min.
• Initial Setup –> 4 lectures • 5min.
• Database Development –> 7 lectures • 29min.
• Home Page –> 2 lectures • 8min.
• Log In Page –> 7 lectures • 24min.
• Sign Up Page –> 3 lectures • 24min.
• Dashboard Page –> 7 lectures • 25min.
• Sidebar Page –> 26 lectures • 2hr 3min.
• Content Page –> 9 lectures • 49min.
• Published Page –> 5 lectures • 31min.
• Deployment –> 8 lectures • 23min.
• Congratulations –> 1 lecture • 1min.

Requirements

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.