The project includes a complete Docker Compose setup for easy deployment and development with version 3.0 configuration | WebSocket | Live reloading. With Django backend and React frontend styled with Tailwind CSS.

• Django 5.2+ - 🌐 Web framework
• Django REST Framework - 🔧 API development
• Django Channels - 📡 WebSocket support
• Daphne - 🚀 ASGI server for WebSockets
• Redis - 💾 Channel layer backend
• Simple JWT - 🔐 Authentication
• Pillow - 🖼️ Image processing

• React 18+ - 🎨 UI library
• Vite 7.0+ - ⚡ Build tool and dev server
• Tailwind CSS - 💅 Styling framework
• Framer Motion - 🎬 Animations
• Axios - 📬 HTTP client
• React Router - 🗺️ Navigation
• JWT Decode - 🔓 Token handling

• PostgreSQL (production) or SQLite (development) - 📊 Database
• Redis - 📡 WebSocket channel layer & caching
• WhiteNoise - 📁 Static file serving

• Docker - 🐳 Containerization platform
• Docker Compose 3.0 - 🔧 Multi-container orchestration
• Nginx - 🌐 Reverse proxy and load balancer
• Alpine Linux - 🏔️ Lightweight container base images

• 🐍 Python 3.13+
• 🟢 Node.js 16+ and npm
• 🔴 Redis server (for WebSocket channel layer)
• 📝 Git

• 🐳 Docker Engine 20.0+
• 🔧 Docker Compose 3.0+
• 📝 Git

📂 LR 3.0/
├── 🔧 pyproject.toml          # Python dependencies & project config
├── 🔒 uv.lock                 # Dependency lock file
├── 📖 README.md               # Project documentation
├── 📂 backend/                # Django application
│   ├── 🗄️ db.sqlite3          # Development database
│   ├── ⚙️ manage.py           # Django CLI
│   └── 📂 api/                # Main API app
└── 📂 frontend/               # React application
    ├── 📦 package.json        # Node.js dependencies
    ├── ⚡ vite.config.js       # Vite configuration
    └── 🎨 tailwind.config.js  # Tailwind setup

git clone https://github.com/kevinThulnith/devops-project.git

# Go to project directory
cd devops-project

# Go to main branch
git checkout main

• Create .env file in backend/ directory and add this configuration:

DEBUG=True
REDIS_PORT=6379
REDIS_HOST=127.0.0.1
DATABASE_URL=sqlite:///db.sqlite3
SECRET_KEY="your_secret_key_here_generate_a_secure_one"

• Redis Installation Required: Install Redis on your local device for WebSocket functionality

# If uv is not installed locally
pip install uv

# Install Python dependencies
uv sync

# Activate virtual environment (Windows PowerShell)
.\.venv\Scripts\Activate.ps1

# Navigate to backend directory
cd backend

# Run database migrations
py .\manage.py migrate

# Start backend server with Daphne (ASGI server)
daphne -b 0.0.0.0 -p 8000 backend.asgi:application

# Alternative: If virtual environment not activated
uv run daphne -b 0.0.0.0 -p 8000 backend.asgi:application

# Install Node.js dependencies
cd frontend
npm i

# Start development server with hot reload
npm run dev

# Create production build files
npm run build

# Start with network access (accessible from other devices)
npm run host

A test HTML file (ws_test.html) is included for WebSocket testing:

1. 🚀 Start the Django server
2. 🌐 Open ws_test.html in a browser
3. ➕ Create/update/delete products in Django Admin
4. 👀 See real-time updates in the test page

For a complete containerized deployment with all services, check out the docker-compose branch which includes:

• 🐍 Backend Container: Django application with PostgreSQL support
• ⚛️ Frontend Container: React application served with Nginx
• 🐘 PostgreSQL Database: Fully configured database container
• 🌐 Nginx Proxy: Load balancer and reverse proxy
• 🔴 Redis Server: Cache and WebSocket channel layer

1. 📋 Prerequisites:

   • Docker Engine 20.0+
   • Docker Compose 3.0+

