System: You are a world class full stack software developer working in a team.

You write modular, well-organized code split across files that are not too big, so that the codebase is maintainable. You include proper error handling and logging for your clean, readable, production-level quality code.

Your job is to implement tasks assigned by your tech lead, following task implementation instructions.
User: We're starting work on a new task for a project we're working on.

Here is a high level description of "test":
```
The application is a simple ToDo app built using React. Its primary function is to allow users to manage a list of tasks (todos). Each task has a description and a state (open or completed, with the default state being open). The application is frontend-only, with no user sign-up or authentication process. The goal is to provide a straightforward and user-friendly interface for task management.

Features:
1. Display of Todos: A list that displays all todo items. Each item shows its description and a checkbox to indicate its state (open or completed).
2. Add New Todo: A button to add a new todo item. Clicking this button will prompt the user to enter a description for the new todo.
3. Toggle State: Each todo item includes a checkbox. Checking/unchecking this box toggles the todo's state between open and completed.
4. Local Storage: The application will use the browser's local storage to persist todos between sessions, ensuring that users do not lose their data upon reloading the application.

Functional Specification:
- Upon loading the application, it fetches existing todos from the local storage and displays them in a list.
- Each todo item in the list displays a checkbox and a description. The checkbox reflects the todo's current state (checked for completed, unchecked for open).
- When the user checks or unchecks a checkbox, the application updates the state of the corresponding todo item and saves the updated list to local storage.
- Clicking the "Add New Todo" button prompts the user to enter a description for the new todo. Upon confirmation, the application adds the new todo (with the default state of open) to the list and updates local storage.
- The application does not support deleting or editing todo items to keep the interface and interactions simple.
- Todos persist between sessions using the browser's local storage. The application saves any changes to the todo list (additions or state changes) in local storage and retrieves this data when the application is reloaded.

Technical Specification:
- Platform/Technologies: The application is a web application developed using React on frontend and Express on the backend, using SQLite as the database.
- Styling: Use Bootstrap 5 for a simple and functional interface. Load Boostrap from the CDN (don't install it locally):
    - https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css
    - https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js
- State Management: Directly in the React component
    - make sure to initialize the state from the local storage as default (... = useState(JSON.parse(localStorage.getItem('todos')) || []) to avoid race conditions
- Data Persistence: Using the SQLite database on the backend via a REST API.
```


Here are the technologies that should be used for this project:
* Node.js - JavaScript runtime needed to run the React development tools and build the project.

* react - A JavaScript library for building user interfaces.
* react-dom - Serves as the entry point to the DOM and server renderers for React.
* bootstrap - Frontend framework for developing responsive and mobile-first websites.

Here's what's already been implemented:

* React web app using Vite devserver/bundler
* Initial setup with Vite for fast development
* Basic project structure for React development
* Development server setup for hot reloading
* Minimal configuration to get started with React
* Frontend-only, compatible with any backend stack



We've broken the development of the project down to these tasks:
```
1. Create a new component TodoList: This component will display the list of todo items. Use localStorage directly to access the current state of todos and map over them, rendering each todo item as a list item. Each item should display the todo's description and a checkbox that reflects the todo's state (checked for completed, unchecked for open). When the checkbox is clicked, dispatch an action to toggle the state of the todo. Also create AddTodo: This component will include a button that, when clicked, displays a prompt asking the user for a description of the new todo. Upon confirmation, dispatch an action to add the new todo to the state with a default state of open. Ensure the component also updates the local storage with the new list of todos. Finally, use TodoList and AddTodo components in App component to implement the required functionality. Integrate Boostrap 5 for styling - add CSS/JS to index.html, style App.jsx and other files as appropriate.
```

The next task we need to work on, and have to focus on, is this task:
```
Create a new component TodoList: This component will display the list of todo items. Use localStorage directly to access the current state of todos and map over them, rendering each todo item as a list item. Each item should display the todo's description and a checkbox that reflects the todo's state (checked for completed, unchecked for open). When the checkbox is clicked, dispatch an action to toggle the state of the todo. Also create AddTodo: This component will include a button that, when clicked, displays a prompt asking the user for a description of the new todo. Upon confirmation, dispatch an action to add the new todo to the state with a default state of open. Ensure the component also updates the local storage with the new list of todos. Finally, use TodoList and AddTodo components in App component to implement the required functionality. Integrate Boostrap 5 for styling - add CSS/JS to index.html, style App.jsx and other files as appropriate.
```


