Full Stack Markdown App With Next.js
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?
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.
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
Instructor
- 4.6 Instructor Rating
- 100 Reviews
- 1,113 Students
- 7 Courses
Hello. I'm Travis Luong, a self-taught programmer with over a decade of experience in full-stack development.
Throughout my career, I've collaborated on diverse projects, contributing my expertise to more than 30 organizations. My list of esteemed corporate clients includes Microsoft, CBRE, and Verizon, and I've played a role in the success stories of startups such as Viome and PlacementsIO. Additionally, I've partnered with renowned agencies like Fresh Consulting, TDW+Co, and Catalysis, while also engaging in freelance work for various small businesses.
Proficient in a spectrum of programming languages and frameworks, I've professionally utilized TypeScript, JavaScript, Python, Java, Scala, Ruby on Rails, and PHP, working with cutting-edge tools such as Next.js, React, FastAPI, Spring Boot, and Express.js. My database experience extends to PostgreSQL, MySQL, SQL Server, and Redis, and I've navigated the DevOps landscape using platforms like Vercel, AWS, Kubernetes, Google Cloud Platform (GCP), Azure, Heroku, GitHub, and CircleCI.
In 2023, I authored my first Udemy course, "Full Stack Development with Next.js," which unexpectedly soared to best-seller status. This course was inspired by my transformative experience with the Rails Tutorial a decade ago—a resource that brilliantly connected the dots for me in web development. Unlike many courses that focus on individual topics, my aim is to empower learners by demonstrating how various technologies seamlessly integrate to deliver fully functional and production-ready projects.
As a technical generalist, I specialize in harnessing the full stack to craft comprehensive solutions for clients. My mission is to impart this knowledge, enabling others to pursue their own entrepreneurial ventures, secure rewarding tech positions, or fulfill their Full Stack aspirations.