Technologies Getting Started API Endpoints Collaborators Contribute
we can add update and delete todos. we can change the status of the todos, this project has a frontend backend and REST api which is built upon the Nextjs framework.
- Next.js - framework(used this because i can create the backend and api in this itself)
- react - library(component based js library used widely for web applications and next is framework built on react)
- shadCn - Ui library(used pre-made components from this library which saved me a lot of time)
- tailwindCSS- CSS framework(used for styling)
- MongoDB - DB (used for storing the data on the cloud)
- zod - schema validation library
- react-hook-form - used for creating form validation
- typescript - used for type safety
first clone the project in your local machine
git clone https://github.com/onlybond/todo-pesto
go to the projet directory and open it in a code editor (i use vscode no offense for vim)
cd todo-pesto && code .
in the terminal run this command to run it in the localhost
npm i && npm run dev
note : if you are a windows user try to give the commands seperately for example
npm i
and then
npm run dev
Use the .env.example
as reference to create your configuration file .env
with your AWS Credentials
MONGODB_URI= {YOUR_MONGODB_URI/DATABASENAME}
How to start your project
cd project-name
npm run dev
Route | Description |
---|---|
GET api/todos |
Retrieves todos from the database. See response details. |
POST api/todos |
Adds a todo to the database. See request details. |
PATCH api/todos/[:id] |
Updates a todo in the database according to the ID. See request details. |
DELETE api/todos/[:id] |
Deletes a todo in the database according to the ID. See response details. |
RESPONSE
[
{
"id": "1",
"title": "Learn React",
"desc": "Complete React tutorial",
"status": "todo",
"updatedAt": "2024-07-11T14:48:00.000Z",
"createdAt": "2024-07-11T14:48:00.000Z"
},
{
"id": "2",
"title": "Learn Next.js",
"desc": "Build a Next.js app",
"status": "inprogress",
"completedby": null,
"updatedAt": "2024-07-11T14:48:00.000Z",
"createdAt": "2024-07-11T14:48:00.000Z"
}
]
REQUEST
{
"title": "Learn TypeScript",
"desc": "Complete TypeScript tutorial",
"status": "todo"
}
RESPONSE
{
"id": "3",
"title": "Learn TypeScript",
"desc": "Complete TypeScript tutorial",
"status": "todo",
"completedby": null,
"createdAt": "2024-07-11T14:48:00.000Z",
"updatedAt": "2024-07-11T14:48:00.000Z"
}
REQUEST
{
"title": "Learn TypeScript",
"desc": "Complete advanced TypeScript tutorial",
"status": "inprogress"
}
RESPONSE
{
"id": "3",
"title": "Learn TypeScript",
"desc": "Complete advanced TypeScript tutorial",
"status": "inprogress",
"completedby": null,
"createdAt": "2024-07-11T14:48:00.000Z",
"updatedAt": "2024-07-11T15:00:00.000Z"
}
RESPONSE
{
"message": "Todo deleted successfully."
}
To interact with the API, use the provided routes and their respective request formats as shown above. Each route allows you to perform operations on todos stored in the database.