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:

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:

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

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

cd frontend

# Install dependencies
npm install

# Start development server
npm start

5. Docker Deployment

# 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

cd backend
python manage.py runserver

Running Frontend

cd frontend
npm start

Running Tests

Backend:

cd backend
python manage.py test

Frontend:

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