git clone [email protected]:jmsv23/BE-to-FE-path.git
This excercise uses Next.js as a base and has Tailwind support built in, so you will be able to use tailwind or pure css to acomplish the task.
The goal of this exercise it's create a TODO app. This app should be capable to create, update, delete and mark as complete the different tasks.
- Input field: The app should have an input text field to allow the user to enter a text description of the task. This field should also be used to update the existing tasks.
- Save/Update Button: This button should be on the side of the input field and should save/update the task when it's clicked.
- List: The user should be able to see a list of all the task (including the completed tasks).
- Complete/update/delete Buttons: Each element of the list should have 3 buttons: Complete, Update & Delete. These buttons will allow the user to mark each task as complete, update the task description or delete the task.
- Completed tasks: The completed tasks should show a different style than the rest. This will allow the user to know it is complete.
- Validation: The input field should have a validation to prevent empty task from being created.
- Responsive: The application should be responsive and display correctly on different screen sizes. You are free to decide the look and feel of the application.