Create a To-Do App with Next.js 13: Learn CRUD Operations and Tailwind CSS UI

AI-generated summary and notes. Check quotations, numbers, and important claims against the source video. Captions may contain errors.

Watch the source video on YouTube

Estimated reading time: 55 minutes for the text on this page.

Summary

Join Cand Dev as they guide you through creating a fun and engaging To-Do application using Next.js 13, focusing on CRUD operations and Tailwind CSS. The project showcases the simplicity and effectiveness of using Next.js 13, despite being in beta, to build functional apps. You'll learn how to set up your environment, utilize Tailwind for styling, and integrate JSON server for a simple API setup. Through a detailed walkthrough, you'll implement adding, editing, deleting tasks, and managing state using React hooks. This project serves as an excellent introduction to working with Next.js 13 and crafting UIs with the new app router and Tailwind CSS.

Highlights

Started by setting up a simple To-Do list project in Next.js 13. 🛠️
Implemented a clean UI using Tailwind CSS and React Icons. 🎨
Used JSON server to simulate a backend API. 🔌
Demonstrated CRUD operations: add, edit, and delete tasks. ✏️
Showed how to manage state with React hooks in Next.js. 🌐

Key Takeaways

Build a practical To-Do app using Next.js 13. 📋
Learn the ins and outs of CRUD operations. 🔄
Master Tailwind CSS for stunning UI designs. 🎨
Integrate JSON server as a mock API. 🔧
Use React hooks for state management. 🪝

Overview

Cand Dev begins the tutorial by introducing viewers to the project: a simple yet effective To-Do app built with Next.js 13. Despite Next.js 13 being in beta, the tutorial successfully navigates its features, focusing on the app router to structure the project efficiently.

The video walks through setting up the development environment, including configuring Tailwind CSS for stylish design elements. You’ll also see the creation of a mock API using JSON server to handle CRUD operations, demonstrating how to interact with data seamlessly.

Throughout the tutorial, Cand Dev highlights key functionalities such as form handling, state management using React hooks, and the utility of React icons for enhancing UI. The project culminates in a fully functional app that updates tasks dynamically, showcasing the power of modern web development frameworks.

Chapters

00:00 - 00:30: Introduction & Project Overview The Introduction & Project Overview chapter provides an overview of a simple to-do list project using Next.js 13. The project features a basic interface with a title and button, and includes a clean, animated model for user interaction. The walkthrough seems to start with explaining the setup and the final outcomes of this simple application.
00:30 - 03:00: Setting Up Next.js Project The chapter titled 'Setting Up Next.js Project' discusses the interactive interface of Next.js with examples of basic modifications. It covers editing page elements like textual headers and tag elements. Users learn how to interact with a simple GUI to update information dynamically, such as renaming sections and deleting tags through user prompts. The focus is on understanding the ease of making immediate changes using Next.js features.
03:00 - 06:00: Setting Up Tailwind CSS This chapter covers the setup of Tailwind CSS within a Next.js 13 application. It mentions the use of the App Router, which is currently in beta and not recommended for production use. Additionally, a JSON server is utilized as a mock API, and styling is done using Tailwind CSS to enhance the application's appearance.
06:00 - 09:00: Creating To-Do App Components In this chapter, the focus is on creating components for a to-do application using React icons. The lesson includes instructions on opening the terminal, executing a command to create a new Next.js application using 'npx create next app', and demonstrating how to incorporate React icons into the app.
09:00 - 15:00: Implementing CRUD Operations In this chapter titled 'Implementing CRUD Operations,' the focus is on setting up a simple to-do app project. The author begins by initializing the project with TypeScript and configuring ESLint. They choose not to use a source directory and import the necessary dependencies, which are installed automatically. Once the setup is complete, they navigate into the project directory and open it in Visual Studio Code to proceed with further development.
15:00 - 18:00: Adding JSON Server In this chapter titled 'Adding JSON Server', the speaker starts by instructing the user to open the terminal and run the command 'npm run Dev'. This command is expected to run the application on 'localhost:3000'. The speaker then verifies in the browser that the application is indeed running at 'localhost:3000', noting that it may still be compiling. Eventually, the default theme of Next.js 13 is displayed, indicating that the setup is successful. Further instructions are anticipated but not included in this segment.
18:00 - 24:00: Adding Tailwind CSS and DaisyUI The chapter discusses updating a simple to-do app, focusing on the layout of the application. The speaker starts by navigating to the app's layout configuration to modify the webpage's title. Originally set to 'create next app', the title is changed to 'simple to do app'. The change is confirmed by the automatic update visible on saving the file. The description under the title is also updated from its original content to 'simple'.
24:00 - 30:00: Implementing Add Task Functionality The chapter titled 'Implementing Add Task Functionality' covers the process of setting up and making changes within a specific page in an application. The speaker discusses removing unnecessary code and elements such as divs, and replacing them with a heading (H1) titled 'next 13'. The focus is on cleaning and organizing the page as part of implementing the add task functionality.
30:00 - 39:00: Implementing Edit and Delete Task In this chapter titled 'Implementing Edit and Delete Task', the process of removing unnecessary files from a project is discussed. The narrator describes deleting a CSS file and an API folder from the project structure. They further navigate to a Global CSS section where they remove styles that are no longer needed. The chapter wraps up with instructions to proceed with the installation of Tailwind CSS, pointing the audience to the official Tailwind CSS website for guidance.
39:00 - 46:00: Testing and Debugging This chapter, titled 'Testing and Debugging,' focuses on setting up the necessary tools and configurations for web development using Tailwind CSS. The process begins with accessing the start guide, where the user is instructed to copy a command for installing dependencies. The dependencies include Tailwind CSS, PostCSS, and Autoprefixer, all essential for styling in modern web development. Instructions are given to open another terminal window to paste and execute this command. Subsequently, the setup should automatically generate a file named `Darwin config.js`, which likely contains the configuration settings needed for the Tailwind CSS framework. The chapter encapsulates the initial technical setup process to ensure a smooth development workflow.
46:00 - 50:30: Conclusion In the conclusion chapter, the main focus is on configuring the Telvin configuration file. The steps involve copying specific content into the Telvin config.js file, integrating the base components and utilities into the global CSS, and then testing these configurations. The chapter concludes with a brief mention of inputting a 'last name' as part of the demonstration.

Create a To-Do App with Next.js 13: Learn CRUD Operations and Tailwind CSS UI Transcription

00:00 - 00:30 foreign [Applause] [Music] welcome back everyone so today we are going to be building this simple to-do list with next js13 app router and this is basically the final project as you can see it is really really simple and we have this title here and also this button all right if I click that it should be open the model really clean as you can see the animation is really nice and here I can do go to gym and if I hit
00:30 - 01:00 enter as you can see we have this go to gym right here all right and also I can edit that for example I'm gonna remove this and thanks the X into let's say I want to say Fitness my press course all right if I hit enter and also it's going to be updated all right I can also delete these uh tags here as you can see we have the pop-up right here if I click yes and it should
01:00 - 01:30 be gone all right so this is really really simple and we are going to use next yes 13 all right which is this 13 app router as you can see this really really new and it's just on a better version so it's not recommended to you to use that into the production all right and also we're going to use a Json server is basically a factors API so we're going to use that and also for styling we're going to use style in CSS and also the cui to make it look really
01:30 - 02:00 nice all right and also for this icon here we are going to use react icon so yeah that's what we are going to learn today and let's jump into the terminal alright so now let's open your terminal and in here I'm going to copy and paste this command here right npx create next app letters test experimental app so I'm going to copy that right here and I'm going to paste that into my terminal here let's hit enter for the
02:00 - 02:30 project name I'm going to say simple to do app all right let's hit enter I'm going to use typescript I'm going to use es Lane yes and Source directory I'm going to say no and import LDS let's just say this ad right here it's going to be installing all the dependency for us okay so let's wait for that all right it's done so let's CD into the simple yes to do app and I'm going to open that into the visual studio code so
02:30 - 03:00 the first thing what we need to do is let's open the terminal and I'm going to say npm run Dev it should be running the app into localhost 3000 and let's go back to the browser and I'm going to open the localhost 3000 let's do 3000 and it should be still compiling I think and here we go okay this is the default theme of the next 13. so what we need to do is let's
03:00 - 03:30 go to app and let's go to layout and the first thing is let's click allow here the first thing is I want to change the title as you can see here is the titles which is create next app I'm going to change that to let's go with uh simple to do app okay if I save and as you can see it is automatically updated alright so for the description let's remove this and I'm going to say simple
03:30 - 04:00 do app or learning next 13 next to s13 okay so let's save and what we need to do next let's go to the page here and I'm going to remove all of this let's remove that and also I'm going to remove all the div here all right let's remove that and put the H1 I'm going to say next 13 right let's also remove this class name
04:00 - 04:30 and now let's remove this page model CSS file and also I'm going to remove the API folder let's click right and delete move to trash and yeah here we go it's gone so this is why we have let's go to Global CSS and I'm going to remove all the style and now we have next 13. Okay cool so next we need to install the Telvin CSS let's go to telvincss.com
04:30 - 05:00 click get started and click this remote guides click next yes and let's copy this command here okay install dependency Talent CSS pull CSS and Auto prefixer so let's open another terminal here and I'm going to paste that in here let's just hit enter and it should be create a file called Darwin config.js for us right here I think and
05:00 - 05:30 here we go we have the Telvin config.js file so here we need to copy this content here so let's just copy that and put that right here all right and also we need to put this Alvin base component and utilities into the global CSS just like that let's close this and also close the talvin config and now let's just try that and in here I'm going to do last name
05:30 - 06:00 and then I'm going to say text into the center and I'm going to add underline with underline okay so let's see if save and let's take a look alright here we go we have the text into Center and also have underlined in next year s13 here so now we need to install the AC UI and let's click the I think this C components and go to install here and let's copy this npm install a daisy UI let's go back we need
06:00 - 06:30 to open another terminal again and let's put it right here and hit enter and what we need to do next is basically let's comment let's copy this plugin here require this UI into the Telvin configs so let's go back here and we need to put that right here okay just like that now let's try to use a button here and I'm going to click me and I'm going to add class name called BTN BTN is
06:30 - 07:00 basically class from the AC UI so let's see how this is look let's go back to simple to do and as you can see this is working so let's dial in the home component here and I'm going to remove all this styling and what I'm going to do here I'm going to create another diff but before that I'm going to wrap this class name with uh let's do maximal width I'm going to say 4XL okay okay and I'm going to add
07:00 - 07:30 the background red so you can see let's do maybe text here uh let's say hello so when I save and let's take a look here this is basically the maximal width for XL I'm going to put it into the center so I can say let's do here MX which is margin horizontally to Auto here we go so what we need to do next is I'm going to add margin top so I'm going to do margin top to four
07:30 - 08:00 here we go and let's remove the background we don't need that and inside in here I'm going to let's do class name into let's say Center which is stack Center and also we have the margin vertically I'm going to set it to five it's going to be a display flex and let's say Flex column and also let's do Flex column and also
08:00 - 08:30 we have a gap I'm going to say four all right so inside this div I have H1 and this H1 is basically like the title I'm gonna say to do this app just like that and I'm going to add class name call uh let's do X do XL or something here we go I'm going to make it bold so I can say on bold wait Alt alright and also down here I'm going to
08:30 - 09:00 put another component called add task so let's do add X here and I'm going to create the component into the components folder so inside of apps I'm going to create components components folder inside the component I'm going to create file call add acts dot DSX right and here I'm going to say fce and I'm going to remove the react I'm going to just import the attacks right
09:00 - 09:30 here so now we should be able to see the app tags here all right let's go back to attacks and now we need to style in this attacks component let's remove this and I'm going to render a button here and the text it should be add new task and also in this button I'm going to add class name called BTN and BTN Dash primary and also I'm going to say with to full
09:30 - 10:00 just like that now we have this add new task all right so basically in a final project we have this button plus right here okay so let's go to react icons and I'm going to install that first so let's go back to terminal and I'm going to say npm install react this icons let's hit enter and what icon I'm going to use is let's
10:00 - 10:30 search for let's search for plus this thing here I think so let's click that it's going to be copy the name of the component and let's go back here and uh right here I'm going to put the icon in here just like that and of course we need to import that so let's go up here I'm going to say import something from react icon slash AI because we're using
10:30 - 11:00 this AI here okay if you want to use uh let's see uh and icons here and design icon with use AI if you will use boost wrap you need to use the S basically uh you can follow along all of these uh name here okay it's have a lot of icon that I believe you will love that so let's go back here and I'm going to import this
11:00 - 11:30 icon from the react icon slash Ai and also for the uh Zeiss I'm gonna do as a pen or something let's save and let's go back here and here we go okay this thing start to 18 make it bigger and here we go so I can add uh for example uh margin left that we can create that here aren't in love to I want to say two
11:30 - 12:00 and here we go so the next thing is I'm going to create a table here so the table should be inside The To Do List component let's go back to page here and basically down here we have component called to-do list like so so now let's create the to-do list into the components folder so let's do to delete dot ESX okay so let's do error
12:00 - 12:30 ifce and I'm going to import it to the list from here okay here we go so now we should be able to see this the delete goal so now let's go to the days UI and let's go through the uh Parable I think at this table here let's click that and I'm going to use this simple table here let's go to Jazz X and basically uh this is what we need to use okay so we need to just copy all
12:30 - 13:00 of that let's go back to to the list and let's just paste that right here all right let's save and let's take a look what we have in the browser and here we go okay we have this beautiful table and I'm going to remove the empty hat here and also the center here so let's remove this and also the job here and of course let's just remove all of this thing here now we just have one the r and I'm going
13:00 - 13:30 to remove the one and also what's this remove adding this one okay so now we have to which is name and also the favorite color so now let's install the Json Surfer to create factors API so let's go to the GitHub documentation here and I'm going to let's go through this installation basically you can install as a global but I'm going to install that as a dependency so here I'm going to open
13:30 - 14:00 another terminal and I'm going to say npm install the SD and I'm going to say Json Dash server right and hit enter and I'm going to uh let's minimize all the file here and I'm going to create folder in here called Data and inside this data I'm going to create a file called deduce let's say to do a DOT Json file all right so in here what I'm gonna do is
14:00 - 14:30 let's create an object and I'm going to say a task all right and this tax is basically array and inside this array we have couple object so I'm going to say ID here and the ID should be for now to say one this is basically a string so I'm going to say one like so and also the text I'm gonna say uh let's say buy milk with some uh Orange right and also I'm
14:30 - 15:00 going to add another object here so let's just copy this paste that down here and also the ID it should be I want to say two and also the text let's change that to something like maybe of my friend uh to find a girl all right so now let's go back to package.json file and I'm going to add another script here and the script call Jason say Json as Surfer
15:00 - 15:30 and to run the Json server it's basically really simple you can go to the documentation here and as you can see we can do like so all right so I'm gonna do here let's say Jason as server yes this watch I'm going to watch into the data slash deduce dot Json file and I'm gonna use sport let's
15:30 - 16:00 say a three thousand one right so to run this is pretty simple we can just go into the terminal and we can we can say npm run Json desk server okay so hit enter and it should be uh as you can see here it's done when I click this it should be make a get request as you can see here for the slash tax we have this uh two object
16:00 - 16:30 right so now let's create the API that we can uh use to fetch this URL here so inside this root here I'm going to create I think I'm going to close all this file and also I'm going to minimize this and in here I'm going to create a file called apis okay let's just say API I think API dot DS all right let's create variable called base URL set at equals
16:30 - 17:00 to let's go back to the browser I'm going to copy this URL and go back here and put the right here okay just like that and what we need to do next is down here I'm going to create a function let's export the function function name should be get all to Do's right just like that and it's going to be a sync with function and this single width function is basically will return a promise so I'm going to create
17:00 - 17:30 interface so here I'm going to create folder called pipes right inside the types I'm going to create file called let's say task dot uh not the S right in here I'm going to export variable not variable but interface interface name it should be e task which is interface for task and also here I'm going to say ID should be string
17:30 - 18:00 and also the X right and tax it should be also string so let's go back to API here and this function here it should be a returning promise so I'm gonna I'm gonna do promise and This Promise have a value with a Type e ask and the attacks is basically inside array just like that okay so inside in here I'm going to do cons
18:00 - 18:30 response that equals to I'm going to use a batch come from JavaScript let's say fetch and I'm going to use backtick here and I'm gonna put the face URL and I'm going to say slash task and down here I want to say cons to do set it equals to oh wait for respawn dot Json all right and down here I'm going to return let's say to Do's so now
18:30 - 19:00 we can use this get altitles function into the app slash page.dsx so in here I'm going to wait for get all the deuce so I'm going to import the app here and of course I'm going to create a variable called let's say task that equals to get all to Do's okay let's run the function like so but as you can see it is get a warning and cannot find task with oh I'm doing wrong
19:00 - 19:30 here it should be cons set it equals to wait for get all to Do's okay we still get a warning because this function is not a sync with function so we can add a sync front of the function keyword here we can say async just like that so now if I console lock the tasks we should be able to see the data okay so if I hover the text here as you can see the tax has a interface e thoughts let's go back
19:30 - 20:00 here and I'm gonna go back to here let's open the console and let's see what we have Okay so let's refresh uh we cannot see in the console because this is a server component so I think we can see that into the terminal and here we go we have the value here really really cool so now what we can do is I'm going to send the tags into the to-do list component so we can say us set
20:00 - 20:30 equals to task so now we get this Arrow here because inside the to-do list we not handle this to do types props so now let's go to to-do list let's go to component and then to delete and inside in here I'm going to first create the interface let's say interface I'm going to call this to-do list props so that equals to not equals but object and in here I'm going to say ask
20:30 - 21:00 and this tax is basically have a tax interface and this is basically an array okay and of course we can do uh let's say react let's say dot function component and then we can put the the to-do list props inside in here okay so now we can grab the tags here I'm going to destructuring that I said tax just like that so now if I map through
21:00 - 21:30 the tax right here I think we can do that let's remove this command and inside the T body I'm gonna do a task right dot map as you can see map is automatically right here because uh typescript node this is a array okay so we can set up map and then we get the individual task inside in here let's say thoughts and I'm going to return uh let's say for now I just want to say
21:30 - 22:00 uh Dr right here okay just put that right here as you can see it's missing key prop so we can say key that equals to uh we can say task dot as you can see we have the suggestion ID and tags get this is the benefit of typescript I'm going to select ID let's remove the first DD here and I'm going to render the text so I can say ask dot X just like that and now
22:00 - 22:30 we should be able to see this buy milk with some orange and also the help my friend to find a girl and I'm going to change this ahead here well so let's go back to up here and this is going to be the task and this is going to be the action so let's remove this favorite color I'm going to say actions okay just like that so now I'm going to create another combined called tax tax is basically component that will render all this Dr so now I'm going to
22:30 - 23:00 go back to components and let's create a file called task dot jsx right because we're using typescript so in here I'm going to say rfce and I'm going to import this tags into the to the list so I'm going to for now I just want to copy this okay and put that right here I start here just like that and of course it should be half tax as a props
23:00 - 23:30 here yeah I think we can just destruct during the task like so let's go back here and I'm going to render the last component here just like that and we get an error because we don't send that path that set it equals to task just like that and we still get an error because the key props we need to add the key here so let's say dot ID
23:30 - 24:00 okay just like that and now the wording is gone let's go back to task here and as you can see if I hover here the the taxes have any type so let's create the interface up here so I'm going to do interface I'm going to call task props set equals to not equals and I'm gonna say task and this is going to be interface task come from the types here
24:00 - 24:30 okay so let's put the interface into the tax components we can say react dot functional component and we can put the as props like so okay cool so now as you can see here this automatically working and if I remove say dot as you can see we have the suggestion okay cool let's save and let's take a look we have the same thing cool so now what we need to do is let's create a model when we click the add new
24:30 - 25:00 text a button here okay so let's go back to the AC UI and we are going to let's go through the model I think it's going to be right here just click the model and I'm going to use the where is that the model right here with the x button in the right top corner so let's click the jsx and basically I'm going to copy this model here let's copy that and
25:00 - 25:30 I'm going to create another component called modal say model a DOT yesx and here I'm going to say rfce and of course I need to paste the model right here okay let's remove the react and here we go let's just minimize this so now let's render this model into the ask add text component here so I'm gonna do right here let's do model okay just like that
25:30 - 26:00 and now we should see model okay not of course because if we want to showing the model we need to add class here called Model Dash open okay if we add this class it should be showing the model so what we need to do now is basically inside the attacks here we need to add a state that will handle the modal pop-up okay so here I'm going
26:00 - 26:30 to create variable which is State and I'm going to call this model open and set model open okay so that equals to use state by default it should be false okay and of course when I hover here and as you can see the model is Boolean but of course you can add a pipe here we can say this should be a Boolean we can say like so and we
26:30 - 27:00 need to send this model open into the model component so we can say model opens that are equals to model open yeah so let's go back to model here and we are going to create interface to create uh rules into the props here so we can say interface and I'm going to call this modal props let's say model props and I'm gonna put this model I forget the name
27:00 - 27:30 model open all right so we can say model open this is going to be uh Boolean all right just like that and now we can put this model props into the modal component so we can say react and we can do functional component we can put the modal props right here so now we can grab the model open in here we can say model and then open okay so now we are going to basically
27:30 - 28:00 this is going to be template little loss so I'm going to use curly braces and in here let's just remove that for now now I'm going to use backtick and I'm going to say modal and here if the model open is true let's say model open is true I'm going to add class called modal Dash open what else if the model is false I just want to put empty string here see now let's go back to add task here
28:00 - 28:30 and when I click this button okay I'm going to add on click event with the error function in here we can say set open model into I'm going to say true okay uh the name is wrong set open modal that model open okay all right so let's use set open model and let's go back right we have this error that's because every component inside the app here will be coming a
28:30 - 29:00 server component by default but server component is not support use tape okay so we need to change this component the add text component into the client component so how to do that it's pretty pretty simple we can just say string here called use client just like that when I save and it should be gone okay so when I click this add new tag it should be open in the model when I click this one it's not going to be work because we need to send also the set
29:00 - 29:30 model open into the model here so we can run that into the model here okay so let's go back and we need to send this so let's go with set of model open set equals to set model open and of course we need to handle that right here okay set model open into this is going to be Arrow function and returning for it so now inside this label here I'm going to remove the html4 and I'm going
29:30 - 30:00 to add on click here and this on clicks basically will run the set model open set model open oh we don't yet import that as a props here so let's put the set model open and now we need to run the right here and we need to say false okay just like that and now it should be working as you can see when I click this it's going to open the model when I click that it should be close the model cool but as you can see
30:00 - 30:30 here we get some warning that's because uh as you can see the error earning is expected zero argument but got one so in here what we need to do is let's say open the opening should be Boolean and also this function will return in Boolean okay we can just say I think you can say uh Boolean let's remove this and do a Boolean like so all right it's still working and as you
30:30 - 31:00 can see it is clean cool so the next thing is inside the aptx basically I'm going to send oh you get some warning here I think let's go back and I'm going to let's go back to model and I'm going to add uh or let's say for it here okay just this is going to be removed the warning up here all right so basically now I'm going to add a
31:00 - 31:30 children inside this model so I'm going to remove this close stack and here I'm going to use self closing modal tag and in here I'm going to add the it's going to be modal for add to do okay let's save and as you can see it's got the warning because we don't handle the children so let's go back to model and we need to handle the children in here so let's say children the children is basically react dot
31:30 - 32:00 react as in note and now we can put the deodorant here we can see children and we can use the children right here so basically I'm going to remove all the paragraph and head three and I'm gonna put the children right here just like that so now when I click as you can see we have model for add to do next click this x button it's also close the model
32:00 - 32:30 all right everything look working so let's do anything in here we need to create a form let's remove this text and I'm going to do form let's remove the action we don't need to use action in here and this form is basically have uh let's do have three here and I'm gonna call this uh let's say add new task okay so styling this heads tree a little bit I'm going to say class names that equals to it's going to be phone bold and also
32:30 - 33:00 like large and also down here I'm going to put the div this diff have a class name call uh I think model action model action and done here inside the model action you're going to put the input so let's go back to the daisy UI and we are going to looking for text input and I'm gonna use this text input with border okay so
33:00 - 33:30 let's click this I'm going to copy let's go back and put the right here so let's save and the maximal width I'm going to set that to full so let's do a width I'm going to say a full just like that and also down here I'm going to put the button submit so let's do button button I'm going to say submit let's add some class name here class
33:30 - 34:00 names that equals to let's do BTN and the type is should be submit let's say type that equals to submit okay let's do submit like so can I save and let's take click here um and I click as you can see we have the title the input field and also the button Summit cool so inside the form here I'm going to handle the on submit event and I'm going to create function
34:00 - 34:30 call handle submit new to do just like that and let's uh copy the function name and I'm going to create the function name up here so we can say cons and I'll submit new to do set equals to error function I'm going to grab the event here and I want to say e Dot prefan and as you can see uh in the E here let's get some warning because the E
34:30 - 35:00 have uh uh any type so we need to fix this so inside the function here I'm going to add a type called form event handler okay this one and also inside in here I'm going to put HTML form element like so so now in here I can say e dot as you can see we have all the functions that we need so basically we need to use
35:00 - 35:30 refund default which is this one okay cool and next thing is I'm going to create a state so let's do here I'm going to say cons the state name I'm going to say new text value new tax value and the function set new tax value just like that the fee here it should be uppercase like that and set it equals to let's say use late
35:30 - 36:00 the default is going to be empty string and of course when we hover this is your behalf type string but of course we can things or we can just put the right here the string so now inside the input we can say a value set equals to are the name of the state which is new tax value so we can put right here and of course we can add the on change event and I'm going to grab the E and I want
36:00 - 36:30 to say set new text value into e dot Target dot value all right so now here I just want to console log the new text value so you can see the value in a console so I'm going to say console log new tax value like that okay and when we typing something inside the input field let's say hello I hit enter and see as you can see we
36:30 - 37:00 have this hello but of course I need to reset the value here let's go back and here I'm going to say set new tax value into empty string just like that when I click that it should be gone okay cool so now what we need to create is the function that will be at to do into the API so let's go back to the or API file and in here we need to create another function that will handle
37:00 - 37:30 the add to Let's export function I'm going to use Arrow function and I'm going to call this add to do wait I have to do so that equals to is going to be a sync function okay like that and inside in here I'm going to say cons respond set equals to I'm going to wait for fetch and this fetch here is basically will be fed into the base URL and I'm gonna put
37:30 - 38:00 slash ask okay and we are going to put the second parameter into this fetch function and in here I'm going to say the method should be let's say post method just like that and also the header I'm going to send let's say content type content type it should be application slash station this should be application illustration and
38:00 - 38:30 down here we need to send the body so we can say body and then we can use Json stringify here we can say Json Dot stringify and we need to put the new to do in here okay the to-do is basically come from this additive function so we can grab that right here just like that and also down here we need to say cons new to do so that it goes to 084 press
38:30 - 39:00 dot Json okay just like that and we need to return the new to do just like that and of course this add to will returning promise so here I'm gonna say this function will return in promise like that and the premise it should be Alpha type called it task right here okay here we go but the 2D as well it should be half I tax interface we can put a tax
39:00 - 39:30 right here okay cool so now we can use the add to function into the add ax component here okay so in here we can change the handle submit new to do into the async awit function so we can say async right here and also here I'm going to close this so you can see clearly and in here we can say wait for
39:30 - 40:00 add to do okay just make sure we import that from the API here so in here we need to send the new to do so let's go here and I'm going to say the ID is basically new ID for now I just want to put three and also the text the facts it should be new x value okay and as you can see the ID have a a warning here and they say type number
40:00 - 40:30 is not assignable to tab stream because add to do have uh interface as you can see here I tax it tax is basically come from here and the ID should be string okay so now we cannot put We cannot put number inside the ID okay the ID is should be a string like that so now the warning is gone so now when I refresh okay let's go to the
40:30 - 41:00 network to see the patching here so I'm gonna add new text and let's say go to gym okay if I hit enter and it should be at uh should we make a request here as you can see this is the response is the payload and the header here it's going to make a request into a localhost 2001's less tax and the method is pose and it's payload here okay but as you can see the model here is not gone so we need to
41:00 - 41:30 basically uh close the model so we can say set open model here into false all right and also here when I close that as you can see the the new to-do is not right here what is problem so let's go to the documentation the next JS documentation and I'm going to looking for fatting and let's scroll down here and for the static that of 18
41:30 - 42:00 we can do that like so and for uh revalidating we can use this one and basically we are going to use the dynamic data fetching so we need to add this catch no store into the fetch here so let's copy that and let's go back to the API here and we need to send the catch here okay the cats no store into the fetch into the get all to Do's so
42:00 - 42:30 now when I save and let's go back here let's go back here as you can see now we have go to gym so when I click add new text let's try that again I'm gonna do go to market I'm going to click submit and as you can see we get some error that's because we have same ID here okay the respawn it should be duplicate ID as you can see that's because we send the same ID here goodbye these three so I'm
42:30 - 43:00 going to change that to four let's try that again I'm gonna refresh and add new tags I'm going to say go to Market I want to see if I'm going to hit enter and we don't see the value here until we refresh it should be right here so what you need to do is basically we need to refresh the browser right so here I'm going to use router so we can say cons
43:00 - 43:30 router set equals to use router the use router is basically come from not come from next last router but come from next last navigation okay it's like that and now we can use the router here so we can say router dot refresh so now let's try that again and I'm going to add new text oh yeah this is going to be error because we not changed the ID so let's change
43:30 - 44:00 that first I'm going to say five and let's refresh and add new attacks here let's say learn math and I'm going to hit enter and as you can see the learn math is right here really cool I can add new text as well here so let's say learn English if I hit enter and yeah you always we always get the error that's because the ID is still five so I think now we need to use uuid to create the random ID for us so let's
44:00 - 44:30 copy the uh command here and go to the terminal and I'm going to paste that right here okay so use that is pretty really simple let's go to the repos story here and let's scroll it down and I'm going to copy this import here let's go back and I'm going to close the terminal and let's minimize this and up here I'm
44:30 - 45:00 going to import version for SIU uuid version 4. from uuid okay and also we can use that here okay we can copy and use that right here just like that as you can see we get some error here that's because we don't install that type so let's copy the npm install the save dependency
45:00 - 45:30 types uuid let's copy that and here let's open another terminal again put it here and hit enter and it should be fixed error so let's close this as you can see the error is gone cool so now let's try again and let's go back to simple to do here let's refresh and add new tags I'm gonna say learn English hit enter and here we go we have the
45:30 - 46:00 learn English right here let's do that again let's say walking with my Dock and if I hit enter as you can see it's right here all right the add new text is working now what the next we need to do is basically in here we need to showing the icon the edit icon and the delete icon so let's close all of that I think all right cool so now the icon it should be
46:00 - 46:30 inside the house here all right inside in here so let's go to react icons so we need to install that I think we have already installed or I forget that so let's go here and react icon yeah we have already installed equal so now I'm looking for edit so we are going to use this if I edit this icon here so let's click and let's
46:30 - 47:00 go back uh we are going to use the icon in here let's remove the blue tags here and I'm going to render the FI edit so let's import the if I edit right here so you can say import if I edit from gonna become from react icon slash fi because we're using this fi okay so now if I save and it should be showing the icon
47:00 - 47:30 all right nice so let's change the size here a little bit I'm going to use 25 so let's say size set equals to 25. and let's see here we go it's look nice and also I'm going to looking for trash icon so let's search for stress and what I'm going to use so I think I'm gonna use this fi trass too so let's copy that and let's use that right here so we can
47:30 - 48:00 put that like so and also the size let's do 25 as well I set equals to 25 and of course we need to import that from the react icon slash fi let's save and now we should be able to have to Icon here so let's add the class name the class name should be flex and the Gap I'm gonna add five let's save and here we go cool so for
48:00 - 48:30 the edit here I'm going to add a color so let's say class name and I'm gonna change the color into blue X blue I'm going to do 500 and also for the trash color which is the delete color I'm going to change that to text Red 500. and here we go and basically I'm going to boost this icon to really right here okay into the first DD here I'm going to
48:30 - 49:00 add class name and the width I want to set that to full okay it should be posted content into the right here all right the core sorry should be pointer as well here so let's do cursor let's say pointer and also I'm going to copy this and put that right here as well all right we do something wrong here we go and should be pointer now cool so now when we click the icon here
49:00 - 49:30 it should be showing the pop-up so now let's create the model uh I think I'm going to just copy the model come from the add box here so you can just copy this model I'm going to copy that go to tax here and I'm going to put the model down here okay and of course we get a lot of error because uh we don't have this model open
49:30 - 50:00 and a lot of this function so let's create up here so first I'm going to create State call let's say open model edit and also the function set open model edit okay tell equals to use slate by default it should be false so we need to grid to a model State here basically the first thing is for the edit and the second thing is for the delete like so
50:00 - 50:30 alright so here you need to of course import the model and we need to send the open model edit to model open here and the set model open it should be set at equals to set model edit okay it's one and also this function here I'm going to change that to a step of handle submit new to do I think I'm going to change that to handle submit
50:30 - 51:00 edit to do okay so let's create a function up here say cons Ole submit edit 2 so that equals to error function okay for now just put like so of course we need to put the arrow here and one next the next thing is the value here the value should be the value should be come from the tax here but of course we need to add state to handle the change all right so here I'm going
51:00 - 51:30 to say cons and here I'm going to say tax to edit let's say text to edit and also the function set tax to edit set equals to by default it's not empty string but by default it should be x dot pass not that stocks dot tax just like that okay and of course you can add the types here for the open model it should
51:30 - 52:00 be uh Boolean and for this one here of course this should be a Boolean as well and for this uh tax to edit it should be a string so let's think this value here to the value come from here tax to edit so we need to copy that put it here and the function it should be set box to edit all right everything look working
52:00 - 52:30 or we need to remove this duplicate class name and I think we have also duplicate last name here so let's remove that as well all right cool so let's go back and now oh yeah we get an error because uh it's like in in attacks here this is basically by default is server component so we need to change that into client component with use client string so you can put up here just like that and the error issue be
52:30 - 53:00 gone when I click edit oh there's not working because I think we don't handle the on click inside the if I edit icon so you can say on click and here I'm going to running function and the function it should be set the open model edit open model edit into true just like that so now let's take a look when I click as you can see it should be open the model and of course the label
53:00 - 53:30 here it should be edit so let's go to model H3 here I'm going to change that to edit task all right cool as you can see if I click the go to gym it should be showing the go to gym if I click the learn math it should be showing learn math all right really really cool so basically inside this function it's really really similar like this function
53:30 - 54:00 here so I think I'm going to copy all of this copy that and go back here into tags here and I'm going to paste that right here here we go okay but of course here we get some warning because the form event handler should become from react and also the attitude here is not going to be added to do now it should be added to do but we don't have yet I think we need to just comment this
54:00 - 54:30 and set new tax value it should be set text to edit okay we make it to empty string and the set open model we need to set that to false and the router here of course we need to import the router we can say cons router set equals to use router it should become from next navigation like that all right cool
54:30 - 55:00 and what the next thing we need to do we need to create the API so let's go to api.ds and here we need to create the edit to do so let's copy this paste that down here so now we need to change the name here it into I want to say added to do and it's going to be like to do all right cool and of course it should be get specified ID so we need to put the
55:00 - 55:30 to do dot ID here okay and the method should be put method and everything will look same and of course this new to do it should be updated to do updated to do just like that all right I think we can use edit to do now into the X component so you can just uncomment this and now we need to use this edit to do and of course we need to
55:30 - 56:00 import that ID is basically come from the ax not tax but ax dot ID okay it's gonna become from this props here and the text it should be text to edit right here all right I think it should be working let's go back and I'm going to edit the foreign analyst here I'm going to click and as you can see the value right here
56:00 - 56:30 and I'm going to change to learn programming so hit something and as you can see it's update automatically really really cool so next let's working with the delete here on I'm going to first create the API here so I think let's just copy this and put that down here and now it's going to be uh let's say delete to delayed to do delete the juice basically
56:30 - 57:00 just have a ID here so the ID is basically string so you can say string and This Promise is basically will returning for it so we don't need to return anything so let's put void and uh here we need to the method should be Elite like so and also is going to be ID
57:00 - 57:30 and the body and the header we don't need that and also here we need to just remove that just simple as that and of course the variable here you don't need that all right just like that so now let's go back to tax here and first we need to create the model and down here down the icon we need to create the model right so I think we can just copy this model here let's copy that and put the right here so instead
57:30 - 58:00 of form I'm going to remove this form here okay the children inside this model like that and also I'm going to change this model open to open model and delete all sort of function it should be set open model and delete okay so the model children it should be I'm going to put history and I'm going to say
58:00 - 58:30 are you sure you want to delete this ask right and also this has three have a class name and I'm going to say it packs to large and also down here we have a div have a class name and I'm gonna say model Dash action and also instead of model action we have uh I think just a
58:30 - 59:00 button so this button have uh X yes and here I'm going to add on click let's say on click when we click the button yes I need to run the handle delete box so let's do handle delete mask okay we need to send the ID so we can put the tax dot ID
59:00 - 59:30 just like that and of course the class name it should be BTN all right so let's click create this handle and delete text function so I'm going to do up here let's say cons Ole delete box set it equals to Arrow function and it's going to be like ID so the ID is basically a string and in here this is going to be a sync allit
59:30 - 60:00 function so we can say sync and here we are going to wait for a delayed to do it's going to become from the API that we create here okay and the delete to do have a property called ID so let's send the ID down here so we need to put the ID like so and down here we need to set the open model delete to false because we need to
60:00 - 60:30 close the model and again we need to see a router dot refresh let's go back and I'm going to delete walking with my doc click this nothing happened because again we don't handle the on click inside the uh icon here so we can say on click set equals to I'm going to say set open model delete into true let's save and when I click this I mail with some
60:30 - 61:00 orange I'm going to click yes it should be gone yeah let's click that again it's gone all right it's working when I try to edit here we have some bug I think so let's see here we have this stack go to gym when I say go to gym new if I click submit as you can see this is updated right but when I click that again it's empty here okay that's the back let's go back here so basically
61:00 - 61:30 what happened is we set the set text to edit is empty string so we don't need to do that let's remove this it should be fixed the problem so let's refresh to make it clean I'm going to edit this one and just remove the new keyword right there I'm going to click submit as you can see this is updated and if I hit edit again and the value is here okay everything look work now so let's delete add new tax I'm going to do I'm gonna
61:30 - 62:00 say finish turned off tutorial coding and if I hit enter and it should be up here okay cool we can also edit this we can say done and hit submit and also this is uh updated all right also we can delete that all right everything look working guys and hopefully you follow along this tutorial until it's done and also button
62:00 - 62:30 like And subscribe is still down there so you can click that and see you in the next video bye