AI-Quickstart/instructions/README2.md

# Building Out The Frontend
## Clearing the Vite Boilerplate
1. Delete the `src` folder and the `public` folder.
2. Create a new `src` folder and a new `public` folder.
3. Create a new `main.jsx` file in the `src` folder and add the following boilerplate code.
```jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
```
4. Create a new `App.jsx` file in the `src` folder and add the following boilerplate code.
```jsx
function App() {
  
  return (
    <div>Hello</div>
  )
}

export default App
```

## Integrating TailwindCSS
1. Install TailwindCSS and PostCSS in your `frontend` directory. 
```bash
npm install -D tailwindcss postcss autoprefixer
```
2. Create a new `postcss.config.cjs` file in the root of the project and add the following code.
```js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}
```
3. Create a new `tailwind.config.cjs` file in the root of the project and add the following code.
```js
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
```
4. Create a new `index.css` file in the `src` folder and add the following code.
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
5. Update the `App.jsx` file to be as follows.
```jsx
function App() {
  
  return (
    <div className="bg-gray-100 h-screen flex justify-center items-center">
      <div className="bg-white rounded-lg shadow-lg p-8">
        <h1 className="text-2xl font-bold mb-4">Welcome to the Budget App</h1>
        <p className="text-gray-500 mb-4">This is a simple app that will help you categorize your expenses.</p>
        <p className="text-gray-500 mb-4">Upload a CSV file and we will do the rest.</p>
        <div className="flex justify-center">
          <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
            Upload CSV
          </button>
        </div>
      </div>
    </div>
  )
}
```
6. You should now see a basic app with a button that says "Upload CSV". We can now start building out the functionality of the app and any styling can continu to be done with TailwindCSS.

## Adding File Upload Functionality
1. Import useState into `App.jsx` and add a state variable called `file` that will hold the file that is uploaded.
```jsx
import { useState } from 'react'
```
2. Add the following code to the `App` function.
```jsx
const [file, setFile] = useState(null)
```
3. Add a file selector input just above the `UploadCSV` button.
```jsx
<input type="file" onChange={(e) => setFile(e.target.files[0])} />
```
4. Add an onClick attribute to the `UploadCSV` button and add a callback function to handle the upload.
5. Next, define the callback function that will handle the upload in between your useState and return statements. For now, we will just console log the file name.
```jsx
console.log(file.name)
```
4. You should now be able to select a file and see the file name in the console. We can now start building out the backend to handle the file upload to the server.
5. Next we will make a form to handle the request to the backend server. Replace the console.log statement with the following code.
```jsx
const formData = new FormData()
formData.append('file', file)
```
6. Next, we will make a POST request to the backend server. Make the following fetch request.
```jsx
fetch('/api/upload', {
  method: 'POST',
  body: formData,
})
```
7. fetch is a network request that returns a promise. We can use the promise to handle the response from the server. Add the following code to handle the response.
```jsx
.then((res) => res.json())
.then((data) => console.log(data))
```
8. You should now be able to upload a file and see the response in the console. We can now start building out the backend to handle the file upload to the server.