Django Playground

👋 Introduction

Full-stack Django project with React frontend, containerized with Docker for seamless development.

Tech Stack

• 🐍 Backend: Django + Django REST Framework + PostgreSQL
• ⚛️ Frontend: React + Vite + Tailwind CSS
• 🐳 Development: Docker + Docker Compose

Development Features

• ✅ Django: Python code changes restart the server automatically
• ✅ React: Frontend changes update instantly in the browser
• ✅ Database: PostgreSQL with persistent data across restarts

🚀 Quick Start (2 minutes)

Prerequisites

Docker & Docker Compose installed

Get Started

1. Create environment file ".env" from ".env.example"

2. Start everything with one command

docker-compose up --build -d

3. Access your applications

• 🐍 Django: http://localhost:8000
• ⚛️ React Frontend: http://localhost:5173

That's it! Both applications are running with live reloading. 🎉

💻 Development Commands

Apply Django database migrations

docker-compose exec web python manage.py migrate

View logs

docker-compose logs web -f        # Django logs
docker-compose logs frontend -f   # React logs

Fresh start (removes database data)

docker-compose down -v && docker-compose up --build

🛠️ Admin Panel

Create a superuser for Django admin

docker-compose exec web python manage.py createsuperuser

Access admin at: http://localhost:8000/admin

🗄️ Database Management with pgAdmin

Analyze and manage your PostgreSQL database using pgAdmin web interface.

Access pgAdmin

1. Open pgAdmin: http://localhost:5050
2. Login credentials:
   • Email: [email protected]
   • Password: admin

Connect to PostgreSQL Database

1. Click "Add New Server" or "Create > Server"
2. General tab:
   • Name: Django Playground (or any name you prefer)
3. Connection tab:
   • Host name/address: db
   • Port: 5432
   • Maintenance database: django_playground
   • Username: django_user
   • Password: django_password
4. Click "Save"

📝 Choosing Your Development Approach

This project supports both Django development approaches:

🐍 Django Templates Approach

• What: Traditional server-side rendered HTML pages
• Access: http://localhost:8000
• Use case: Classic Django web applications with server-side rendering

⚛️ API + React Frontend Approach

• What: Django REST Framework APIs + React SPA
• Access:
  • API: http://localhost:8000/api/
  • Frontend: http://localhost:5173
• Use case: Modern decoupled architecture with React consuming DRF APIs

🧪 Testing

Run Django REST framework tests

docker-compose exec web python manage.py test -v 2

☕️ Did you like the project?

You can collaborate with me giving a star ⭐️ to the project or

Thanks! 😃