Login

**OneDDL** · 12-01-2023, 11:46 AM

[Image: b4c5ac41695b0bf6ff360cd75b2e4930.jpeg]

Free Download Full Stack Development With Next.Js - Markdown App
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.
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

Homepage

[To see links please register or login]

Recommend Download Link Hight Speed | Please Say Thanks Keep Topic Live

Rapidgator