# Roastie.me Project Development Guide (Gemini API Version)

## Project Overview

Roastie.me is a React-based web application that provides humorous financial analysis powered by Google's Gemini API. Users upload their financial data in CSV format, and the app responds with a sassy but insightful breakdown of their spending habits.

## Step-by-Step Development Guide

### 1. Project Setup

1. Create a new React project:
   ```
   npx create-react-app roastie-me
   cd roastie-me
   ```

2. Install necessary dependencies:
   ```
   npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion react-dropzone recharts @google/generative-ai dotenv
   ```

3. Set up environment variables:
   Create a `.env` file in the root directory and add your Gemini API key:
   ```
   REACT_APP_GEMINI_API_KEY=<YOUR_API_KEY>
   ```

### 2. File Structure

Create the following file structure:

```
src/
|-- components/
|   |-- FileUpload.js
|   |-- FinancialAnalysis.js
|   |-- Header.js
|-- utils/
|   |-- csvParser.js
|   |-- geminiService.js
|-- App.js
|-- index.js
.env
```

### 3. Component Development

#### a. src/components/Header.js

Create a header component with the Roastie.me logo and title.

#### b. src/components/FileUpload.js

Develop a file upload component using react-dropzone:
- Allow CSV file uploads
- Display upload status and any errors
- Pass the uploaded file data to the parent component

#### c. src/components/FinancialAnalysis.js

Create the main analysis display component:
- Accept financial data as props
- Display the Gemini-generated financial analysis
- Use Recharts to create visualizations of spending categories

### 4. Utility Functions

#### a. src/utils/csvParser.js

Implement a CSV parsing function:
- Accept raw CSV data
- Parse and structure the data for analysis
- Return an object with categorized financial data

#### b. src/utils/geminiService.js

Develop the Gemini API service:

```javascript
import { GoogleGenerativeAI } from "@google/generative-ai";

const genAI = new GoogleGenerativeAI(process.env.REACT_APP_GEMINI_API_KEY);
const model = genAI.getGenerativeModel({ model: "gemini-1.5-pro" });

export async function generateFinancialAnalysis(financialData) {
  const prompt = `
    Analyze this financial data and provide a sassy, humorous breakdown:
    ${JSON.stringify(financialData)}
    
    Include the following in your analysis:
    1. Overall income vs expenses
    2. Top spending categories with total and monthly average
    3. Specific merchant spending (e.g., Amazon, Tesco)
    4. Savings rate
    5. At least 3 pieces of sassy financial advice
    
    Use a mix of humor and actual insights. Be specific about numbers.
  `;

  try {
    const result = await model.generateContent(prompt);
    return result.response.text();
  } catch (error) {
    console.error("Error generating analysis:", error);
    return "Sorry, I'm too shocked by your spending to come up with a roast right now!";
  }
}
```

### 5. App Component

Update src/App.js to:
- Import and use the Header, FileUpload, and FinancialAnalysis components
- Manage state for the uploaded file and analysis results
- Use the csvParser and geminiService to process data and generate analysis

```javascript
import React, { useState } from 'react';
import { ChakraProvider } from '@chakra-ui/react';
import Header from './components/Header';
import FileUpload from './components/FileUpload';
import FinancialAnalysis from './components/FinancialAnalysis';
import { parseCSV } from './utils/csvParser';
import { generateFinancialAnalysis } from './utils/geminiService';

function App() {
  const [analysis, setAnalysis] = useState(null);

  const handleFileUpload = async (fileContent) => {
    const parsedData = parseCSV(fileContent);
    const generatedAnalysis = await generateFinancialAnalysis(parsedData);
    setAnalysis(generatedAnalysis);
  };

  return (
    <ChakraProvider>
      <Header />
      <FileUpload onFileUpload={handleFileUpload} />
      {analysis && <FinancialAnalysis analysis={analysis} />}
    </ChakraProvider>
  );
}

export default App;
```

### 6. Styling

- Use Chakra UI for consistent styling across components
- Create a theme.js file for custom color schemes and styles

### 7. Testing

- Write unit tests for utility functions (csvParser.js)
- Create component tests for FileUpload and FinancialAnalysis
- Implement integration tests for the full application flow
- Mock the Gemini API calls in tests to avoid unnecessary API usage

### 8. Optimization and Performance

- Implement lazy loading for the FinancialAnalysis component
- Optimize CSV parsing for large files
- Add error boundaries to handle potential crashes
- Implement caching for Gemini API responses to reduce API calls

### 9. Deployment

- Set up a production build process
- Choose a hosting platform (e.g., Vercel, Netlify)
- Ensure environment variables are properly set in the deployment environment

## Key Features to Implement

1. CSV file upload and parsing
2. Financial data categorization
3. Integration with Gemini API for analysis generation
4. Display of AI-generated, sassy financial analysis
5. Data visualization using charts and graphs
6. Responsive design for mobile and desktop use

## AI Coding Assistance Tips

When using AI to assist with coding this project:

1. Break down complex components into smaller, manageable pieces.
2. Ask for specific implementations, e.g., "Create a FileUpload component using react-dropzone in React".
3. Request explanations for any generated code to ensure understanding.
4. Use AI to generate test cases for your functions and components.
5. Ask for optimization suggestions after implementing basic functionality.
6. Seek advice on best practices for API key management and security.

Remember to review and test all AI-generated code thoroughly before integrating it into your project.

## Gemini API Usage Notes

- The Gemini API is used to generate the financial analysis based on the parsed CSV data.
- Ensure that API calls are made securely and that the API key is never exposed on the client side.
- Consider implementing rate limiting and error handling for API requests.
- Be mindful of the API's usage limits and pricing as your application scales.