You are working on an app called "erfergerg" and you need to write code for the entire app based on the tasks that the tech lead gives you. So that you understand better what you're working on, you're given other specs for "erfergerg" as well.

Here is a high level description of "erfergerg":
```
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


These files are currently implemented in the project:
---START_OF_FILES---
**`.eslintrc.cjs`** (21 lines of code):
```
module.exports = {
  root: true,
  env: { browser: true, es2020: true },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react/jsx-runtime',
    'plugin:react-hooks/recommended',
  ],
  ignorePatterns: ['dist', '.eslintrc.cjs'],
  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
  settings: { react: { version: '18.2' } },
  plugins: ['react-refresh'],
  rules: {
    'react/jsx-no-target-blank': 'off',
    'react-refresh/only-export-components': [
      'warn',
      { allowConstantExport: true },
    ],
  },
}
```

**`.gitignore`** (24 lines of code):
```
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
```

**`index.html`** (12 lines of code):
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>erfergerg</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
```

**`package.json`** (26 lines of code):
```
{
  "name": "erfergerg",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.64",
    "@types/react-dom": "^18.2.21",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.1.6"
  }
}
```

**`vite.config.js`** (7 lines of code):
```
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})
```

**`public/.gitkeep`** (0 lines of code):
```
```

**`src/App.css`** (7 lines of code):
```
#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

```

**`src/App.jsx`** (11 lines of code):
```
import './App.css'

function App() {
  return (
    <>
      <h1>erfergerg</h1>
    </>
  )
}

export default App
```

**`src/index.css`** (20 lines of code):
```
:root {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

```

**`src/main.jsx`** (10 lines of code):
```
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
```

**`src/assets/.gitkeep`** (0 lines of code):
```
```

---END_OF_FILES---

**IMPORTANT**
Remember, I created an empty folder where I will start writing files that you tell me and that are needed for this app.
**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`

DO NOT specify commands to create any folders or files, they will be created automatically - just specify the relative path to each file that needs to be written.

**IMPORTANT**: When creating and naming new files, ensure the file naming (camelCase, kebab-case, underscore_case, etc) is consistent with the best practices and coding style of the language.All the steps will be executed in order in which you give them, so it is very important that you think about all steps before you start listing them. For example, you should never code something before you install dependencies or you should never try access a file before it exists in project.
**IMPORTANT**
You must not tell me to run a command in the database or anything OS related - only if some dependencies need to be installed. If there is a need to run an OS related command, specifically tell me that this should be labeled as "Human Intervention" and explain what the human needs to do.
Avoid using "Human Intervention" if possible. You should NOT use "Human Intervention" for anything else than steps that you can't execute. Also, you must not use "Human Intervention" to ask user to test that the application works, because this will be done separately after all the steps are finished - no need to ask the user now.

Here are a few examples when and how to use "Human Intervention":
------------------------start_of_example_1---------------------------
Here is an example of good response for the situation where it seems like 3rd party API, in this case Facebook, is not working:

* "Human Intervention"
"1. Check latest Facebook API documentation for updates on endpoints, parameters, or authentication.
2. Verify Facebook API key/authentication and request format to ensure they are current and correctly implemented.
3. Use REST client tools like Postman or cURL to directly test the Facebook API endpoints.
4. Check the Facebook API's status page for any reported downtime or service issues.
5. Try calling the Facebook API from a different environment to isolate the issue."
------------------------end_of_example_1---------------------------

------------------------start_of_example_2---------------------------
Here is an example of good response for the situation where the user needs to enable some settings in their Gmail account:

* "Human Intervention"
"To enable sending emails from your Node.js app via your Gmail, account, you need to do the following:
1. Log in to your Gmail account.
2. Go to 'Manage your Google Account' > Security.
3. Scroll down to 'Less secure app access' and turn it on.
4. Under 'Signing in to Google', select 'App Passwords'. (You may need to sign in again)
5. At the bottom, click 'Select app' and choose the app you’re using.
6. Click 'Generate'.
Then, use your gmail address and the password generated in the step #6 and put it into the .env file."
------------------------end_of_example_2---------------------------

------------------------start_of_example_3---------------------------
Here is an example when there are issues with writing to the MongoDB connection:

* "Human Intervention"
"1. Verify the MongoDB credentials provided have write permissions, not just read-only access.
2. Confirm correct database and collection names are used when connecting to database.
3. Update credentials if necessary to include insert document permissions."
------------------------end_of_example_3---------------------------
**IMPORTANT**
When you think about in which file should the new code go to, always try to make files as small as possible and put code in more smaller files rather than in one big file.
Make sure that the user doesn't have to test anything with commands but that all features are reflected in the frontend and all information that user sees in the browser should on a stylized page and not as a plain text or JSON.

Never use the port 5000 to run the app, it's reserved.

--IMPLEMENTATION INSTRUCTIONS--
We've broken the development of this app 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.```

You are currently working on task #1 with the following description:
```
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.
```


Now, tell me all the code that needs to be written to implement ONLY this task and have it fully working and all commands that need to be run to implement this task.