Skip to content

FRONTEND_SETUP.md

Latest commit

 

History

History
198 lines (146 loc) · 4.96 KB

FRONTEND_SETUP.md

File metadata and controls

198 lines (146 loc) · 4.96 KB
Raw

React Frontend - Setup Complete ✅

Your React frontend application has been successfully created in a separate workspace structure alongside your backend API.

New Workspace Structure

DataExtractor-workspace/
├── backend/              # Your existing FastAPI API
│   ├── backend/
│   │   ├── main.py       # ✅ Updated with CORS support
│   │   ├── extractor.py
│   │   └── model.py
│   ├── requirements.txt
│   └── ...
│
└── frontend/             # 🆕 New React TypeScript app
    ├── src/
    │   ├── components/
    │   │   ├── FileUpload.tsx    # PDF upload component
    │   │   └── DataTable.tsx     # Data display component
    │   ├── styles/
    │   │   ├── FileUpload.css
    │   │   └── DataTable.css
    │   ├── App.tsx
    │   ├── App.css
    │   ├── index.css
    │   └── main.tsx
    ├── package.json
    ├── index.html
    ├── vite.config.ts
    ├── tsconfig.json
    └── README.md

What Was Created

Frontend Application Features:

  • ✅ File Upload: Simple, user-friendly PDF file input
  • ✅ Data Display: Beautiful table showing extracted invoice data
  • ✅ Line Items: Table view for invoice line items
  • ✅ Error Handling: User-friendly error messages
  • ✅ Loading States: Visual feedback during processing
  • ✅ Responsive Design: Works on desktop and tablets

Backend Updates:

  • ✅ CORS Enabled: Frontend can now call the API
  • ✅ Error Handling: Comprehensive error management
  • ✅ Response Validation: Proper HTTP status codes

Quick Start

1. Backend Setup (if not already running)

cd DataExtractor-workspace/backend
source myenv/bin/activate  # or: myenv\Scripts\activate on Windows
python -m uvicorn backend.main:app --reload --port 8000

Backend will run at: http://localhost:8000

2. Frontend Setup

cd DataExtractor-workspace/frontend
npm install  # Already done, but in case of issues
npm run dev

Frontend will run at: http://localhost:5173

How It Works

  1. Upload PDF: Click the file upload button and select a PDF invoice
  2. Processing: The frontend sends the PDF to your backend API
  3. Extraction: Backend extracts invoice data using OpenAI's LLM
  4. Display: Results are shown in an organized table format

Accessing the Application

Open your browser and go to: http://localhost:5173

Features Implemented

FileUpload Component

  • Accepts PDF files only
  • Shows loading state during processing
  • Validates file type
  • Disabled state during upload

DataTable Component

  • Displays main invoice fields:
    • Vendor Name
    • Invoice Number
    • Invoice Date
    • Vendor Address
    • Invoice Total (highlighted)
  • Shows line items in a separate table with:
    • Description
    • Quantity
    • Unit Price
    • Line Total

Styling

  • Clean, modern interface
  • Professional color scheme
  • Hover effects on table rows
  • Responsive grid layout
  • Smooth animations

API Integration

The frontend calls your backend at:

  • Endpoint: http://localhost:8000/extract
  • Method: POST
  • Content-Type: multipart/form-data
  • Field Name: file

Expected response format matches your InvoiceData model.

Development Notes

  • Vite: Ultra-fast build tool (instant HMR)
  • TypeScript: Full type safety
  • React 18: Latest stable version
  • No external UI libraries: Pure CSS for simplicity

Next Steps (Optional)

  1. Customize Styling: Edit files in src/styles/ to match your brand
  2. Add Features: Error retry button, data export, etc.
  3. Production Build: Run npm run build to create optimized build
  4. Deploy: Host the built files on any static hosting service

Troubleshooting

API Connection Issues

  • Ensure backend is running on port 8000
  • Check CORS is enabled (it is in the updated main.py)
  • Check browser console for errors (F12)

Frontend Won't Start

npm install  # Reinstall dependencies
npm run dev

Port Already in Use

  • Backend: uvicorn backend.main:app --port 8001
  • Frontend: npm run dev -- --port 5174

File Structure Details

  • components/: Reusable React components
  • styles/: Component-specific CSS
  • App.tsx: Main application logic
  • main.tsx: React entry point
  • index.html: HTML template
  • vite.config.ts: Build configuration
  • package.json: Dependencies and scripts

Working with the Code

Adding New Components

# Create component file
src/components/NewComponent.tsx

# Create corresponding style file
src/styles/NewComponent.css

# Import in App.tsx
import NewComponent from './components/NewComponent'

Modifying API Endpoint

Edit App.tsx line where it calls /extract:

const response = await fetch("http://localhost:8000/extract", {
  method: "POST",
  body: formData,
});

Enjoy your new Invoice Data Extractor application! 🚀