# 🚀 Quick Start Guide

Get your Grocery Tracker up and running in minutes!

## Prerequisites

- **Python 3.8+** (for backend)
- **Node.js 16+** (for frontend)

## Option 1: Install Node.js

Choose one of these methods:

### **Method A: Homebrew (Recommended)**
```bash
brew install node
```

### **Method B: Official Installer**
1. Visit [nodejs.org](https://nodejs.org/)
2. Download LTS version for macOS
3. Run the installer

### **Method C: Node Version Manager**
```bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.zshrc
nvm install --lts
```

## Setup Steps

### **1. Start the Backend** 🐍
```bash
cd backend
python3 run_dev.py
```

This will:
- Create a virtual environment
- Install Python dependencies
- Create SQLite database
- Start FastAPI server at http://localhost:8000

### **2. Start the Frontend** ⚛️
Open a **new terminal** and run:
```bash
cd frontend
./setup.sh     # or: bash setup.sh
npm start
```

This will:
- Install React dependencies
- Start development server at http://localhost:3000

## 🎉 You're Ready!

- **Frontend**: http://localhost:3000
- **Backend API**: http://localhost:8000
- **API Docs**: http://localhost:8000/docs

## First Steps

1. **Add a Shop**: Go to "Shops" and add your first grocery store
2. **Add Groceries**: Go to "Groceries" and add some items
3. **Record a Purchase**: Use "Add Purchase" to record your shopping

## Troubleshooting

### Backend Issues
- **Dependencies fail**: Make sure Python 3.8+ is installed
- **Database errors**: The app uses SQLite by default (no PostgreSQL needed)

### Frontend Issues
- **Node not found**: Install Node.js using one of the methods above
- **npm install fails**: Try deleting `node_modules` and running `npm install` again

### Connection Issues
- Make sure both servers are running
- Backend should be on port 8000, frontend on port 3000
- Check firewall settings if needed

## What's Included

✅ **Complete Backend**: FastAPI with SQLAlchemy and SQLite
✅ **Modern Frontend**: React with TypeScript and Tailwind CSS
✅ **Database Models**: Groceries, Shops, Shopping Events
✅ **API Documentation**: Automatic Swagger docs
✅ **Beautiful UI**: Responsive design with modern components

Happy grocery tracking! 🛒