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.