Front-end onboarding exercise
Project Overview:
Our project aims to create a user-friendly todo list application using Next.js. Users can seamlessly manage their tasks by adding, editing, and viewing todos. The design focuses on keeping the interface clean and efficient, incorporating modals for adding and editing todos to provide users with a smooth experience.
Technical Requisitions:
- Framework: The project will be developed using Next.js for efficient server-side rendering and a seamless development experience.
- State Management: Data handling and keeping data updated will be implemented using Redux Toolkit, ensuring a predictable state container for managing the application's state.
- Form Handling and Validation:
- Forms will be implemented using `useForm` for simplified form management.
- Form validation will be handled using Yup, providing a robust and schema-based validation approach.
- Design Kit:
- The design kit for the project will be based on Material UI, offering a set of pre-designed components and a cohesive visual language for a modern and responsive user interface.
User Story 1: Create Todo
As a user, I want to be able to add a new todo to my list. When creating a todo, I should be prompted to provide a title, description, and choose a color for the todo. Once added, the todo should appear in the list with the specified details and the selected color.
Design Details:
- Place the "Add" button prominently on the main screen, such as in the top right corner or center bottom.
- Upon clicking "Add," display a modal dialog for creating a new todo.
- The modal should include input fields for title, description, and a color picker for selecting the todo's background color.
- Show a success snack bar with a message like "Todo added successfully" when the user successfully adds a new todo.
User Story 2: List Todos
As a user, I want to view a list of all my todos. When I navigate to the todo list page, each todo should be displayed as a row. The row should include the title, description, and have a background color that corresponds to the color chosen when creating the todo.
User Story 3: Edit Todo
As a user, I want the ability to edit an existing todo. When I select a todo from the list, I should be able to modify its title, description, or change its color. Once edited, the changes should be reflected in the todo list.
Design Details:
- Provide an "Edit" option within each todo row in the main list.
- Clicking "Edit" opens a modal with pre-filled fields for the selected todo's title, description, and the current color.
- Allow the user to modify these details within the modal without navigating away from the main todo list view.
- Show a success snack bar with a message like "Todo updated successfully" when the user successfully edits a todo.