Skip to content

tarnilok/TodoApp

Repository files navigation

Westerops Todo App

This is a Next.js project that created with npx create-next-app@latest

Getting Started

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.

Tasks

  • 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)

API

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