These files are currently implemented in the project:
* `.gitignore: Specifies patterns to exclude files and directories from being tracked by Git version control system. It is used to prevent certain files from being committed to the repository.`
* `vite.config.js: Configuration file for Vite, a fast developer-friendly Javascript bundler/devserver.`
* `.eslintrc.cjs: Configuration file for ESLint, a static code analysis tool for identifying problematic patterns found in JavaScript code. It defines rules for linting JavaScript code with a focus on React applications.`
* `package.json: Standard Nodejs package metadata file, specifies dependencies and start scripts. It also specifies that the project is a module.`
* `index.html: Main entry point for the project. It includes a basic HTML structure with a root div element and a script tag importing a JavaScript file named main.jsx using the module type. References: src/main.jsx`
* `public/.gitkeep: Empty file`
* `src/index.css: Defines styling rules for the root element, body, and h1 elements of a web page.`
* `src/App.css: Contains styling rules for the root element of the application, setting a maximum width, centering it on the page, adding padding, and aligning text to the center.`
* `src/main.jsx: Main entry point for a React application. It imports necessary modules, renders the main component 'App' inside a 'React.StrictMode' component, and mounts it to the root element in the HTML document. References: App.jsx, index.css`
* `src/App.jsx: Defines a functional component that serves as the root component in the project. The component is exported as the default export. References: src/App.css`
* `src/assets/.gitkeep: Empty file`

**IMPORTANT**
The files necessary for a developer to understand, modify, implement, and test the current task are considered to be relevant files.
Your job is select  which of existing files are relevant for the current task. From the above list of files that app currently contains, you have to select ALL files that are relevant to the current task. Think step by step of everything that has to be done in this task and which files contain needed information.

Here is the current relevant files list:
[]
Now, with multiple iterations you have to find relevant files for the current task. Here are commands that you can use:
- `read_files` - List of files that you want to read.
- `add_files` - Add file to the list of relevant files.
- `remove_files` - Remove file from the list of relevant files.
- `finished` - Boolean command that you will use when you finish with finding relevant files.

Make sure to follow these rules:
- All files that you want to read or add to the list of relevant files, must exist in the project. Do not ask to read or add file that does not exist! In the first message you have list of all files that currently exist in the project.
- Do not repeat actions that you have already done. For example if you already added "index.js" to the list of relevant files you must not add it again.
- You must read the file before adding it to the list of relevant files. Do not `add_files` that you didn't read and see the content of the file.
- Focus only on your current task `Create a new component TodoList: This component will display the list of todo items. Use localStorage directly to access the current state of todos and map over them, rendering each todo item as a list item. Each item should display the todo's description and a checkbox that reflects the todo's state (checked for completed, unchecked for open). When the checkbox is clicked, dispatch an action to toggle the state of the todo. Also create AddTodo: This component will include a button that, when clicked, displays a prompt asking the user for a description of the new todo. Upon confirmation, dispatch an action to add the new todo to the state with a default state of open. Ensure the component also updates the local storage with the new list of todos. Finally, use TodoList and AddTodo components in App component to implement the required functionality. Integrate Boostrap 5 for styling - add CSS/JS to index.html, style App.jsx and other files as appropriate.` when selecting relevant files.

**IMPORTANT**: Pay attention to file paths: if the command or argument is a file or folder from the project, use paths relative to the project root.
 For example:
 - use `dirname/filename.py` instead of `/path/to/project/dirname/filename.py`
 - use `filename.js` instead of `./filename.js`
User: IMPORTANT: Your response MUST conform to this JSON schema:
```
{"properties": {"action": {"anyOf": [{"properties": {"read_files": {"anyOf": [{"items": {"type": "string"}, "type": "array"}, {"type": "null"}], "description": "List of files you want to read. All listed files must be in the project.", "title": "Read Files"}}, "required": ["read_files"], "title": "ReadFilesAction", "type": "object"}, {"properties": {"add_files": {"anyOf": [{"items": {"type": "string"}, "type": "array"}, {"type": "null"}], "description": "List of files you want to add to the list of relevant files. All listed files must be in the project. You must read files before adding them.", "title": "Add Files"}}, "required": ["add_files"], "title": "AddFilesAction", "type": "object"}, {"properties": {"remove_files": {"anyOf": [{"items": {"type": "string"}, "type": "array"}, {"type": "null"}], "description": "List of files you want to remove from the list of relevant files. All listed files must be in the relevant files list.", "title": "Remove Files"}}, "required": ["remove_files"], "title": "RemoveFilesAction", "type": "object"}, {"properties": {"done": {"anyOf": [{"type": "boolean"}, {"type": "null"}], "description": "Boolean flag to indicate that you are done creating breakdown.", "title": "Done"}}, "required": ["done"], "title": "DoneBooleanAction", "type": "object"}], "title": "Action"}}, "required": ["action"], "title": "RelevantFiles", "type": "object"}
```.YOU MUST NEVER add any additional fields to your response, and NEVER add additional preamble like 'Here is your JSON'.
Assistant: