Back to VideosView Channel 




Build and Deploy a Full Stack AI Todoist Clone: Next.js, Convex & TypeScript
57,402
Views
2,545
Likes
258
Comments
2.23x
Viral Ratio
Ankita Kulkarni
25,700 subscribers Β· mid tier
Links Found in Description (11)
Websitehttps://convex.dev/c/todovex
Link in Biohttps://bit.ly/todovex-todoist-clone
Link in Biohttps://bit.ly/nextjscourse
Link in Biohttps://bit.ly/nextjshottips
Link in Biohttps://bit.ly/fesnacks
Link in Biohttps://bit.ly/30mins-coaching-with-ankita
Full Description
Hi all π In this 7 hour tutorial, you will learn how to create an end-to-end full stack Todoist clone, with AI features to help you organize and suggest missing items in your list with adding, deleting tasks, authentication, search using Zod, Next.js, Convex, React, Next.js Auth V5 i.e. Auth.js, Google Sign in, ShadCN UI library, React hook forms, TypeScript, OPenAI, TailwindCSS and more πΒ Be sure to checkout Convex here: https://convex.dev/c/todovex πΒ Free cheatsheet to accompany the tutorial with all the links: https://bit.ly/todovex-todoist-clone βοΈ You can fork the Github repo here: https://github.com/kulkarniankita/todoist-clone-todovex βοΈ Sign up for the Premium Next.js Course Waitlist: https://bit.ly/nextjscourse π FREE Next.js Best Practices Course: https://bit.ly/nextjshottips Discord for questions/help from others: https://discord.gg/R96qCSyf3A Key features: - π Next.js & Server actions - π€ 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 - π Auth using Next Auth aka Auth.js - π 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 9:43 - Free Course on Next.js Best Practices 10:52 - Convex Deep Dive 22:24 - Foundations Setup Next.js App 30:05 - Foundations UI - Shadcn Library 37:46 - Foundations Setup Convex 50:17 - Authentication with Auth.js 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: Frontend Snacks πΏ https://bit.ly/fesnacks 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. β¨ FREE Goodies: https://kulkarniankita.com/goodies βοΈ Book a 1:1 coaching session with me Opened a few coaching calls, grab them before they are gone: https://bit.ly/30mins-coaching-with-ankita π€ Find me here Twitter: https://twitter.com/kulkarniankita9/ LinkedIn: https://www.linkedin.com/in/kulkarniankita/ This video is kindly sponsored by Convex.
More from Ankita Kulkarni

Stop Paying Anthropic $200/month for Claude Code (Do This Instead)
258,684 views10.07x viral

Next.js 16 Full Course | Build and Deploy a Production-Ready Full Stack App
48,788 views

TanStack Start Full Course - Build and Deploy a Production-Ready Full Stack App
23,229 views

Build & Deploy a Full Stack Autonomous AI Agent SaaS (Like OpenClaw) - Next.js, React, Claude
15,907 views

Build & Deploy a Full Stack AI SaaS: Real-time AI Learners Matching Platform, Next.js 16
13,871 views