The To-Do List application is a well-structured project that allows users to efficiently manage tasks.
React.App.-.InPrivate.-.Microsoft.Edge.2023-09-29.20-30-37.mp4
- TypeScript
- React
- Docker
- NestJS
- User Interface:
- Task list display.
- Text field for entering new tasks.
- Button for adding new tasks.
- Delete button and checkbox for each task to mark as completed.
- Functionality:
- Add new tasks to the list.
- Delete tasks from the list.
- Visually cross out tasks marked as completed.
- Unit Tests:
- Test for adding a new task.
- Test for deleting a task.
- Test for marking a task as completed.
- Endpoints:
POST /tasks
for adding a new task.DELETE /tasks/:id
for deleting a task.PATCH /tasks/:id
for updating a task (marking as completed).
- Data Model:
- Task:
{ id: number, content: string, done: boolean }
- Task:
- Unit Tests:
- Test for the
POST
endpoint (adding a task). - Test for the
DELETE
endpoint (deleting a task). - Test for the
PATCH
endpoint (updating a task).
- Test for the
Both frontend and backend parts of the application come with Dockerfile configurations, allowing for containerization. A docker-compose.yml
file is included for seamless orchestration of both services.
- Docker installed on your machine.
- Docker Compose for multi-container orchestration (usually bundled with Docker Desktop).
-
Clone this repository:
-
Navigate to the project directory:
cd todo-list
-
Build and start the containers:
docker-compose up --build
-
Once the containers are up and running, you can access:
- Frontend:
http://localhost:3001
- Backend API:
http://localhost:3000
To stop the services:
docker-compose down
The backend service provides the following main endpoints:
POST /tasks
: Adds a new task.DELETE /tasks/:id
: Deletes a task by ID.PATCH /tasks/:id
: Updates a task by ID.
CreateTaskDto
: Used when creating a new task, contains thecontent
anddone
fields.UpdateTaskDto
: Used when updating a task, contains thedone
field.