Django React Quickstart

A production-ready quickstart project combining Django (Python backend) with React TypeScript (frontend).

Features

• Django Backend: RESTful API with best practices
• React TypeScript Frontend: Modern SPA with type safety
• User Management: Custom user model with Django's authentication system
• Example App: Demonstrates Django app structure and API integration
• Production Ready: Configured for Heroku deployment with automatic builds
• Static Files: Optimized static file handling with WhiteNoise

Project Structure

django-react-quickstart/
├── quickstart_project/     # Django project settings
├── example/                # Example Django app
├── frontend/              # React TypeScript app
├── templates/             # Django templates
├── requirements.txt       # Python dependencies
├── package.json          # Node.js build configuration
├── Procfile              # Heroku process configuration
└── app.json              # Heroku app configuration

Local Development

Prerequisites

• Python 3.10+
• Node.js 18+
• Git

Setup

1. Clone the repository:

git clone <your-repo-url>
cd django-react-quickstart

2. Create and activate virtual environment:

python3 -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

3. Install Python dependencies:

pip install -r requirements.txt

4. Install Node.js dependencies and build frontend:

npm install
npm run build

5. Run migrations:

python manage.py makemigrations
python manage.py migrate

6. Create superuser:

python manage.py createsuperuser

7. Start development server:

python manage.py runserver

For frontend development with hot reload:

cd frontend
npm run dev

Deployment to Heroku

Automatic Deployment

1. Create a new Heroku app:

heroku create your-app-name

2. Set environment variables:

heroku config:set SECRET_KEY="your-secret-key"
heroku config:set DEBUG=False
heroku config:set ALLOWED_HOSTS="your-app-name.herokuapp.com"

3. Deploy:

git push heroku main

The deployment process will automatically:

• Install Node.js dependencies
• Build the React TypeScript frontend
• Install Python dependencies
• Run database migrations
• Collect static files

Deploy Button

You can also deploy directly to Heroku using the deploy button:

API Endpoints

• GET /api/examples/ - List all example items
• GET /admin/ - Django admin interface
• GET / - React frontend

Environment Variables

• SECRET_KEY - Django secret key (required)
• DEBUG - Django debug mode (default: True in development)
• ALLOWED_HOSTS - Comma-separated list of allowed hosts
• DATABASE_URL - Database connection string (automatically set by Heroku)

Technologies Used

• Backend: Django 5.2, Django REST Framework patterns
• Frontend: React 19, TypeScript, Vite
• Database: PostgreSQL (production) / SQLite (development)
• Deployment: Heroku with automatic buildpacks
• Static Files: WhiteNoise for efficient static file serving

Security Features

• Environment-based configuration
• CSRF protection enabled
• Secure user authentication
• Production-ready security headers
• Secret key management

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run tests
5. Submit a pull request

License

MIT License - see LICENSE file for details.