Welcome to our little boilerplate!

This is a boilerplate for a React project using TypeScript, Vite, and Storybook.

It includes basic configurations to help you get started quickly. It does not have an exhaustive set of features, it should serve as a starting point for your project.

Assignment

The assignment is simple:

Create a simple Todo app, where you can add, remove, and toggle the completion status of tasks

Timebox: 3-4 hours

Features

You chose the features you want to implement, but here are some suggestions:

• As a user, I want to be able to add a new task with a title and description.
• As a user, I want to be able to see a list of tasks with their titles and completion status.
• As a user, I want to be able to toggle the completion status of a task.
• As a user, I want to be able to remove a task from the list.
• As a user, I want to be able to filter tasks by their completion status (all, completed, active).
• As a user, I want to be able to edit the title and description of a task.
• As a user, I want to be able to mark all tasks as completed or active.
• As a user, I want to be able to see the number of active tasks.
• As a user, I want to be able to see the number of completed tasks.

API requests

For this assignment, please mock all API requests (e.g., fetching, adding, updating, or deleting tasks). You can use tools like Mock Service Worker, custom mock functions, or any other approach you prefer. There is no backend service provided.

What are we looking for?

• Clean and maintainable code (Be prepared to explain why your code is clean and maintainable)
• Testing strategy including API mocks
• Basic styling (CSS or a CSS-in-JS solution)
• Good use of TypeScript features (interfaces, types, etc.)
• Use of React functional components and hooks
• Use of Storybook for development
• Out of the box thinking (feel free to add any additional features you think would be useful)

What we are not looking for?

• Complex state management libraries (like Redux or MobX)
• Devops setup (like CI/CD)
• Complicated CSS solutions (unless it adds value)

Feel free to use any libraries or tools you find useful, but keep it simple and focused on the task at hand.

Getting Started

1. Install dependencies npm install
2. Start the development server npm run dev
3. Start storybook npm run storybook
4. Start coding!