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.

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.

function App() {
  
  return (
    <div>Hello</div>
  )
}

export default App

Integrating TailwindCSS

1. Install TailwindCSS and PostCSS in your frontend directory.

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.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

3. Create a new tailwind.config.cjs file in the root of the project and add the following code.

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.

@tailwind base;
@tailwind components;
@tailwind utilities;

5. Update the App.jsx file to be as follows.

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.

import { useState } from 'react'

2. Add the following code to the App function.

const [file, setFile] = useState(null)

3. Add a file selector input just above the UploadCSV button.

<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.

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.

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.

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.

.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.