Build and Deploy a Full Stack AI Todoist Clone: Next.js, Convex & TypeScript

Key features:
- 🤖 AI Suggest Missing Tasks and Sub-Tasks using Open AI
- 🎨 Beautiful components using Shadcn UI
- 💅 Slick designs using TailwindCSS
- 🌟 Database using Convex
- 🎭 Amazing icons thanks to Lucide React
- 📋 Typescript Runtime Validation using Zod
- 🚀 Form Validation using React Hook Forms
- ❤️ Add Task Dialog popup
- 💔 Deletion of Tasks Dialog popup
- ✚ Addition of Sub-Tasks
- 💔 Deletion of Sub-Tasks Dialog popup
- 📜 Creation of New Projects and Labels
- 📜 Deletion of New Projects and Labels
- 🔄 Sidebar Navigation
- 🏆 Vector Search your Tasks
- 📱Full mobile responsiveness
- 🛬 Landing page 🛬
- 🚀 Deployment on Vercel
- 📱 Mobile responsiveness

#nextjs #react #javascript #ai #typescript

⏰ Timeline
00:00 - What will you learn?
1:32 - Todoist App Demo
10:52 - Convex Deep Dive
30:05 - Foundations
UI - Shadcn Library
37:46 - Foundations
Setup Convex
1:37:13 - User Profile and Navigation
2:00:01 - Inbox Page with
TodoList
2:07:04 - Inbox Page
3:17:54 - Add Task Modal for
Viewing Todos &
Sub-todos
4:25:19 - Upcoming Todos Page
4:33:29 - Project Page Build
4:50:59 - Suggest Missing Todos with AI
5:12:01 - Suggest Missing SubTasks with AI
5:33:55 - Vector Search using Convex
6:27:00 - Project Deletion and it's tasks
6:49:53 - Build Landing Page
6:51:09 - Get your app ready for Prod
6:58:29 - App Deployment

🔗 RESOURCES:

💌 Frontend Newsletter:
If you liked this video, you will also love my newsletter Frontend Snacks. You will learn a new topic each week with cool visuals and snippets, the latest frontend news and behind-the-scenes exclusive updates that I don't share anywhere else.

☎️ Book a 1:1 coaching session with me

🐤 Find me here

This video is kindly sponsored by Convex.

[Kulkarniankita]

Thanks for watching the tutorial, this tutorial has been my longest one yet but so worth it! I really do a deep dive in each concept.

What is it that you would like to learn next?

[pro-saqib]

I liked the idea of not just our daily simple to-do list but a Full Stack To Do List! CooOOooool!

[GiggleGalaxy.]

We blessed that we have developer like you which deliver the robust application .

[smartdriver]

I learned so much nextjs concept from your tutorials. Thanks for your great efforts

[yatinkundra]

just incredible, not a lot of creators can say they push relevant and quality content, Be Proud!

[TotheMoonPictures]

Woahhhh! This is the video I have been looking for✨

[manaskulkarni]

Great tutorial, eager to learn more from your channel.

[NurioonSoftware]

Waow i cant wait to watch this. Thanks Ankita, you are the Angel of developers ❤

[deepakkumarmaurya]

Really a best project with AI everyone creating only a simple todo list app but this is AWESOME😍😍

[sealone]

Hey Ankita, I've taken your Nextjs course a while back through Udemy and glad to see another one on Youtube! I'm still in about 2 hour and just got done with AuthJs and Convex integration. I have to say it certainly wasn't easy and so many steps to get it connected. They really should provide another helper package like 'convex-auth' or something like that to reduce the amount of the work. Now it's time to take a break and looking forward to finish this project! Thanks again.

[wesom-]

Very cool project idea! You really explain things very well! I was able to follow you at all times. Thank you very much for your effort! <3

[hamzasohail]

Thank you so much Aapi for this amazing project.

[kunaaal]

Great tutorial looking forward to see more full stack apps tutorial on this channel

[temanalam]

awesome thanks kulkarnia, i appreciate

[GregPeters]

Great project, and i love your video editing 😀

[umar]

Hey Ankita, Thanks for this valuable tutorial. This is one of the best to-do list tutorials for sure!! I would also like to request you to build a SaaS app like QuillBot, using next Auth. This will definitely break the internet. Thanks :)

[pratikkulkarni]

Thank you! This was quite interesting, however, Next has been adding a few things that are nothing short of magic. I mean, the entire "Authentication with AuthJS" part almost felt like writing some incantations and it works. I'm sure if I dig deeper in the docs and their blogs the engineering of it all will be clearer, but still. Thanks again for your efforts :)

[megamind]

Wow i always wanted to make my iwn todist clone. Thanks

