Published 12/2023
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 2.92 GB | Duration: 5h 55m
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.
TO MAC USERS: If RAR password doesn't work, use this archive program:
RAR Expander 0.8.5 Beta 4 and extract password protected files without error.
TO WIN USERS: If RAR password doesn't work, use this archive program:
Latest Winrar and extract password protected files without error.