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?
In my experience when we add internationalization to our app it becomes too slow when navigating between different routes. So I would like some best practices when working with i18n libraries video from you. Thanks in advance!! Also I would love to see a course where you build fully featured OTT app where users can watch movies online. So you'd have to use ABS for streaming videos and advanced auth features to prevent unauth users from watching movies because we would have subscription😀. Also we'd have advanced and beautifully designed home page were users can filter movies
Firstly thanks for this amazing project, I want to add something I think there is a typo mistake in the todo list spelling in the title of video: Build and Deploy a Full Stack AI Todoist Clone: Next.js, Convex & TypeScript, Please correct it
@@shaktisingh0012 hey thanks! It’s not a spelling mistake as the app name is called todoist which this app is a clone of! I can see how it can be confusing though
Hey Ankita, I've taken your Nextjs course a while back through Udemy and glad to see another one on TH-cam! 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.
Hey 👋 so happy to see you here! And thanks for going through the tutorial. I think we have given a robust auth solution that you can deploy to prod so it would require a bunch of steps. But I hear you, thanks for your input! Let me know if you need any help :)
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 :)
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
Really great course. A quick suggestion though, I think it would be nicer to implement some UI before going fully into the backend setup as this offers a better feeling of progress I would say.
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 :)
Hi Ankita, I really appreciate your "Build and Deploy a Full Stack AI Todoist Clone: Next.js, Convex & TypeScript" Tutorial! As a beginner in this field, I'm curious about how I can best utilize this tutorial. Can I watch and learn directly from it, or are there any prerequisites I should cover first? Also, is this tutorial suitable for Windows OS users? (Sorry for the silly doubt!) Could you recommend additional resources for learning frontend development-perhaps through your TH-cam channel or elsewhere? I noticed your "Frontend Developer Roadmap that Actually Works in 2024" video-would that be helpful too? Finally, any tips on how I can create a solid project in two weeks using these skills for my resume, in order to grab good internship opportunities, would be greatly appreciated. Additionally, could you clarify if all the resources or tech stacks like Convex and Vercel are free to use? Thank you!
At 1:45:40, we can install multiple shadcn components in a single command by adding the component names with spaces like `npx shadcn-ui@latest add badge button`
🎯 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!
I feel to things rn. 1- desire to one day reach that level as a programmer 2- Impostor Sindrome cause i don´t know if that day will come. Thank you so much.
Great tutorial! However, I do have a question, seeing as you still need to code those Convex functions and create the tables and everything, what is the advantage of using Convex over using a stored database somewhere (i.e. AWS, VPS, etc) and server actions within NextJS to access that data? (putting the reporting and graphs aside)
when I try to run `npm run build` at the end I get this error: ./node_modules/convex-helpers/index.ts:15:22 Type error: Type 'Iterable' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher. I tried modifying tsconfig.json to include either the downlevel and/or the target but that doesn't seem to fix it. Any ideas what else I can try? it seems like it shouldn't care about node_modules in any case
hey, i am stuck at 2:15:27 when you gave the note editors choice, you missed some part and added a file and made changes which i am not able to know even i tried to import things from github but it just doesn;t get to the part, can you just tell mw what is in the components/todos/task.tsx at that time when you made changes, that part is not in the video and i can't move forward. I would be very thankfull.
@@Kulkarniankita actually a new tool comes every now and then... And it gets really difficult to learn the way how should we integrate that particular service. Also after some time, these services get paid. Also I'm confused between prisma, drizzle. Mongoose, supabase, kinde, oauth, clerk, postgres, mysql, mongodb. Why don't we use MongoDb and why there is a standard way of authentication.
@@Kulkarniankita if there is a sponsor of video, you can mention its intro within 5 minutes. Is it necessary to integrate the sponsor with the project as well in each video??
Amazing Project Mam 🚀🫡 Mam..please create a real-time chat application project using Supabase that includes functionalities like audio calls, video calls, and file uploading.
Honestly bro, I like your thumbnail. I haven't seen the entire video but I would like to tell you. Please change your video editor. If you could get somebody better in editing the video. trust me you will grow better. All the Best.
Hello, amazing project! But I'm facing an Issue. My OpenAI API key has run out of credits but when I try making a new task or label it fails. this same error doesn't happen when I try making a new project. what seems to be the issue?
At the 1:34:33 you have AUTH_SECRET but before you have changes it from AUTH_SCRET to CONVEX_AUTH_ADAPTER_SECRET so from where you get this AUTH_SCRET and pasted it on convex can you explain it would be helpful.
i have followed all the step correctly till 1:10:00 after working on authentication. My page is not getting redirected to page.tsx that is in the loggedin folder, even after moving the folder of api/auth/../nextauth into app folder. i am still having 404 error. please help me i am stuck here for like 2 hours and still the same error, tried everything , even restarted the server and client side too.
With v5, things are truly changing so I had a seamless experience. I tried to make things really easy in the video because of it to help with this! Let me know what you think
I like Firebase but there are many new and better API options available. I want my channel to teach you those available options so you can make the choice and know the best practices when you do so. Otherwise I will only be sticking to one tech
Please clone any stock market broker website just like grow, upstock and angle-one etc. So that we learn how to manage financial web application. Because no one teach this every one clone youtube, chating app no one clone financial web application please make
@@Kulkarniankita Hi !! Thanks , Hope you haven’t understand my question let me explain it little more clearly how npx convex dev syncs DB with your particular account without any tokens or ClientIDs !!
@@vengateshvaidyanathang550the first time you run npx convex dev, it will ask you to login and select the project, it will then use your environment file such as .env.local for all the creds. The new changes from your local env are synchronized with convex server through web sockets so everything feels like magic!
Hello Miss Ankita can you help me out for an error getting on providers.tsx file on return session?.convexToken ?? null the error is saying convexToken does not exist on type Session , video times stamp => 1.26.49
Hey yes! We resolve this later but you can add, github.com/kulkarniankita/todoist-clone-todovex/blob/main/auth.ts#L55-L59 to make sure we tell TS this exists!
@@Kulkarniankita Actually i have another doubt i go to next level and want to add the login with Github func do i have to all the lengthy process gain or there is a easy way to acheive that ?
You completely left out creating the tasks component. You just start using it out of nowhere and have dialog and such…your editing on your videos can be very very frustrating.
Hey I didn’t, it was a editing glitch so I added a note. Where do you think I should move the code to? Also, please note these long tutorials are a lot of work so as much frustrating it is to you, it’s even more for me when this happens since my goal is to create the best tutorial for you!
@@Kulkarniankita appreciate the reply and the tutorial you have created. Just having the vague comment to add it wasn’t ideal because if you look at your repo, it has already been modified to a much further point. You had to copy that code and make the changes for it to fit the code (it wasn’t an issue but it won’t be ideal for somebody getting into this). I can only imagine how the editing must be frustrating but just one bit of advice, try to avoid sections where you’re talking and coding about a topic and then instantly you doing something different and the code you just typed magically disappears. I would rather leave it in if you happen to make mistakes and then correct yourself (it will show the new guys that it does happen). Anyways, well done on the tutorial, I did it to learn about Convex and you helped with that👌🏼. Keep creating.
please next time, dont just make the tailwind already in place. go one by one building layouts, so that the beginners can understand. on your video, you already have tailwinds for layouts and you didnt explain them thoroughly
inside auth.config.ts we have used the site URL as process.env.CONVEX_SITE_URL but we haven't configured it in the .env We have also used site URL in autht.ts but there we have replaced some part of the PUBLIC_CONVEX_URL and used, not directly form the .env I am just thinking whats the use of auth.config.ts if its even running by undefined domain. This same code setup is pushed to github as well. Can you please check and correct it?
Hey! I am getting this error upon creating a todo: Unhandled Runtime Error Error: [CONVEX A(todos:createTodoAndEmbeddings)] [Request ID: 382cd00bbf392700] Server Error ArgumentValidationError: Found ID "k579xwsz7e2y73rxexkrg2f5j96tzt4f" from table `projects`, which does not match the table name in validator `v.id("labels")`.Path: .labelId Called by client Call Stack BaseConvexClient.action Chatgpt simplified error: The error message you encountered suggests that the labelId is being assigned an ID from the projects table. We need to ensure that when calling this function, labelId is properly fetched from the labels table, and projectId is fetched from the projects table. I am not able to figure out how to handle this, I have successfully authenticated, and fetched label_id and project_id through convex database, but i am not sure where to put these ids. If anyone had the same error, please help out!
@@Kulkarniankita hey, i suppose i fixed this bug but now i am getting this error: (related to open ai) Unhandled Runtime Error Error: [CONVEX A(todos:createTodoAndEmbeddings)] [Request ID: e6e1bdf86625ebc3] Server Error Uncaught Error: Open AI Key is not defined at handler (../convex/todos.ts:253:26) Called by client Call Stack handler ../convex/todos.ts (253:26) BaseConvexClient.action node_modules\convex\dist\esm\browser\sync\client.js (438:1)
@@Kulkarniankita Hey, i suppose that error was resolved but i am getting another error related to open ai: Unhandled Runtime Error Error: [CONVEX A(todos:createTodoAndEmbeddings)] [Request ID: 2b68908aa3866ec7] Server Error Uncaught Error: Open AI Key is not defined at handler (../convex/todos.ts:253:26) Called by client Call Stack handler ../convex/todos.ts (253:26) BaseConvexClient.action node_modules\convex\dist\esm\browser\sync\client.js (438:1) I am not sure what is the cause because I have set up my api key in my env file as well as convex. Can you please help out with this instead? Chatgpt simplified error: Your application encountered a runtime error because the OpenAI key is not defined. This issue originates from a handler function in the `todos.ts` file at line 253. Ensure the OpenAI key is correctly set in your environment variables. This is the line that my error is referring to (convex/todos.ts). Since the variable names were also giving an error (OPENAI_API_KEY & OPEN_AI_KEY) i decided to hardcode the key's value (I havent put that in a public comment). const apiKey = " "; console.log("OpenAI API Key:", apiKey); // Debug statement
i got error when create task: [CONVEX A(todos:createTodoAndEmbeddings)] [Request ID: 057b6797a4e95dc4] Server Error ArgumentValidationError: Found ID "k579xwsz7e2y73rxexkrg2f5j96tzt4f" from table `projects`, which does not match the table name in validator `v.id("labels")`.Path: .labelId Called by client
@@Kulkarniankita i have fix this error, but seems like i have struggle when create data from client and get data from server. I create tasks but it doesn't appear on client
I'm impressed, very good work! with great explanation, Based on Your Question, I have many Ideas with detailed structure happy to share you, if you allow me to share my document via email.
![[#2024MAMA] BIGBANG (빅뱅) - 뱅뱅뱅 (BANG BANG BANG) + FANTASTIC BABY | Mnet 241123 방송](http://i.ytimg.com/vi/EQsYfiPR9uM/mqdefault.jpg)
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?
In my experience when we add internationalization to our app it becomes too slow when navigating between different routes.
So I would like some best practices when working with i18n libraries video from you. Thanks in advance!!
Also I would love to see a course where you build fully featured OTT app where users can watch movies online. So you'd have to use ABS for streaming videos and advanced auth features to prevent unauth users from watching movies because we would have subscription😀. Also we'd have advanced and beautifully designed home page were users can filter movies
@@isaacjon These are great ideas, will do! You may also like: www.nextjsworkshop.dev/hot-tips
Firstly thanks for this amazing project, I want to add something I think there is a typo mistake in the todo list spelling in the title of video: Build and Deploy a Full Stack AI Todoist Clone: Next.js, Convex & TypeScript, Please correct it
@@shaktisingh0012 hey thanks! It’s not a spelling mistake as the app name is called todoist which this app is a clone of! I can see how it can be confusing though
personally i need to learn JS first but this is great even tho i dont understand react, thumbs up dear
We blessed that we have developer like you which deliver the robust application .
Thank you 😊
I liked the idea of not just our daily simple to-do list but a Full Stack To Do List! CooOOooool!
Thanks! Yeah it is really cool
I learned so much nextjs concept from your tutorials. Thanks for your great efforts
That’s amazing! 🙏 more coming up
just incredible , not a lot of creators can say they push relevant and quality content , Be Proud!
Thank you for your kind words!
Hey Ankita, I've taken your Nextjs course a while back through Udemy and glad to see another one on TH-cam! 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.
Hey 👋 so happy to see you here! And thanks for going through the tutorial. I think we have given a robust auth solution that you can deploy to prod so it would require a bunch of steps. But I hear you, thanks for your input! Let me know if you need any help :)
Really a best project with AI everyone creating only a simple todo list app but this is AWESOME😍😍
Thanks Deepak!
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 :)
Glad you liked it!
Awesome stuff! Really interested in Convex - always worried about lock in, but the ease of subscribing to changes is a killer app.
Thanks, Glad to hear it!
underrated developer
If this is underrated then all the devs are underrated
Waow i cant wait to watch this. Thanks Ankita, you are the Angel of developers ❤
Haha thanks! 💪
Woahhhh! This is the video I have been looking for✨
Thank you! Glad you like it :)
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
Thanks!
Great tutorial, eager to learn more from your channel.
Thanks. Glad to hear that!
Great project, and i love your video editing 😀
Thanks so much! 😊 Editing is a skill I learned very recently so glad to see this comment!
Really great course. A quick suggestion though, I think it would be nicer to implement some UI before going fully into the backend setup as this offers a better feeling of progress I would say.
Thanks! And Noted!
Agreed! I love her work though :)
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 :)
Great idea, I’ll keep this in mind for sure!
@@Kulkarniankita Thanks for considering , Looking forward to seeing it soon...
Hi Ankita, I really appreciate your "Build and Deploy a Full Stack AI Todoist Clone: Next.js, Convex & TypeScript" Tutorial! As a beginner in this field, I'm curious about how I can best utilize this tutorial. Can I watch and learn directly from it, or are there any prerequisites I should cover first? Also, is this tutorial suitable for Windows OS users? (Sorry for the silly doubt!) Could you recommend additional resources for learning frontend development-perhaps through your TH-cam channel or elsewhere? I noticed your "Frontend Developer Roadmap that Actually Works in 2024" video-would that be helpful too? Finally, any tips on how I can create a solid project in two weeks using these skills for my resume, in order to grab good internship opportunities, would be greatly appreciated.
Additionally, could you clarify if all the resources or tech stacks like Convex and Vercel are free to use?
Thank you!
Great tutorial looking forward to see more full stack apps tutorial on this channel
Thanks!
At 1:45:40, we can install multiple shadcn components in a single command by adding the component names with spaces like `npx shadcn-ui@latest add badge button`
You are right, thanks for reminding me!
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!
Glad to hear that! 🙌
Wow i always wanted to make my iwn todist clone. Thanks
Do it!
🎯 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!
This is great, thanks!
@@Kulkarniankita can you pin this comment, so that it help everyone here.
Your video on learning Next.js is quite informative. I would definitely recommend it to anyone looking to learn.
Thanks for your kind words! 🙏
Thank you so much Aapi for this amazing project.
🙌
I feel to things rn.
1- desire to one day reach that level as a programmer
2- Impostor Sindrome cause i don´t know if that day will come.
Thank you so much.
yes one day at a time and things start to
Compound!!
Making some more unique project in next js
Yup! Just posted a new one
Great Tutorial Ankita. Would love to know more about Convex as compared to Mongoose/MongoDB. Thanks.
Thanks! 😊 will consider it
have you completed the project, i have an issue , idk how to resolve. i can use some help.
awesome thanks kulkarnia, i appreciate
Thanks! 😊
Wow, I have not watched fully this video but the intro got me so pumped. I admire your knowledge .
also please don't make background sounds too high.
Noted! I only kept it at that level in the beginning intro and then there is no sound except me talking! :)
@@Kulkarniankita Very professional of you.🔥🔥
Thanks Ankita.
You are welcome !
great content mam . thankyou❤
Thanks 😄
Great tutorial! However, I do have a question, seeing as you still need to code those Convex functions and create the tables and everything, what is the advantage of using Convex over using a stored database somewhere (i.e. AWS, VPS, etc) and server actions within NextJS to access that data? (putting the reporting and graphs aside)
It's a really nice project, but since i am learning supabase and prisma, so I will build it using that, + some saas stuff to add AI cuz y not.
Yeah good call!
when I try to run `npm run build` at the end I get this error:
./node_modules/convex-helpers/index.ts:15:22
Type error: Type 'Iterable' can only be iterated through when using the '--downlevelIteration' flag or with a '--target' of 'es2015' or higher.
I tried modifying tsconfig.json to include either the downlevel and/or the target but that doesn't seem to fix it. Any ideas what else I can try? it seems like it shouldn't care about node_modules in any case
Can you nuke node modules and install again?
I just found a new channel to subscribe too 🎉
Welcome!
hey, i am stuck at 2:15:27 when you gave the note editors choice, you missed some part and added a file and made changes which i am not able to know even i tried to import things from github but it just doesn;t get to the part, can you just tell mw what is in the components/todos/task.tsx at that time when you made changes, that part is not in the video and i can't move forward. I would be very thankfull.
same thing..
I love the tool name Todovex
Haha thanks! Me too :)
Excellent project.
Thank you!
Awesome mam 😮
Thanks a lot 😊
Thanks!!
🙌
Do you have a discord for this project? If not, please make one! It shall be really helpful.
There is one, check the description
when i see services like convex or some other in every video, i get in doubt should i take this course or not...
You’d be surprised how fun building with Convex is, just keep an open mind and see how you feel!
@@Kulkarniankita actually a new tool comes every now and then... And it gets really difficult to learn the way how should we integrate that particular service. Also after some time, these services get paid.
Also I'm confused between prisma, drizzle. Mongoose, supabase, kinde, oauth, clerk, postgres, mysql, mongodb.
Why don't we use MongoDb and why there is a standard way of authentication.
@@Kulkarniankita if there is a sponsor of video, you can mention its intro within 5 minutes. Is it necessary to integrate the sponsor with the project as well in each video??
Create an Cleark Clone with AuthJS
And you are the best love you 2
Check the Auth video here, I cover it
th-cam.com/video/uSIm5Uzub60/w-d-xo.htmlsi=UHVhvkc_dGlOqVwg
nice project and you are looking nice
Thank you!
who did the UI/UX designs for you? It looks nice.
Thanks, I did!
Thank you 😊
🙌
Amazing Project Mam 🚀🫡
Mam..please create a real-time chat application project using Supabase that includes functionalities like audio calls, video calls, and file uploading.
Good point, thanks, noted!
Can you make an inventory course not many course about it in the market?
What do you mean by inventory course
@@Kulkarniankita Inventory means, some kind of POS application.
You’re the best
Thank you! 🙏
thanks!
Welcome!
@Kulkarniankita what is the extention you are using for emoji inside your code IDE.
Hey it’s a MacBook shortcut cmd + ctrl + space and I changed the key setting to just be globe fn key
32:30 shadcn
Honestly bro, I like your thumbnail. I haven't seen the entire video but I would like to tell you. Please change your video editor. If you could get somebody better in editing the video. trust me you will grow better.
All the Best.
Hey thanks for your feedback, What part of editing didn’t you like? Or wish was done differently?
if possible could you please give timestamp to fill data of env.local
Amazing
Thanks!
Great tutorial but i have some issues with the file you said to copy on convex adapter 1:23:15
What are the issues while copying?
Sass project using MERN next js with Ai integration
Noted!
@@Kulkarniankita when I see this I feel I shouldn't follow, is it okay follow or it's a tutorial hell ?
@@Sky-yy what do you mean? See what?
thank you ankida for this amazing video
Thanks, appreciate it!
please help me how to get the cheat sheet
Done! ✅
Question what did you use to create the logo for the site? I have been looking for site which I can use to create custom web icon
Used OpenAI and then tweaked it!
Hello, amazing project! But I'm facing an Issue. My OpenAI API key has run out of credits but when I try making a new task or label it fails. this same error doesn't happen when I try making a new project. what seems to be the issue?
It might look like an error because it doesn’t work but maybe check to make sure there isn’t any other hidden error with creating a new task or label.
At the 1:34:33 you have AUTH_SECRET but before you have changes it from AUTH_SCRET to CONVEX_AUTH_ADAPTER_SECRET so from where you get this AUTH_SCRET and pasted it on convex can you explain it would be helpful.
Auth secret is the same as adapter secret, I created it using npx secret package that I showed in the video
@@Kulkarniankita got it , thanks for the reply...
Nice ui ux work how did you find this ui ? ❤😊
Thanks! What do you mean? Like how easy or difficult building it was?
i have followed all the step correctly till 1:10:00 after working on authentication. My page is not getting redirected to page.tsx that is in the loggedin folder, even after moving the folder of api/auth/../nextauth into app folder. i am still having 404 error. please help me i am stuck here for like 2 hours and still the same error, tried everything , even restarted the server and client side too.
You don’t need to move api folder inside app, I see in my video that it’s outside app folder
Similar to superlist
hey there is some issue in your deployed version can you fix it
Hey I’ll check it out thanks for letting me know!
I've heard next auth is falling apart.. why dint use something else?
With v5, things are truly changing so I had a seamless experience. I tried to make things really easy in the video because of it to help with this! Let me know what you think
@@Kulkarniankita sure mam.. I was just casually asking from my perspective.. As you've chosen this, there must be something in it I believe😃
can we get the figma files for the project..?
There are no figma files
@@Kulkarniankita ok👍
great app...thought of using it but like I can't login it says a server error occurred
try again?
Error: [CONVEX A(todos:createTodoAndEmbeddings)] Connection lost while action was in flight
Called by client i keep geting this error anyone help
Cool
🙌
cooooooooooooool
💪
if we need to use backend service then why not to use FIREBASE?
I like Firebase but there are many new and better API options available. I want my channel to teach you those available options so you can make the choice and know the best practices when you do so. Otherwise I will only be sticking to one tech
Please clone any stock market broker website just like grow, upstock and angle-one etc.
So that we learn how to manage financial web application.
Because no one teach this every one clone youtube, chating app no one clone financial web application please make
How to open cheat sheet I have received my email but after clicking the link it is directing me toward Notion where I can't get the cheat sheet
Let me see, I tested this and it worked but let me verify!
So Notion has the cheatsheet, can you select “view in browser” option?
@@Kulkarniankita Sorry, I can't find the 'view in browser' option in Notion.
@@MuhammadRafiq-fx8zz hey! Can you try again, please?
@@Kulkarniankita I spent an hour but can't find
💪
🙌
I just have one doubt that how your local terminal fetches the projects in your convex production site once you run npm convex dev. !!
So if you followed the walk through, you should have 2 terminals,
1) npx convex dev (syncs with Convex)
2) npm run dev (this is for your dev env)
@@Kulkarniankita
Hi !! Thanks ,
Hope you haven’t understand my question let me explain it little more clearly how npx convex dev syncs DB with your particular account without any tokens or ClientIDs !!
@@vengateshvaidyanathang550the first time you run npx convex dev, it will ask you to login and select the project, it will then use your environment file such as .env.local for all the creds. The new changes from your local env are synchronized with convex server through web sockets so everything feels like magic!
can you please provide timestamps to fill all the env.local data
Hello Miss Ankita can you help me out for an error getting on providers.tsx file on return session?.convexToken ?? null the error is saying convexToken does not exist on type Session , video times stamp => 1.26.49
Hey yes! We resolve this later but you can add,
github.com/kulkarniankita/todoist-clone-todovex/blob/main/auth.ts#L55-L59 to make sure we tell TS this exists!
@@Kulkarniankita Actually i have another doubt i go to next level and want to add the login with Github func do i have to all the lengthy process gain or there is a easy way to acheive that ?
@@mohammadzaidbhati4663nope, just add GithubProvider next to Google and create the creds!
idk why we didn't first implement "Add a task"
Why ?
❤
🙌
Martin Gary Rodriguez Robert Hernandez Brenda
hello mam it's urgent request,
I have strict instructions from college to integrate gemini ai into this project can you please help me.
I would go to Gemini docs
BRO HAVE YOU COMPLETED THE PROJECT
It's good to have knowledge of library but not totally depends on, library these are not scalable for large data.
Good point!
everything seemed great until the copy paste started...would have been better to use clerk then...more simple to setup
Well The code is given to you handy
Open ai api is paid??
No you get $18 worth of credits included
Почему нельзя нормально выложить на github?
It is on GitHub too!
Благодарю 😊
Source code?
Check the cheatsheet
really confused
動画が飛びすぎて話にならなかった。特に2時間9分ごろのTodoTaskの箇所など。他も編集が雑な箇所があり話がつながっていないなども多く、初学者にはおすすめできません。
Thanks for your feedback
open AI api free or paid?
Free up-to 18 credits
Nothing is new in this i already build this type of project
That’s great!
You are also a great teacher
@@zensumaraithank you so much!
You completely left out creating the tasks component. You just start using it out of nowhere and have dialog and such…your editing on your videos can be very very frustrating.
Hey I didn’t, it was a editing glitch so I added a note. Where do you think I should move the code to? Also, please note these long tutorials are a lot of work so as much frustrating it is to you, it’s even more for me when this happens since my goal is to create the best tutorial for you!
@@Kulkarniankita appreciate the reply and the tutorial you have created. Just having the vague comment to add it wasn’t ideal because if you look at your repo, it has already been modified to a much further point. You had to copy that code and make the changes for it to fit the code (it wasn’t an issue but it won’t be ideal for somebody getting into this). I can only imagine how the editing must be frustrating but just one bit of advice, try to avoid sections where you’re talking and coding about a topic and then instantly you doing something different and the code you just typed magically disappears. I would rather leave it in if you happen to make mistakes and then correct yourself (it will show the new guys that it does happen). Anyways, well done on the tutorial, I did it to learn about Convex and you helped with that👌🏼. Keep creating.
@@lucapriati246 thanks for your feedback and noted! will make sure to do this next time :)
please next time, dont just make the tailwind already in place. go one by one building layouts, so that the beginners can understand.
on your video, you already have tailwinds for layouts and you didnt explain them thoroughly
Noted!
AI + ToDo list = Fully useless to be honest 🤡
Chill bro 💀
@@notusperson4667 trying to impress girl? Still she’ll not give you lol simp comes for girls not coding 💩🤡
@@notusperson4667 Simp found 🤡
@@gautampatoliya6872 hell no, I mean I agree with what you said but chill 💀
@@notusperson4667 A simp trying to impress a noobie coder girl lol 💩
inside auth.config.ts we have used the site URL as process.env.CONVEX_SITE_URL but we haven't configured it in the .env
We have also used site URL in autht.ts but there we have replaced some part of the PUBLIC_CONVEX_URL and used, not directly form the .env
I am just thinking whats the use of auth.config.ts if its even running by undefined domain.
This same code setup is pushed to github as well. Can you please check and correct it?
Hey! I am getting this error upon creating a todo:
Unhandled Runtime Error
Error: [CONVEX A(todos:createTodoAndEmbeddings)] [Request ID: 382cd00bbf392700] Server Error
ArgumentValidationError: Found ID "k579xwsz7e2y73rxexkrg2f5j96tzt4f" from table `projects`, which does not match the table name in validator `v.id("labels")`.Path: .labelId
Called by client
Call Stack
BaseConvexClient.action
Chatgpt simplified error:
The error message you encountered suggests that the labelId is being assigned an ID from the projects table. We need to ensure that when calling this function, labelId is properly fetched from the labels table, and projectId is fetched from the projects table.
I am not able to figure out how to handle this, I have successfully authenticated, and fetched label_id and project_id through convex database, but i am not sure where to put these ids.
If anyone had the same error, please help out!
Can you share what you have done so far so others can help?
add your own project id from your own convex dashboard, and that shall fix the issue.
@@Kulkarniankita hey, i suppose i fixed this bug but now i am getting this error: (related to open ai)
Unhandled Runtime Error
Error: [CONVEX A(todos:createTodoAndEmbeddings)] [Request ID: e6e1bdf86625ebc3] Server Error
Uncaught Error: Open AI Key is not defined
at handler (../convex/todos.ts:253:26)
Called by client
Call Stack
handler
../convex/todos.ts (253:26)
BaseConvexClient.action
node_modules\convex\dist\esm\browser\sync\client.js (438:1)
@@Kulkarniankita Hey, i suppose that error was resolved but i am getting another error related to open ai:
Unhandled Runtime Error
Error: [CONVEX A(todos:createTodoAndEmbeddings)] [Request ID: 2b68908aa3866ec7] Server Error
Uncaught Error: Open AI Key is not defined
at handler (../convex/todos.ts:253:26)
Called by client
Call Stack
handler
../convex/todos.ts (253:26)
BaseConvexClient.action
node_modules\convex\dist\esm\browser\sync\client.js (438:1)
I am not sure what is the cause because I have set up my api key in my env file as well as convex. Can you please help out with this instead?
Chatgpt simplified error: Your application encountered a runtime error because the OpenAI key is not defined. This issue originates from a handler function in the `todos.ts` file at line 253. Ensure the OpenAI key is correctly set in your environment variables.
This is the line that my error is referring to (convex/todos.ts). Since the variable names were also giving an error (OPENAI_API_KEY & OPEN_AI_KEY) i decided to hardcode the key's value (I havent put that in a public comment).
const apiKey = " ";
console.log("OpenAI API Key:", apiKey); // Debug statement
i got error when create task: [CONVEX A(todos:createTodoAndEmbeddings)] [Request ID: 057b6797a4e95dc4] Server Error ArgumentValidationError: Found ID "k579xwsz7e2y73rxexkrg2f5j96tzt4f" from table `projects`, which does not match the table name in validator `v.id("labels")`.Path: .labelId Called by client
What did you do that gave you this error
@@Kulkarniankita i have fix this error, but seems like i have struggle when create data from client and get data from server. I create tasks but it doesn't appear on client
I'm impressed, very good work! with great explanation, Based on Your Question, I have many Ideas with detailed structure happy to share you, if you allow me to share my document via email.
Glad it was helpful!