[rolltidehero]

🎯 Key points for quick navigation:

00:00 *🚀 Introduction to building a full-stack Todoist clone with AI features using Next.js, Convex, and TypeScript.*
00:40 *🔐 The project will use Next Auth for robust authentication.*
02:55 *📊 Overview of different views in the app: inbox, today, upcoming, filters, labels, and projects.*
05:53 *📁 Demonstration of creating and managing projects within the app.*
08:08 *🔍 Vector search feature from Convex for efficient task searching.*
10:51 *💻 Introduction to Convex dashboard and project setup.*
18:03 *✏️ Explanation of Convex mutations for updating and deleting data.*
18:56 *🔗 Introduction to Convex actions for calling third-party services.*
20:18 *⚛️ Explanation of the Convex Reactor, the core of the Convex platform.*
24:37 *🎨 The project is already using Tailwind CSS, with an option to disable inline fold extension for better visibility of styles.*
25:33 *🚀 The Next.js app is set up and running on localhost:3000.*
26:58 *🧩 Tailwind CSS is structured with base, components, and utilities directives.*
32:40 *🌈 After installing Shad CN, global CSS file includes theme colors and CSS variables.*
37:37 *🔧 The project's color theme is customized to a slightly reddish-orange.*
38:32 *💾 Convex is installed and set up for the project, creating a new folder structure.*
41:25 *📊 Sample data is imported into a Convex table called "tasks" with auto-generated IDs.*
43:44 *🔌 A ConvexClientProvider is created to wrap the entire application for database interaction.*
45:19 *🔍 The useQuery hook from Convex is used to fetch and display tasks from the database.*
49:04 *🔌 Convex interacts with Next.js application via WebSocket connection.*
51:59 *🔐 Auth.js (formerly NextAuth) used for user authentication.*
59:56 *🔑 Setting up Google OAuth credentials in Google API Console.*
01:04:50 *⚙️ Configuration of Google OAuth in Next.js application.
01:07:07 *📝 Creation of login form and server actions for user authentication.
01:14:19 *🔒 User authentication setup: Redirecting users to logged-in page and passing user information to providers.*
01:15:39 *👤 Creating a UserProfile component to display user image using Next.js Image component.*
01:17:25 *🔗 Configuring Convex database for user authentication and data storage.*
01:20:24 *📊 Creating a database schema for tasks and user-related tables in Convex.*
01:34:44 *🔐 Setting up public-private key pairs and JWT signing for secure authentication.*
01:36:46 *✅ Successful user authentication and insertion into the Convex database.*
01:37:28 *🖼️ Planning the UI components for the Todoist clone, including sidebar, navbar, and task list.*
01:40:05 *📋 The UI structure includes projects, important links, to-do list, add task inline component, checked to-dos, and completed to-dos count.*
01:42:23 *🖱️ Clicking on a to-do item opens an "add task" modal dialog.*
01:43:29 *🎨 The project uses Shad CN UI library components for sheet, input, and card elements.*
01:46:29 *📱 The sidebar is divided into mobile and desktop experiences.*
01:51:45 *🔧 Primary nav items are extracted to a separate utils file for reusability.*
01:54:55 *👤 User profile component displays user's name, email, and profile photo.*
01:58:05 *🚪 Logout functionality is implemented using a server action.*
02:10:30 *🔄 useQuery hook from Convex React used to fetch to-dos from the database.*
02:28:54 *🍞 Added toast notifications for task completion using Shadcn UI components.*
02:29:58 *🔔 Toast notifications implemented with customizable duration and positioning.*
02:35:54 *🎨 Styling applied to "Add Task" button with hover effects and icon.*
02:41:41 *🛠️ Form implementation using Shard CN UI, React Hook Form, and Zod for validation.*
02:46:54 *📝 Default values set for task form fields including name, description, priority, due date, project ID, and label ID.*
02:48:55 *📄 Text area component added for task description with custom styling.*
02:50:50 *🎭 Card footer implemented for form buttons with responsive layout.*
02:57:11 *🧰 Utilized Shad CN UI Library's CN function for merging styles efficiently.*
02:58:30 *🕰️ Implemented date-fns library for date formatting and manipulation.*
03:00:07 *🔽 Added select components for priority, project ID, and label ID.*
03:04:45 *🗃️ Created separate files for projects and labels queries in Convex.*
03:08:17 *➕ Implemented a mutation for creating new todo items.*
03:13:38 *🔢 Converted priority and due date to appropriate number formats before sending to the database.*
03:20:21 *🔄 Refactoring code to pass all task data at once instead of individual properties.*
03:24:01 *📊 Creating a layout for task details including project, due date, priority, and label.*
03:38:50 *🧪 Testing the implementation by creating a new user and associated task.*
03:44:53 *🌐 Implementing a system for both user-specific and system-wide projects and labels.*
03:48:11 *🗄️ Created a separate file for subtodos with similar structure to main todos.*
03:49:45 *✅ Added functionality to check and uncheck subtasks, similar to main tasks.*
03:53:53 *🔘 Added a "Suggest missing task" button placeholder for future AI feature.*
03:58:34 *🔄 Implemented mutations for checking and unchecking subtasks.*
04:02:53 *➕ Added "Add subtask" functionality within the task dialog.*
04:05:57 *🏷️ Dynamically changed button text to "Add subtask" when adding a subtask.*
04:11:59 *🔧 Adjusting task priority and parent ID for subtasks in the Todoist clone.*
04:16:44 *🖥️ Adjusting the layout to make the header full-width.*
04:24:26 *⏰ Implementing overdue todos functionality.*
04:27:09 *🗂️ Creating an "Upcoming" page to group todos by date.*
04:33:35 *🤖 Planning to integrate OpenAI for smart task suggestions.*
04:34:56 *📊 Setting up the Projects page and individual project pages.*
04:37:00 *📁 Implemented project list functionality using Convex query and Next.js Link component.*
04:40:27 *🔗 Created individual project page with URL-based project ID retrieval using Next.js useParams.*
04:43:35 *🔍 Fixed query to get todos by project ID instead of getting project by project ID.*
04:54:01 *🤖 Outlined process for invoking AI (OpenAI) to suggest missing tasks using Convex actions.*
05:00:24 *🔄 Demonstrated how to add environment variables to Convex for API key access.*
05:01:42 *🏃‍♂️ Introduced using Convex's runQuery and runMutation functions within actions.*
05:02:51 *🔄 Updating code to get to-dos by project ID and passing them to OpenAI for more relevant suggestions.*
05:11:22 *🖋️ Changing the font to Noto Sans Georgian for a more consistent look with the Todoist app.*
05:12:18 *🔁 Reusing the "Suggest missing task" button functionality for subtasks.*
05:22:35 *🎉 Successfully integrating AI suggestions for subtasks.*
05:24:39 *🔄 Converting the sidebar component to a client component to use Next.js routing features.*
05:29:31 *🚀 Successfully implementing project redirection, with "Get Started" project linking to the correct page.*
05:30:39 *🏷️ Adding titles and styling to different sections of the navigation, including "My Projects" with a dialog option.*
05:34:30 *🧠 Explanation of Vector search and embeddings for context-aware AI-powered applications.*
05:41:45 *🔄 Overview of the search form implementation using React Hook Form and redirecting to search results page.*
05:59:32 *🤖 Added embedding generation for AI-suggested tasks to ensure they appear in search results.*
06:02:44 *🔍 Implemented vector search functionality using Convex API to search for similar tasks.*
06:06:32 *✅ Successfully tested vector search with example query "camping", returning relevant results.*
06:09:52 *🛠️ Created "Add Project" dialog component for adding new projects in both desktop and mobile views.*
06:16:14 *📝 Implemented "Create Project" mutation in Convex to add new projects to the database.*
06:18:27 *🚀 Finalized "Add Project" form with error handling, toast notifications, and navigation to the new project page.*
06:18:41 *🛠️ Implementation of project creation functionality with redirection to the newly created project page.*
06:20:14 *🧠 Enhancement of AI task suggestion by including project name in the query for more relevant results.*
06:22:31 *✅ Successful implementation of task creation with project assignment and due date functionality.*
06:25:42 *📝 Making description field optional in task creation to improve user experience.*
06:27:29 *🗑️ Development of project deletion functionality, including UI components and backend logic.*
06:34:29 *🛡️ Implementation of protection for system-level projects to prevent accidental deletion.*
06:38:32 *🔄 Introduction of Convex actions to handle complex operations like deleting a project and its associated tasks.*
06:45:08 *🗑️ Implemented delete functionality for tasks and projects, with automatic redirection to projects page*
06:45:51 *🎯 Adding individual task deletion functionality*
06:49:59 *🏠 Overview of homepage and application features*
06:51:24 *🚀 Preparing the application for production*
06:57:24 *📅 Adding due dates to tasks*
06:58:29 *🚀 Preparing for deployment*
06:59:24 *🐛 Fixing TypeScript errors*

🎯 Made @ www.ai.pics
🎯 Sorry if it isn't perfect!
🎯 Thanks so much for the in-depth tutorial. New subscriber!

[brancode]

I really love your teaching style and this project is awesome. Please make a production ready ecommerce app with categories, number of items, admin page and deploy using vps instead of vercel