A full-stack application for managing workshop tasks, customers, workers, and invoices.
- 🎯 Kanban Board - Drag-and-drop task management (Todo → Assigned → Processing → Done)
- 👥 Customer Management - Track customer details with searchable dropdown
- 👷 Worker Management - Manage workers with wages and payment tracking
- 📋 Line Items - Reusable line item templates for common services
- 📸 Photo Upload - Google Drive integration with AI-powered vehicle info extraction
- 🤖 AI Integration - Gemini AI for analyzing vehicle photos
- 🧾 Invoice Generation - Create professional invoices with custom numbering
- 📊 Task History - Complete audit trail of all task changes
- 📱 Responsive Design - Mobile and tablet compatible
- React + TypeScript
- Vite
- TanStack Query (React Query)
- React Router
- @hello-pangea/dnd (drag-and-drop)
- Express.js + TypeScript
- Prisma ORM
- SQLite (development) / PostgreSQL (production)
- Google Drive API (photo storage)
- Google Gemini AI (photo analysis)
- Google OAuth (authentication)
- Node.js (v18+)
- npm or yarn
- Clone the repository:
git clone <your-repo-url>
cd fullstack-app- Install frontend dependencies:
cd frontend
npm install- Install backend dependencies:
cd ../backend
npm install- Set up environment variables:
Frontend (frontend/.env.local):
VITE_USE_MOCK=false
VITE_API_BASE_URL=http://localhost:4000/api
VITE_GOOGLE_CLIENT_ID=your_google_client_id
VITE_GOOGLE_API_KEY=your_google_api_key
VITE_GEMINI_API_KEY=your_gemini_api_key
VITE_ALLOWED_EMAIL=your_email@example.com
Backend (backend/.env):
DATABASE_URL="file:./dev.db"
- Initialize the database:
cd backend
npx prisma migrate dev- (Optional) View the database:
npx prisma studio- Start the backend server:
cd backend
npm run devBackend will run on http://localhost:4000
- Start the frontend dev server:
cd frontend
npm run devFrontend will run on http://localhost:5173
- Open
http://localhost:5173in your browser
- Worker - Worker details and hourly rates
- Customer - Customer information
- LineItemTemplate - Reusable service descriptions
- Item - Main tasks/jobs
- LineItem - Individual charges per task
- TaskWorker - Worker assignments with wages
- StatusHistory - Task status changes
- TaskEvent - Invoice and payment events
- Photo - Task photos stored in Google Drive
- Invoice - Generated invoices
- InvoiceSequence - Invoice numbering
See GOOGLE_DRIVE_SETUP.md and GEMINI_SETUP.md for detailed instructions on setting up Google integrations.
MIT