# React + Django Full-Stack Project

## Tech Stack

### Backend
- Django 4.2
- Django REST Framework
- JWT Authentication (djangorestframework-simplejwt)
- GraphQL (graphene-django)
- PostgreSQL

### Frontend
- React 18 (Create React App)
- MobX (state management)
- styled-components (CSS-in-JS)
- React Router

### Deployment
- Docker & Docker Compose
- Nginx (reverse proxy)

## Project Structure

```
.
├── backend/              # Django project
│   ├── config/          # Settings and configuration
│   ├── apps/            # Django apps
│   ├── static/          # Static files
│   └── media/           # Media files
├── frontend/            # React project
│   ├── src/
│   │   ├── components/
│   │   ├── stores/      # MobX stores
│   │   ├── services/    # API calls
│   │   └── styles/
│   └── public/
├── docker-compose.yml
└── .env.example
```

## Setup Instructions

### 1. Environment Variables

Copy `.env.example` to `.env` and configure:

```bash
cp .env.example .env
```

Update the following variables:
- `DJANGO_SECRET_KEY` - Generate a secure secret key
- Database credentials (DB_NAME, DB_USER, DB_PASSWORD)
- `ALLOWED_HOSTS` - Add your domain(s)

### 2. PostgreSQL Configuration

If using external PostgreSQL (already deployed):

Update `.env` with your database credentials:
```env
DB_HOST=your-db-host
DB_PORT=5432
DB_NAME=your_database_name
DB_USER=your_database_user
DB_PASSWORD=your_database_password
```

If using Docker PostgreSQL:

The default values in `docker-compose.yml` will work.

### 3. Backend Setup

```bash
cd backend

# Create virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Run migrations
python manage.py migrate

# Create superuser
python manage.py createsuperuser

# Run development server
python manage.py runserver
```

### 4. Frontend Setup

```bash
cd frontend

# Install dependencies
npm install

# Start development server
npm start
```

### 5. Docker Deployment

```bash
# Build and start all services
docker-compose up -d

# View logs
docker-compose logs -f

# Stop services
docker-compose down
```

## API Endpoints

### REST API
- `/api/users/` - User management
- `/api/users/me/` - Current user
- `/api/auth/token/` - Login (POST)
- `/api/auth/token/refresh/` - Refresh token (POST)

### GraphQL
- `/graphql/` - GraphQL endpoint
- `/graphql/?graphiql` - GraphQL playground

## Development

### Running Backend
```bash
cd backend
python manage.py runserver
```

### Running Frontend
```bash
cd frontend
npm start
```

### Running Tests

Backend:
```bash
cd backend
python manage.py test
```

Frontend:
```bash
cd frontend
npm test
```

## Production Deployment

### Using Docker Compose
1. Update `.env` with production values
2. Build images: `docker-compose build`
3. Start services: `docker-compose up -d`

### Nginx Configuration

The frontend Dockerfile includes nginx configuration that:
- Serves React app
- Proxies `/api` requests to Django backend
- Proxies `/graphql` requests to Django backend
- Handles static and media files

## Security Notes

- **Never commit `.env` files**
- Change `DJANGO_SECRET_KEY` in production
- Use strong passwords for database
- Enable HTTPS in production
- Configure `ALLOWED_HOSTS` properly
- Set `DEBUG=False` in production

## License

MIT