2. ⚙️ Environment Configuration:

   Create a .env.prod file in the project root:

   # Database Configuration
   POSTGRES_DB=devops_inventory
   POSTGRES_USER=devops_user
   POSTGRES_PASSWORD=your_secure_password
   DATABASE_URL=postgresql://devops_user:your_secure_password@lr-database:5432/devops_inventory
   
   # Django Configuration
   DEBUG=False
   DJANGO_SECRET_KEY=your-super-secret-key-here
   ALLOWED_HOSTS=localhost,127.0.0.1,lr-backend
   
   # Redis Configuration
   REDIS_HOST=lr-redis
   REDIS_PORT=6379

3. 🏃‍♂️ Start All Services:

   # Change branch
   git checkout docker-compose
   
   # In root dir
   docker-compose up -d

4. 📊 Check Service Status:

   docker-compose ps

• Frontend Application: http://localhost (via Nginx proxy)
• Backend API: http://localhost/api/ (via Nginx proxy)
• Django Admin: http://localhost/admin/ (via Nginx proxy)
• PostgreSQL Database: localhost:5432
• Redis Cache: localhost:6379

• 📦 Product Management: CRUD operations for inventory items with image uploads
• ⚡ Real-time Updates: Live WebSocket connections for instant product changes
• 🔐 User Authentication: JWT-based auth with automatic token refresh
• 📱 Responsive UI: Modern React interface with Tailwind CSS and Framer Motion animations
• 🔍 Advanced Filtering: Search, category filtering, and sorting capabilities

• 🛡️ Custom JWT WebSocket Middleware: Secure WebSocket authentication using JWT tokens
• 📡 Django Signals Integration: Automatic real-time notifications on model changes
• 🚧 Protected Routes: Client-side route protection with automatic redirects
• 🖼️ Image Handling: Product image uploads with media file management
• 🌐 CORS Support: Configured for cross-origin frontend-backend communication

• 🐳 Full Docker Containerization: Complete multi-container setup with Docker Compose 3.0
• 🌐 Nginx Reverse Proxy: Load balancing and SSL termination ready
• 📦 Multi-stage Builds: Optimized Docker images for production deployment
• 🔧 Environment Configuration: Separate configurations for development and production
• 📊 Service Orchestration: Automated service dependency management
• 💾 Persistent Data Volumes: Configured volumes for database and Redis data persistence
• 🔄 Health Checks: Container health monitoring and automatic restarts
• 🌍 Network Isolation: Secure inter-service communication via Docker networks

The /api/products/ endpoint supports advanced filtering:

Available Categories: books, other, sports, clothing, home, electronics

Sortable Fields: name, price, quantity, created_at (use - prefix for descending)

// User Registration
const registerResponse = await fetch("/api/user/register/", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    username: "newuser",
    password: "securepassword",
    email: "user@example.com",
  }),
});

// User Login (Get JWT Token)
const loginResponse = await fetch("/api/token/", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ username: "user", password: "pass" }),
});

const tokens = await loginResponse.json();
// Response: { "access": "...", "refresh": "..." }

// Get Current User Info
const userInfo = await fetch("/api/user/", {
  headers: { Authorization: `Bearer ${tokens.access}` },
});

// Create Product with Image
const productData = {
  name: "Gaming Laptop",
  description: "High-performance gaming laptop with RGB keyboard",
  price: 1299.99,
  quantity: 5,
  category: "electronics",
  is_active: true,
};

const formData = new FormData();
Object.keys(productData).forEach((key) => {
  formData.append(key, productData[key]);
});
// Add image file
formData.append("image", imageFile);

const createResponse = await fetch("/api/products/", {
  method: "POST",
  headers: { Authorization: `Bearer ${tokens.access}` },
  body: formData,
});

// Search Products
const searchResponse = await fetch(
  "/api/products/?search=laptop&category=electronics&ordering=-created_at",
  {
    headers: { Authorization: `Bearer ${tokens.access}` },
  }
);

// Get My Products Only
const myProductsResponse = await fetch("/api/products/my_products/", {
  headers: { Authorization: `Bearer ${tokens.access}` },
});

