Full Stack Markdown App With Next.js from Udemy

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?

Introduction: 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.

What's inside

Learning objectives

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
Show more
Show less

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
Show more
Show less

Syllabus

Initial Setup

Demo

Remember to download the resource doc in the resources section of this lecture. It contains the link to the GitHub repo and other relevant information.

Create GitHub Repo

Clean Up Home Page

Dark Mode And Light Mode Styles

Database Development

Create Database

Initial Schema

Check In Initial Schema

Install bcrypt, faker, pg, and tsx

Run A TypeScript Script With tsx

Connect To Postgres With pg

Seed Database With Fake Data

Home Page

Route Groups

Build The Home Page

Build The Log In Form

Install zod And jose

Implement SQL Helper

Update Configuration For JWT

Implement The Log In Server Action

Style The Log In Form

Dispatch Server Action From Log In Form

Implement The Sign Up Page

Implement The Sign Up Server Action

Build The Sign Up Form And Dispatch Action

Expire Cookie

Dashboard Page

Parallel Routes

Display Username On Sidebar

Auth Middleware

Notes Context Diagram

Reducers

Implement Initial Notes Context

Use Notes Provider

Sidebar Page

Get Notes API Route

Authenticate Notes API Routes

Install Luxon And Implement Fetch Notes API Helper

Implement Note Container

Style The Note

Create Note API Endpoint

Create Note Btn

Sort Select Component

Implement Sort Notes Function

Drag And Drop Events

Update Parent API Endpoint

Testing Update Parent API Endpoint

Drop Event

Update Current Drag Id

Prevent Dragging Note Into Self

Update Parent On Drop

Dispatch Change Parent

Implement Notes Map

Implement Change Parent

Render Child Notes With Recursive Component

Debugging The Recursive Component

Logging By Reference Vs Value

Implement Expand Button

Check If Note Is Descendent Note

Conditional Styling With clsx

Finalize Sidebar

Content Page

Use Search Params And Use Pathname

Fetch Note API Endpoint

Fetch Note And Render Title

Update Note API Endpoint

Install Use Debounce And Implement Title Input

Dispatch Update Note

React Ace And React Markdown

Style React Markdown

Publish Checkbox

Published Page

Published Note Detail View

Search Component

Wire Up Search Component

Add Sort Param To Get Notes

Deployment

Import Project To Vercel

Fix Lint Error

View The Deployed Home Page

Attach Postgres DB To Project

Connect To Prod Postgres And Run Initial SQL

Run Seed Script Against Production

Fix Connection Errors On Prod

Testing The App On Prod

Congratulations

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Builds strong foundations for aspiring Full Stack Web Developers

Focuses on practical application, providing hands-on guidance for building a fully functional web application

Covers key technologies of the industry, including Next.js, PostgreSQL, TailwindCSS, and Vercel

Taught by industry experts with extensive experience in web development

Provides a balanced approach, avoiding overwhelming detail while offering practical insights

May require students to have some prior knowledge of software development concepts

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Full Stack Markdown App With Next.js with these activities:

Build a simple notes app with HTML/CSS/JavaScript

Show steps

Solidify your understanding of the fundamentals of HTML, CSS, and JavaScript by building a simple notes app.

Browse courses on HTML

Show steps

Set up a basic HTML structure with a head and body
Add styles to the body and create a container for the notes
Create a form for adding new notes
Add JavaScript to handle form submission and display the notes

Attend a local meetup or conference on Full-Stack Development

Show steps

Connect with other developers, learn about industry trends, and gain insights from experts.

Browse courses on Full-stack Development

Show steps

Research and identify relevant meetups or conferences
Register and attend the event
Network with other attendees, exchange ideas, and ask questions
Follow up with connections made at the event

Participate in a hands-on workshop on PostgreSQL

Show steps

Enhance your practical skills by working on real-world PostgreSQL tasks in a guided setting.

Browse courses on PostgreSQL

Show steps

Identify and register for a PostgreSQL workshop
Attend the workshop and actively participate in exercises
Install PostgreSQL on your local machine
Practice creating and managing databases and tables

Four other activities

Expand to see all activities and additional details

Show all seven activities

Solve LeetCode problems on React and JavaScript

Show steps

Reinforce your understanding of React and JavaScript fundamentals by solving coding challenges.

Browse courses on React

Show steps

Identify a LeetCode problem that covers a relevant topic
Break down the problem into smaller, manageable chunks
Implement a solution using React and JavaScript
Test and debug your solution

Build a React portfolio website

Show steps

Gain hands-on experience with React by creating a portfolio website to showcase your skills.

Browse courses on React

Show steps

Plan the structure and design of your website
Choose a React template or build your own
Implement essential features like navigation, projects, and contact
Deploy your website using a hosting platform like Netlify

Build a CRUD application using Next.js, PostgreSQL, and TailwindCSS

Show steps

Apply your knowledge by building a fully-functional web application that combines these technologies.

Browse courses on Next.js

Show steps

Plan and design the database schema for the application
Create a new Next.js project and set up the necessary dependencies
Implement data fetching and CRUD operations using PostgreSQL
Style the application's UI using TailwindCSS
Deploy the application to a hosting platform

Write a blog post on best practices for Next.js development

Show steps

Reinforce your knowledge by sharing your learnings and insights on Next.js best practices.

Browse courses on Next.js

Show steps

Identify key concepts and techniques in Next.js development
Research and gather information from various sources
Organize your thoughts and outline the structure of your blog post
Write and edit the content, ensuring clarity and accuracy
Publish and promote your blog post on platforms like Medium or dev.to

Career center

Learners who complete Full Stack Markdown App With Next.js will develop knowledge and skills that may be useful to these careers:

Reading list

We haven't picked any books for this reading list yet.

Full Stack Markdown App With Next.js

14 deals to help you save

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses