devkishor8007 / todo-project

todo-project

Setup

• $ git clone devkishor_project_todo
• $ cd todo-project
• $ npm install
• add .env file as given the .env.example file, copy it and add your own

baseurl

• localhost:5000

api endpoint

• GET /api/v1/todos
• GET /api/v1/todo/{id}
• POST /api/v1/todo
• PATCH /api/v1/todo/{id}
• DELETE /api/v1/todo/{id}

used

• nodejs, expressjs, mongodb, ejs(template engine), typescript
• yup for validate
• morgan allows you to log HTTP requests made to your application in a standardized format
• cors helps security feature implemented by web browsers
• dotenv is a zero-dependency module that loads environment variables from a .env file
• helmet helps secure your Express.js app by setting various HTTP headers.
• ts-node allows you to run TypeScript scripts without first compiling them to JavaScript
• nodemon helps automatically restarts a Node.js app when file changes are detected

functionalities

• todo: add, create, delete, update
• filterable todo by status
• try to handle errors

what's inside??

After setup, start the server $ npm run dev, you can see on your terminal server running on http://localhost:5000!; wait for the connection of mongodb connection and if ok hint the url on any browser, this given below image is open on your browser. Basically, this page is the opening page!!

• And you have the idea of what should you gona do. And you can do as you wanted to do.

And you can see the view todo button and hint button and you see the no todo found message because you have not added any todo.

to add todo you can go hint back button as you can see there.

And we back to come with the first page, there is a todo form so without fill up form, if you hint the submit button you can see the error message, And while you fill the form without missing any field, then your first todo is created.

Great, you have some todo, while check the view todo button, you can have as same as the image you can see, I have two todo, that means I have fill up form two times. And you see the id value and if you click the id value i.e 1 then you can see only one todo like as the image bellow

to update todo you can go hint back button as you can see there.

on the right side, you can see the action and In the action section there are two things i.e. edit and delete icon and which work while you click. As you can see the images, when you have the edit todo, at that case you can select the edit icon action as you need delete some todo, then you can click the delete icon action

while todo is delete successfully

Happy New Year 2023