A modern full-stack dashboard application built with Django REST Framework and React.
- Real-time Statistics - Order values, card counts, collection metrics, user analytics
- Interactive Charts - Revenue and order tracking with Chart.js
- Order Management - Complete order lifecycle with status tracking
- Responsive Design - Beautiful purple gradient theme optimized for all devices
- JWT Authentication - Secure access and refresh token system
- Role-based Permissions - Admin and user access controls
- Protected Routes - Frontend route guards with authentication checks
- Collections - Organize cards into themed collections
- Cards - Detailed card information with rarity and pricing
- Orders - Complete order processing and tracking
- Users - User account management and profiles
- Glassmorphism Design - Beautiful backdrop blur effects
- Loading States - Skeleton loaders for optimal UX
- Dark Theme - Purple/blue gradient matching design specifications
- Responsive Layout - Mobile-first design approach
- Django 5.2 - Web framework
- Django REST Framework - API development
- PostgreSQL - Primary database
- JWT Authentication - djangorestframework-simplejwt
- Redis - Caching (configurable)
- Swagger/OpenAPI - API documentation
- React 19 - UI library
- TypeScript - Type safety
- Redux Toolkit - State management
- React Router - Navigation
- Chart.js - Data visualization
- Tailwind CSS - Styling
- Vite - Build tool
- Nx Workspace - Monorepo management
- ESLint - Code linting
- Prettier - Code formatting
- Git - Version control
- Node.js 18+ and npm
- Python 3.12+
- PostgreSQL 14+
- Git
git clone <your-repo-url>
cd test-fullstack# Navigate to backend directory
cd apps/backend
# Create virtual environment
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
# Install dependencies
pip install -r requirements.txt
# Configure PostgreSQL database
# Update apps/backend/backend_api/settings.py with your database credentials
# Run migrations (choose one option)
# Option 1: Using Nx (recommended - handles virtual environment automatically)
cd ../.. && npx nx migrate backend
# Option 2: Traditional Django command (if Nx doesn't work)
# cd apps/backend && source venv/bin/activate && python manage.py migrate
# Populate database with sample data (required for initial setup)
# This creates users, collections, cards, and orders for testing the dashboard
# Note: Use traditional Django command as this is not configured in Nx
cd apps/backend && python manage.py seed_data
# Create superuser (optional)
python manage.py createsuperuser
# Start backend server (choose one option)
# Option 1: Using Nx (recommended - handles virtual environment automatically)
cd ../.. && npx nx serve backend
# Option 2: Traditional Django command (if Nx doesn't work)
# cd apps/backend && source venv/bin/activate && python manage.py runserver 127.0.0.1:8001# Navigate to workspace root
cd ../..
# Install dependencies
npm install
# Start frontend development server
npx nx serve frontend- Frontend: http://localhost:4200
- Backend API: http://127.0.0.1:8001
- API Documentation: http://127.0.0.1:8001/api/docs/
Create .env files for environment-specific configuration:
Backend (apps/backend/.env):
# Database Configuration
DB_NAME=sales_analytics_db
DB_USER=postgres
DB_PASSWORD=postgres
DB_HOST=localhost
DB_PORT=5432
# Django Configuration
SECRET_KEY=3fg8wgdux(c#gud$5#tq_^n62dlj2746!h7tk)v0f4(jjw_c%!
DEBUG=True
# Redis Configuration
REDIS_URL=redis://localhost:6379/1
# JWT Configuration
JWT_ACCESS_TOKEN_LIFETIME=15
JWT_REFRESH_TOKEN_LIFETIME=1440
Frontend (.env):
VITE_API_BASE_URL=http://127.0.0.1:8001/api-- PostgreSQL setup
CREATE DATABASE cards_db;
CREATE USER cards_user WITH PASSWORD 'cards_password';
GRANT ALL PRIVILEGES ON DATABASE cards_db TO cards_user;The API is fully documented with Swagger/OpenAPI:
- Swagger UI: http://127.0.0.1:8001/api/docs/
- ReDoc: http://127.0.0.1:8001/api/redoc/
- Schema: http://127.0.0.1:8001/api/schema/
Authentication:
POST /api/auth/login/ # User login
POST /api/auth/refresh/ # Token refresh
Dashboard:
GET /api/dashboard/kpis/ # Dashboard statistics
Resources:
GET /api/users/ # Users list (admin only)
GET /api/collections/ # Collections
GET /api/cards/ # Cards
GET /api/orders/ # Orders
User Management:
GET /api/users/me/ # Current user profile
PUT /api/auth/profile/ # Update profile
# Option 1: Using Nx
npx nx test backend
# Option 2: Traditional Django command
cd apps/backend
python manage.py testnpx nx test frontendtest-fullstack/
├── apps/
│ ├── backend/ # Django application
│ │ ├── api/ # Main API app
│ │ │ ├── models.py # Database models
│ │ │ ├── views.py # API views
│ │ │ ├── serializers.py # DRF serializers
│ │ │ ├── permissions.py # Custom permissions
│ │ │ └── tests/ # Test files
│ │ ├── backend_api/ # Django project settings
│ │ ├── requirements.txt # Python dependencies
│ │ └── manage.py # Django management
│ │
│ └── frontend/ # React application
│ ├── src/
│ │ ├── components/ # React components
│ │ │ └── dashboard/ # Dashboard components
│ │ ├── services/ # API services
│ │ ├── store/ # Redux store
│ │ ├── types/ # TypeScript types
│ │ └── styles.css # Global styles
│ ├── public/ # Static assets
│ └── vite.config.ts # Vite configuration
│
├── package.json # Root dependencies
├── nx.json # Nx workspace config
├── .gitignore # Git ignore rules
└── README.md # This file
- Primary Background:
#120036 - Secondary Background:
#0F0036 - Accent Color:
#F81DFB(Pink) - Text Primary:
#FFFFFF - Text Secondary:
#B794F6(Purple-300)
- Headings: Oxanium font family
- Body Text: Poppins font family
- Glass Cards: Backdrop blur with gradient borders
- Interactive Charts: Chart.js with custom purple theme
- Status Indicators: Color-coded order statuses
- Loading States: Skeleton loaders for better UX
- Set up PostgreSQL database
- Configure environment variables
- Run migrations:
python manage.py migrate - Development only: Seed with sample data:
python manage.py seed_data - Collect static files:
python manage.py collectstatic - Start with Gunicorn:
gunicorn backend_api.wsgi:application
- Build the application:
npx nx build frontend - Serve static files from
dist/directory - Configure API URL for production