You are working on an app called "thisisatest" and you need to write code for the entire feature 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 "thisisatest" as well.

Here is a high level description of "thisisatest":
```
{"code":200,"status":true,"model":"gpt-4o","message":"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.\n\nFeatures:\n1. 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).\n2. 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.\n3. Toggle State: Each todo item includes a checkbox. Checking/unchecking this box toggles the todo's state between open and completed.\n4. 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.\n5. Data Persistence: The application will also use an SQL backend to store todos persistently.\n\nFunctional Specification:\n- Upon loading the application, it fetches existing todos from the local storage and displays them in a list, and syncs with the SQL database.\n- 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).\n- 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 and SQL database.\n- 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 and SQL database.\n- The application does not support deleting or editing todo items to keep the interface and interactions simple.\n- Todos persist between sessions using the browser's local storage and SQL backend. The application saves any changes to the todo list (additions or state changes) in local storage and SQL database and retrieves this data when the application is reloaded.\n\nTechnical Specification:\n- Platform/Technologies: The application is a web application developed using React on frontend and Express on the backend, using SQLite as the database.\n- Styling: Use Bootstrap 5 for a simple and functional interface. Load Boostrap from the CDN (don't install it locally):\n    - https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\n    - https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js\n- State Management: Directly in the React component\n    - make sure to initialize the state from the local storage as default (... = useState(JSON.parse(localStorage.getItem('todos')) || []) to avoid race conditions\n- Data Persistence: Using the SQLite database on the backend via a REST API.","original":null}
```


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



Here is the feature that you are implementing right now:
```
half of the features are missing or incomplete
```
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?
```

**`README.md`** (1 lines of code):
```
markdown\n# thisisatest\n\nThis project is a simple ToDo application built using React. Its main purpose is to allow users to efficiently manage a list of tasks (todos). Each task has a description and a state (open or completed, with open being the default). The app provides a clean and user-friendly interface for handling daily tasks.\n\n## Overview\n\nThe application is a frontend-focused web app developed using React, featuring a simple and intuitive interface for task management. It uses Vite as the development server and bundler, which provides fast development and hot reloading capabilities. Styling is handled through Bootstrap 5, which is loaded via CDN for a responsive design.\n\nThe project files are structured as follows:\n- JavaScript and React components are located in the `src` directory.\n- Static assets reside in the `public` directory.\n- Configuration files for ESLint and Vite are present in the root directory to ensure code quality and optimal setup.\n\nCurrently, the project is set up as a frontend-only application but is designed to be compatible with any backend technology.\n\n## Features\n\n- **Display of Todos**: Users can see a list of all todo items, each displaying a description and a checkbox to indicate its state (open or completed).\n- **Add New Todo**: Users can add a new todo by clicking a button, which prompts for a task description.\n- **Toggle State**: Users can toggle a task's state between open and completed by checking or unchecking the associated checkbox.\n- **Local Storage**: The application uses the browser's local storage to persist todos, ensuring data remains available even after a page refresh.\n\n## Getting started\n\n### Requirements\n\nTo run the project, make sure your computer has the following:\n- Node.js: Required for running React development tools and building the project.\n\n### Quickstart\n\n1. Clone the repository to your local machine.\n2. Navigate to the project directory.\n3. Install dependencies using `npm install`.\n4. Start the development server with `npm run dev`.\n5. Open a browser and navigate to `http://localhost:3000` to see the application in action.\n\n### License\n\nThe project is proprietary. Copyright (c) 2024.\n```","original":null}```

**`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>thisisatest</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
```

**`package.json`** (26 lines of code):
```
{
  "name": "thisisatest",
  "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"
  }
}
```

**`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>thisisatest</h1>
    </>
  )
}

export default App
```

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

**`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>,
)
```

**`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()],
})
```

---END_OF_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`

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 feature down to these tasks:
```
1. Conduct a comprehensive requirements gathering session with stakeholders to understand the project's needs and objectives. (completed)2. Design the system architecture, including database schema, API endpoints, and overall software stack.3. Develop the user interface, ensuring responsiveness and accessibility across different devices.4. Implement backend services and business logic, integrating with necessary third-party APIs and services.5. Perform extensive testing, including unit, integration, and user acceptance testing, to ensure system reliability and performance.6. Prepare deployment strategy and continuous integration and delivery pipelines for smooth rollout and updates.7. Develop comprehensive documentation and conduct training sessions for users and stakeholders.8. Set up monitoring and analytics tools to track system performance and user engagement post-launch.```

You are currently working on task #2 with the following description:
```
Design the system architecture, including database schema, API endpoints, and overall software stack.
```

All previous tasks are finished and you don't have to work on them.
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.