Tino solution

[tinogomes]

Getting Started

Prerequisites

Ensure you have the following installed:

• Node.js (v20 or above)
• pnpm (v9)

Setup Instructions

1. Clone the repository:

git clone git@github.com:tinogomes/react-take-home-exercise.git
pushd react-take-home-exercise

2. Install dependencies:

pnpm i

3. Start the development server:

pnpm dev

View the app:

Open your browser and navigate to http://localhost:5173 (or the port specified in your terminal) to see the application in action.

Issues fixed

• [FIX] Changing the filter does not update the task list correctly.
• [FIX] Deleting a task does not immediately update the UI, causing a delay or inconsistency in the displayed task list.
• [FIX] new task with blank title
• [FIX] add new tasks using new IDs
• Ensure the layout, spacing, and colors align with the provided design guidelines
• Created types to ensure robust type safety.
• Refactoring to reduce duplications

Optional Enhancements

1. Implement functionality to save and retrieve tasks from local storage
2. Implement a confirmation dialog when deleting a task
3. Write tests
4. UI Improvements
5. Disable "Add" button when empty title
6. Highlight current filter

Other features that I thought of, but decided not to implement to put this challenge up for analysis

1. Replace the completed flag to use date, so it is possible to identify when the task is complete.
2. Create a button to delete all completed tasks

Other comments

I wanted to deploy to Heroku, but since I have no credit limit on my credit card, it was not possible to perform this task.

Checklist Test

1. type spaces for new task and "Add" button should be disabled
2. Click on filter to see tasks
3. Type a new task and press "Add" button
4. Reload page to check if the new task is persisted
5. Click on task's title on tasks list to toggle between completed/pending task
6. Reload the page to verify that the task status has been persisted correctly
7. Click to delete any task and you should see a modal to confirm to delete
8. After confirm to delete, the task should not be visible on tasks list
9. Reload the page to verify if the task was really deleted.