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

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

6/20/2024

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

πŸ”₯ FREE Course on Next.js Hot Tips: https://bit.ly/nextjshottips

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

πŸ”— 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.

Chapters

What will you learn?
1:32
Todoist App Demo
8:11
Free Course on Next.js Best Practices
1:09
Convex Deep Dive
11:32
Foundations
7:41
Foundations
7:41
Foundations
12:31
Authentication with
46:56
User Profile and Navigation
22:48
Inbox Page with
7:03
Inbox Page
1:10:50
Add Task Modal for
1:07:25
Upcoming Todos Page
8:10
Project Page Build
17:30
Suggest Missing Todos with AI
21:02
Suggest Missing SubTasks with AI
21:54
Vector Search using Convex
53:05
Project Deletion and it's tasks
22:53
Build Landing Page
1:16
Get your app ready for Prod
7:20
App Deployment
8:32