Full Stack Markdown App With Next.js

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

Course Content

11 sections • 81 lectures • 5.9 hours total length

  • Demo
    03:49
  • Initialize Nextjs Project
    02:08
  • Create Github Repo
    01:03
  • Clean Up Home Page
    00:43
  • Dark Mode And Light Mode Styles
    01:24

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?

  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.

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
book image

This course includes:

  • 5.9 hours on-demand video
  • Certificate of completion

Upgrade To A Pro Plan

30-Day Money Back Guarantee

Unlimited Access To All Content

Invite To Private Discord Channel

Lifetime Access Or Annual Plan Available

OR

Buy Course

30-Day Money Back Guarantee

Full Lifetime Access