EcoShop
Production-Ready | Scalable Architecture | Enterprise-Grade Code Quality
Django React PostgreSQL License: MIT
EcoShop is a professionally architected, full-stack e-commerce platform built with modern technologies and enterprise-grade development practices. This production-ready MVP features a fully decoupled architecture, enabling independent scaling of frontend and backend services while maintaining clean API contracts. Designed with extensibility and maintainability at its core, EcoShop provides a robust foundation for launching high-performance e-commerce ventures with minimal time-to-market.
- JWT-based authentication with secure token management (access/refresh tokens)
- Custom user model supporting phone number and email-based login
- Role-based access control with admin/staff permissions
- Secure password handling with Django's built-in encryption
- Session management with automatic token refresh
- Advanced filtering system by category, skin type, and ingredients
- Multi-image product gallery with optimized image handling
- Real-time search and category-based navigation
- Product view tracking for analytics and insights
- Detailed product specifications including volume, country of origin, and ingredients
- Persistent cart state with real-time quantity updates
- Seamless checkout flow with customer information collection
- Order management system with status tracking
- Price calculation engine with support for discounts and promotions
- Full CRUD operations for products, categories, and orders
- Image upload functionality with validation and optimization
- Category management with featured product assignments
- Order tracking and customer management
- Blog post management for content marketing
- Multi-language support: English, Ukrainian, Russian with instant switching
- Dark/Light theme with persistent user preferences
- Mobile-first responsive design optimized for all screen sizes
- Smooth animations and micro-interactions for enhanced UX
- Accessibility-focused with semantic HTML and ARIA labels
| Layer | Technology | Purpose |
|---|---|---|
| Frontend Framework | React 18 | Component-based UI with hooks and context API |
| Build Tool | Vite 5 | Lightning-fast HMR and optimized production builds |
| Styling | Tailwind CSS | Utility-first CSS with custom design system |
| State Management | React Context API | Global state for auth, cart, theme, and language |
| HTTP Client | Axios | Promise-based API communication with interceptors |
| Routing | React Router DOM 6 | Client-side routing with lazy loading |
| Icons | Lucide React | Modern, scalable icon library |
| Backend Framework | Django 6.0 | High-level Python web framework |
| API Layer | Django REST Framework | Powerful toolkit for building Web APIs |
| Authentication | SimpleJWT | JWT authentication for stateless sessions |
| Database (Production) | Supabase (PostgreSQL) | Enterprise-grade relational database |
| Database (Development) | SQLite3 | Lightweight database for local development |
| ORM | Django ORM | Database abstraction with migrations |
| File Storage | Supabase Storage (S3) | Object storage for product images and media |
| CORS Handling | django-cors-headers | Cross-origin resource sharing configuration |
| Static Files | WhiteNoise | Efficient static file serving for production |
| Image Processing | Pillow | Python imaging library for product photos |
| Security | CSP, HSTS | Content Security Policy and HTTP Strict Transport Security |
| Frontend Deployment | Vercel | Edge network with automatic HTTPS |
| Backend Deployment | Railway / Render | Container-based deployment with Supabase DB |
| CI/CD | Git-based | Automated deployments on push |
EcoShop implements a modern, decoupled architecture that separates the frontend and backend into independent services communicating via a RESTful API. This architectural pattern provides significant advantages for scalability, maintainability, and team collaboration.
┌─────────────────────────────────────────────────────────────────┐
│ FRONTEND LAYER (React SPA) │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ Pages │ │ Components │ │ Contexts │ │
│ │ (Routes) │ │ (Reusable) │ │ (State) │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │ │ │ │
│ └──────────────────┴──────────────────┘ │
│ │ │
│ Axios Client │
│ │ │
└────────────────────────────┼─────────────────────────────────────┘
│
RESTful API (JSON)
│
┌────────────────────────────┼─────────────────────────────────────┐
│ │ │
│ Django REST Framework │
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
│ │ ViewSets │ │ Models │ │ Serializers │ │
│ │ (API) │ │ (ORM) │ │ (JSON) │ │
│ └──────────────┘ └──────────────┘ └──────────────┘ │
│ │ │ │ │
│ └──────────────────┴──────────────────┘ │
│ │ │
│ PostgreSQL │
│ (Relational Database) │
└─────────────────────────────────────────────────────────────────┘
✅ Independent Scaling: Frontend and backend can scale independently based on traffic patterns
✅ Technology Flexibility: Replace or upgrade either layer without affecting the other
✅ Team Collaboration: Frontend and backend teams work in parallel with clear API contracts
✅ API Reusability: Same backend API can serve web, mobile, and third-party integrations
✅ Deployment Flexibility: Deploy to different platforms optimized for each layer
✅ Maintenance Efficiency: Clear separation of concerns simplifies debugging and updates
The API follows RESTful principles with:
- Resource-based URLs (
/api/products/,/api/categories/) - HTTP method semantics (GET, POST, PUT, DELETE)
- JSON request/response format for universal compatibility
- JWT token authentication for stateless, scalable sessions
- Versioned endpoints for backward compatibility
- Comprehensive error handling with meaningful status codes
EcoShop is fully configured for production deployment with automated CI/CD pipelines, ensuring zero-downtime updates and seamless scalability.
Developer Push → GitHub Repository → Automated Build → Environment Config → Database Migration → Live Deployment
1. Code Push: Developer commits and pushes to GitHub
2. Automatic Build: Vercel/Railway detect changes and trigger builds
3. Environment Configuration: Secrets loaded from platform dashboards
4. Database Migration: Django migrations run automatically
5. Static Asset Optimization: Frontend assets minified and served via CDN
6. Live Deployment: Changes go live within 2-3 minutes
| Service | Platform | Features |
|---|---|---|
| Frontend | Vercel | Edge network, automatic HTTPS, instant rollbacks |
| Backend | Railway / Render | Container deployment, auto-scaling |
| Database | Supabase | Managed PostgreSQL with real-time capabilities |
| Storage | Supabase Storage | S3-compatible object storage for media |
| Static Files | WhiteNoise + CDN | Compressed assets with cache headers |
Backend (Railway):
SECRET_KEY=your-django-secret-key-here
DATABASE_URL=postgresql://user:password@host:port/database
ALLOWED_HOSTS=yourdomain.com,www.yourdomain.com
DEBUG=FalseFrontend (Vercel):
VITE_API_URL=https://your-backend-api.railway.appSecurity Note: Never commit
.envfiles to version control. All sensitive keys should be configured in your deployment platform's dashboard.
✅ Automatic deployments on git push to main branch
✅ Preview deployments for pull requests
✅ Instant rollbacks to previous versions
✅ Zero-downtime deployments with health checks
✅ Environment-based configuration for staging/production
✅ Automated database migrations on deployment
- Python 3.10+ (Backend)
- Node.js 18+ (Frontend)
- PostgreSQL (Optional, for production-like environment)
- Git (Version control)
# Clone the repository
git clone https://github.com/Br1zz1713/ecoshop.git
cd ecoshop
# Create and activate virtual environment
python -m venv venv
venv\Scripts\activate # Windows
# source venv/bin/activate # macOS/Linux
# Install dependencies
pip install -r requirements.txt
# Optional: if Supabase/remote DB is unavailable locally
set FORCE_SQLITE=true
# Run database migrations
python manage.py migrate
# Create superuser for admin access
python manage.py createsuperuser
# Start Django development server
python manage.py runserverBackend runs on: http://localhost:8000
Admin panel: http://localhost:8000/admin
# Navigate to frontend directory
cd frontend
# Install dependencies
npm install
# Start Vite development server
npm run devFrontend runs on: http://localhost:5173
GET /health/live/- process is aliveGET /health/ready/- database and storage readinessGET /ping/- DB reachability quick check
# One-click startup script
start_local.batThis automated script will:
- ✅ Activate virtual environment
- ✅ Run database migrations
- ✅ Start backend server (port 8000)
- ✅ Start frontend server (port 5173)
- ✅ Open application in browser
EcoShop adheres to PEP 8 - the official Python style guide, ensuring code readability and maintainability:
✅ 4-space indentation for consistent formatting
✅ Descriptive variable names following snake_case convention
✅ Docstrings for all public modules, functions, classes, and methods
✅ Type hints for improved code documentation
✅ Maximum line length of 79 characters for code, 72 for comments
✅ Import organization (standard library, third-party, local)
✅ Class and function naming following PEP 8 conventions
The frontend follows modern React best practices and component-based architecture:
✅ Functional components with React Hooks (useState, useEffect, useContext)
✅ Component composition for reusability and maintainability
✅ Custom hooks for shared logic extraction
✅ Context API for global state management
✅ PropTypes/TypeScript for type safety (expandable)
✅ CSS-in-JS with Tailwind utility classes
✅ Code splitting with React.lazy for performance
✅ Consistent file structure (components, pages, contexts, utils)
- Git commit messages following conventional commits format
- Environment-based configuration (no hardcoded secrets)
- Error handling with try-catch blocks and user-friendly messages
- Security best practices (CSRF protection, XSS prevention, SQL injection protection)
- Performance optimization (lazy loading, code splitting, image optimization)
- 6,574 Lines of Code - Substantial, production-ready codebase
- 50+ Git Commits - Professional version control history
- 8 Django Apps - Modular, maintainable backend architecture
- 20+ React Components - Reusable UI building blocks
- 15+ API Endpoints - Comprehensive backend coverage
- 3 Language Support - English, Ukrainian, Russian
- 100% Responsive - Mobile, tablet, desktop optimized
EcoShop is ideal for:
- 🌿 Eco-friendly product marketplaces
- 💄 Cosmetics and beauty stores
- 🛍️ Boutique e-commerce ventures
- 📦 Dropshipping platforms
- 🏪 Multi-vendor marketplaces (with extensions)
- 🎁 Subscription box services (with modifications)
- JWT Authentication with secure token rotation
- HTTPS Enforcement in production
- CSRF Protection for all state-changing operations
- Content Security Policy (CSP) headers
- HTTP Strict Transport Security (HSTS)
- Secure cookie handling with HttpOnly and Secure flags
- SQL Injection Protection via Django ORM
- XSS Prevention with React's built-in escaping
- Environment-based secrets (no hardcoded credentials)
- Decoupled architecture for independent scaling
- Database indexing on frequently queried fields
- Static file compression with WhiteNoise
- Lazy loading for images and components
- Code splitting for optimized bundle sizes
- CDN integration for global content delivery
- Database connection pooling for efficient resource usage
- Caching strategies (expandable with Redis)
This project is licensed under the MIT License.
MIT License
Copyright (c) 2025 EcoShop
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
For commercial inquiries, customization requests, or technical support:
- GitHub: Br1zz1713/ecoshop
- Issues: Report bugs via GitHub Issues
Built with 💚 using Django REST Framework & React
Enterprise-Grade | Production-Ready | Scalable Architecture
⭐ Star this repository if you find it valuable!