This is a Next.js project that created with npx create-next-app@latest
First, install npm packages:
npm install
# or
yarn
Then, run the development server:
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying pages/index.js
. The page auto-updates as you edit the file.
-
Build the design according to
figma-design.png
(as pixel perfect as possible) -
You can find design details in
figma-design-details.png
-
You can also find design details and icons&logo files in Figma
-
You can replace the icons with the icon you want.
User should be able to:
- create new todo
- remove todo
- update todo
- pin the todo
Nice to have:
- Responsive design (for web, tablet and mobile screens)
- Use of TypeScript (you can start a new project with next.js typescript template)
- Use of TailwindCSS
- Use of localstorage
- Git history and commit messages
- Project deployment (to the vercel-netlify-heroku-firebase etc)
Create Todo
POST /api/todos
Parameter | Type | Description |
---|---|---|
title |
string |
Required. Todo Title |
CURL Example:
curl -X POST http://localhost:3000/api/todos
-H 'Content-Type: application/json'
-d '{ "title": "Example Todo 1"}'
Response
{
"id" : number,
"title" : string,
"checked" : bool,
"pinned" : bool
}
Get Todo List
GET /api/todos
CURL Example:
curl -X GET http://localhost:3000/api/todos
Response
[
{
id: number,
title: string,
checked: bool,
pinned: bool,
},
{
id: number,
title: string,
checked: bool,
pinned: bool,
},
]
Get Todo Detail
GET /api/todos/:id
CURL Example:
curl -X GET http://localhost:3000/api/todos/1652861603540
Update Todo
PATCH /api/todos/:id
CURL Example:
curl -X PATCH http://localhost:3000/api/todos/1652861603540
-H 'Content-Type: application/json'
-d '{ "title": "Example Todo Updated" }'
Delete Todo
DELETE /api/todos/:id
CURL Example:
curl -X DELETE http://localhost:3000/api/todos/1652861603540