// Refresh Token
const refreshResponse = await fetch("/api/token/refresh/", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ refresh: tokens.refresh }),
});

// Logout (Blacklist Token)
const logoutResponse = await fetch("/api/token/blacklist/", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${tokens.access}`,
  },
  body: JSON.stringify({ refresh: tokens.refresh }),
});

# Check backend logs
docker-compose logs lr-backend

# Check database connection
python manage.py dbshell

# Test WebSocket connection
# Open browser console and run:
# const ws = new WebSocket('ws://localhost:8000/ws/products/');

# Check Redis connection
redis-cli ping

# Verify environment variables
docker-compose config

• Database Indexing: Add indexes to frequently queried fields
• Query Optimization: Use select_related() and prefetch_related()
• Caching: Implement Redis caching for frequently accessed data
• Image Optimization: Compress uploaded images automatically

• Code Splitting: Implement React lazy loading for routes
• Image Optimization: Use WebP format and responsive images
• Bundle Analysis: Use npm run build -- --analyze to check bundle size
• Service Worker: Implement PWA features for offline support

• JWT Authentication with automatic token refresh
• CORS Configuration for cross-origin requests
• Input Validation on all API endpoints
• File Upload Security with type and size restrictions
• Environment Variables for sensitive configuration

# Generate secure SECRET_KEY
python -c "from django.core.management.utils import get_random_secret_key; print(get_random_secret_key())"

# Set strong database passwords
openssl rand -base64 32

# Enable HTTPS in production
# Update ALLOWED_HOSTS and SECURE_* settings

• Django Admin: /admin/ - Administrative interface
• API Root: /api/ - API endpoint listing
• DRF Browsable API: /api-auth/ - Interactive API browser

# Test database connection
cd backend
python manage.py dbshell

# Test Redis connection (if Redis is running)
redis-cli ping

# Check Django application
curl http://localhost:8000/api/

# Test WebSocket connection
# Open browser console and run:
# const ws = new WebSocket('ws://localhost:8000/ws/products/');

📂 Logs/
├── 🐍 Django: /app/logs/django.log
├── 🌐 Nginx: /var/log/nginx/
├── 🐳 Docker: docker-compose logs [service_name]
└── 🔴 Redis: /var/log/redis/redis-server.log

We welcome contributions! Please follow these steps:

1. 🍴 Fork the repository

2. 🌿 Create a feature branch

   git checkout -b feature/amazing-feature

3. 💻 Make your changes

4. ✅ Run tests

   # Backend tests
   cd backend
   python manage.py test
   
   # Frontend tests (if available)
   cd frontend
   npm test

5. 📝 Commit your changes

   git commit -m "Add: Amazing new feature"

6. 🚀 Push to your branch

   git push origin feature/amazing-feature

7. 📋 Open a Pull Request

• Python: Follow PEP 8 standards
• JavaScript: Use ESLint configuration provided
• Commit Messages: Use conventional commit format
  • feat: for new features
  • fix: for bug fixes
  • docs: for documentation changes
  • style: for formatting changes
  • refactor: for code refactoring

• Write unit tests for new features
• Ensure all existing tests pass
• Test WebSocket functionality manually
• Verify Docker deployment works

• 📧 Email: [your-email@domain.com]
• 🐛 Issues: GitHub Issues
• 💡 Discussions: GitHub Discussions

• Django Documentation: https://docs.djangoproject.com/
• React Documentation: https://react.dev/
• Docker Documentation: https://docs.docker.com/
• Tailwind CSS: https://tailwindcss.com/docs

This project is licensed under the MIT License - see the LICENSE file for details.

• ✅ Commercial use allowed
• ✅ Modification allowed
• ✅ Distribution allowed
• ✅ Private use allowed
• ❌ No warranty provided
• ❌ No liability assumed

• Django Team for the amazing web framework
• React Team for the powerful UI library
• Tailwind CSS for the utility-first CSS framework
• Docker for containerization technology
• Redis for real-time functionality
• All Contributors who helped improve this project

🎉 Happy Coding! If you found this project helpful, please give it a ⭐ star on GitHub!