Fullstack Notion Clone: Next.js 13, React, Convex, Tailwind | Full Course 2023

Discord for any problems/errors/bugs: https://www.codewithantonio.com/discord
Github & Live Website: https://www.codewithantonio.com/projects/notes-app
Convex: https://www.convex.dev
Clerk: https://dub.sh/7gFtfQb
Edgestore: https://edgestore.dev
Trunk: https://tinyurl.com/trunkcheck

Hi all 👋 In this 8 hour tutorial you will learn how to create an end-to-end fullstack notion clone, all with proper notion-style editor, cover images, nested documents, publishing documents to public, real-time database and more.

Key Features:

- Real-time database 🔗
- Notion-style editor 📝
- Light and Dark mode 🌓
- Infinite children documents 🌲
- Trash can & soft delete 🗑️
- Authentication 🔐
- File upload
- File deletion
- File replacement
Icons for each document (changes in real-time) 🌠
Expandable sidebar ➡️🔀⬅️
Full mobile responsiveness 📱
Publish your note to the web 🌐
Fully collapsable sidebar ↕️
Landing page 🛬
Cover image of each document 🖼️
Recover deleted files 🔄📄

Timestamps
00:00 Intro & Demo
06:23 Environment setup
21:23 Folders setup
37:10 Landing page
01:17:45 Authentication & Database
01:42:58 Sidebar
02:21:01 User Settings
02:38:23 Schema & API
02:56:11 Sidebar Item
03:16:20 Document list
03:40:53 Archive functionality
03:58:12 Trash box
04:31:37 Search functionality
04:47:03 Settings
04:59:41 Navbar
05:27:14 Banner component
05:46:11 Toolbar component (Icon, Title)
06:15:13 Cover image (File upload)
06:48:04 Advanced file upload (delete, replace)
06:58:03 Editor component
07:21:56 Preview functionality (Publish your work)
07:43:32 Deployment & Outro

Видео Fullstack Notion Clone: Next.js 13, React, Convex, Tailwind | Full Course 2023 канала Code With Antonio

Комментарии отсутствуют

Информация о видео

12 октября 2023 г. 8:52:25

07:53:12

Code With Antonio

Правообладателям

Жалоба на материал Недопустимый материал Нарушение авторских прав

Комментарии

Другие видео канала

Fullstack Notion Clone: Next.js 13, React, Convex, Tailwind | Full Course 2023

Build and Deploy a B2B SaaS AI Support Platform | Next.js 15, React, Convex, Turborepo, Vapi, AWS

Build and Deploy an AI Automation Platform | Next.js 15, React, Better Auth | Zapier & N8N Clone

Build and Deploy a Multi Vendor E Commerce With Nextjs, React & Stripe Connect (Part 2/2)

Build a Livestream App With Next.js | Twitch Clone | Part 2/2

Build and Deploy an N8N & Zapier Clone | Next.js 15, React, Better Auth, Polar | Full Course 2025

Build and Deploy a B2B AI SaaS Support Platform | Next.js 15, React, Convex, Turborepo, Vapi, AWS

Fullstack Discord Clone: Next.js 13, React, Socket.io, Prisma, Tailwind, MySQL | Full Course 2023

Build a Livestream App With Next.js | Twitch Clone | Part 1/2

Build and Deploy a SaaS AI Agent Platform | Next.js 15, React, Better Auth, Polar | Part 2/2

Real-Time Messenger Clone: Next.js 13, React, Tailwind, Prisma, MongoDB, NextAuth, Pusher (2023)

Build and Deploy a SaaS AI Website Builder | Next.js 15, React, Inngest, Prisma | Lovable clone

Full Stack Netflix Clone in React, Tailwind CSS, Next.JS, Prisma, MongoDB, NextAuth & Vercel (2023)

Full Stack Airbnb Clone with Next.js 13 App Router: React, Tailwind, Prisma, MongoDB, NextAuth 2023

Fullstack Trello Clone: Next.js 14, Server Actions, React, Prisma, Stripe, Tailwind, MySQL

Build a YouTube Clone with Next.js 15: React, Tailwind, Drizzle, tRPC (2025)

Build a Course & LMS Platform: Next 13, React, Stripe, Mux, Prisma, Tailwind, MySQL | Udemy Clone

Build a SaaS: AI Companion With Next 13, React, Stripe, Prisma, MySQL, Tailwind | Tutorial 2023

Build and Deploy: TWITTER clone with React, Tailwind, Next, Prisma, Mongo, NextAuth & Vercel (2023)

Full Stack E-Commerce + Dashboard & CMS: Next.js 13 App Router, React, Tailwind, Prisma, MySQL, 2023

Full Stack Spotify Clone: Next 13.4, React, Stripe, Supabase, PostgreSQL, Tailwind (2023)