cb491e8b87
- Backend: Django 4.2 + DRF + JWT + GraphQL - Frontend: React 18 + MobX + styled-components - Deployment: Docker + Docker Compose + Nginx - Database: PostgreSQL support - Documentation: README, INIT, PROJECT_DOCS, TESTING
187 lines
3.4 KiB
Markdown
187 lines
3.4 KiB
Markdown
# 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 |