- Project Overview
- Architecture & System Design
- Backend Technologies
- Frontend Technologies
- Machine Learning Components
- Database Design
- API Endpoints
- Deployment & DevOps
- Code Structure & Files
- How Everything Works Together
- Learning Path & Next Steps
This is a full-stack AI-powered e-commerce recommendation engine that provides personalized product recommendations to users based on their behavior, preferences, and interaction history.
- AI-Powered Recommendations: Uses machine learning algorithms to suggest products
- Real-time User Tracking: Records and analyzes user interactions
- RESTful API: Clean, well-documented API endpoints
- Admin Dashboard: Django admin interface for data management
- React Frontend: Modern, responsive user interface
- Scalable Architecture: Designed for production deployment
Frontend: React 18 + JavaScript + CSS
Backend: Django 4.2 + Python 3.10 + Django REST Framework
Database: SQLite (dev) / PostgreSQL (prod)
Cache: Redis (optional)
ML Libraries: scikit-learn, pandas, numpy
Deployment: Docker + Docker Compose
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ React Frontend │ │ Django API │ │ ML Engine │
│ (Port 3000) │◄──►│ (Port 8000) │◄──►│ (scikit-learn) │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │ │
│ ▼ │
│ ┌─────────────────┐ │
│ │ SQLite DB │ │
│ │ (Users, Prods, │ │
│ │ Interactions) │ │
│ └─────────────────┘ │
│ │ │
▼ ▼ ▼
┌─────────────────────────────────────────────────────────────┐
│ Cache Layer (Redis - Optional) │
└─────────────────────────────────────────────────────────────┘
- User Interaction: User clicks/views product in React frontend
- API Request: Frontend sends HTTP request to Django backend
- Business Logic: Django processes request, applies business rules
- ML Processing: Recommendation engine generates personalized suggestions
- Database Query: Data retrieved/stored in SQLite database
- Response: JSON data sent back to frontend
- UI Update: React updates interface with new data
What it is: Django is a high-level Python web framework that encourages rapid development and clean, pragmatic design.
Why we use it:
- ORM (Object-Relational Mapping): Simplifies database operations
- Admin Interface: Automatic admin panel for data management
- Security: Built-in protection against common vulnerabilities
- Scalability: Handles high traffic efficiently
Key Django Components in Our Project:
class Product(models.Model):
name = models.CharField(max_length=200)
description = models.TextField()
category = models.CharField(max_length=100)
price = models.DecimalField(max_digits=10, decimal_places=2)
created_at = models.DateTimeField(auto_now_add=True)Explanation: Models define database table structure using Python classes.
class RecommendationsAPIView(APIView):
def get(self, request, user_id):
# Get personalized recommendations
recommendations = recommendation_engine.get_recommendations(user_id)
return Response(recommendations)Explanation: Views handle HTTP requests and return responses.
urlpatterns = [
path('recommendations/<int:user_id>/', views.RecommendationsAPIView.as_view()),
path('interaction/', views.InteractionAPIView.as_view()),
]Explanation: URLs route incoming requests to appropriate views.
What it is: A powerful toolkit for building Web APIs in Django.
Features we use:
- Serializers: Convert complex data types to JSON
- ViewSets: Organize view logic
- Permissions: Control API access
- Pagination: Handle large datasets efficiently
Example Serializer:
class ProductSerializer(serializers.ModelSerializer):
class Meta:
model = Product
fields = ['id', 'name', 'category', 'price', 'description']- File-based database: Stored in
db.sqlite3 - No server required: Perfect for development
- ACID compliant: Ensures data integrity
- Zero configuration: Works out of the box
- Production-grade: Handles millions of records
- Advanced features: Full-text search, JSON support
- Scalable: Supports read replicas, sharding
- ACID compliant: Enterprise-level data integrity
What it is: In-memory data structure store used as cache.
How we use it:
from django.core.cache import cache
# Store recommendations in cache
cache.set(f'recommendations_user_{user_id}', recommendations, timeout=1800)
# Retrieve from cache
cached_data = cache.get(f'recommendations_user_{user_id}')Benefits:
- Speed: Sub-millisecond response times
- Reduced database load: Fewer queries to database
- Scalability: Handles high concurrent users
What it is: A JavaScript library for building user interfaces.
Why React:
- Component-Based: Reusable UI components
- Virtual DOM: Efficient rendering
- State Management: Reactive data flow
- Large Ecosystem: Extensive package library
const ProductCard = ({ product, isRecommendation = false }) => (
<div className="product-card">
<h3>{product.name}</h3>
<p>{product.category}</p>
<span>${product.price}</span>
{isRecommendation && (
<div className="ai-score">
AI Score: {Math.round(product.confidence_score * 100)}%
</div>
)}
</div>
);const [recommendations, setRecommendations] = useState([]);
const [loading, setLoading] = useState(false);
const [currentUser, setCurrentUser] = useState(null);const fetchRecommendations = async (userId) => {
setLoading(true);
try {
const response = await fetch(`/api/recommendations/${userId}/`);
const data = await response.json();
setRecommendations(data.recommendations);
} catch (error) {
console.error('Error fetching recommendations:', error);
} finally {
setLoading(false);
}
};Tailwind CSS: Utility-first CSS framework
<div className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300">
<h3 className="font-semibold text-gray-800 text-lg mb-1">{product.name}</h3>
<p className="text-sm text-gray-500">{product.category}</p>
</div>Benefits:
- Rapid development: Pre-built utility classes
- Consistent design: Standardized spacing, colors
- Responsive: Mobile-first approach
- Small bundle size: Only includes used styles
What it is: Recommends items based on user behavior patterns.
How it works:
- User-Item Matrix: Create matrix of user interactions
- Similarity Calculation: Find users with similar preferences
- Prediction: Recommend items liked by similar users
Code Implementation:
class CollaborativeFilteringModel:
def __init__(self, n_components=50):
self.model = TruncatedSVD(n_components=n_components, random_state=42)
self.user_item_matrix = None
def train(self, df):
# Create user-item interaction matrix
interaction_matrix = self.prepare_data(df)
# Fit SVD model
self.model.fit(interaction_matrix)
def predict_user_preferences(self, user_id, product_ids):
# Transform user-item matrix
user_features = self.model.transform(self.user_item_matrix)
product_features = self.model.components_.T
# Calculate scores for each product
scores = []
for product_id in product_ids:
score = np.dot(user_vector, product_vector)
scores.append(score)
return scoresWhat it is: Decomposes user-item matrix into user and item factors.
Mathematical Foundation:
R ≈ U × V^T
Where:
R = User-Item Rating Matrix (m×n)
U = User Factor Matrix (m×k)
V = Item Factor Matrix (n×k)
k = Number of latent factors
Implementation:
class MatrixFactorizationModel:
def fit(self, df, epochs=20):
# Initialize factors randomly
self.user_factors = np.random.normal(0, 0.1, (n_users, self.n_factors))
self.item_factors = np.random.normal(0, 0.1, (n_items, self.n_factors))
# SGD training
for epoch in range(epochs):
for user_idx, item_idx, rating in training_data:
# Predict rating
prediction = self.predict_single(user_idx, item_idx)
error = rating - prediction
# Update factors using gradient descent
user_factor = self.user_factors[user_idx].copy()
item_factor = self.item_factors[item_idx].copy()
self.user_factors[user_idx] += learning_rate * (
error * item_factor - regularization * user_factor
)
self.item_factors[item_idx] += learning_rate * (
error * user_factor - regularization * item_factor
)score_map = {
'view': 1, # Basic interaction
'like': 2, # Positive signal
'cart': 3, # Strong intent
'purchase': 5 # Strongest signal
}def apply_time_decay(score, timestamp, decay_factor=0.1):
"""Apply time decay to interaction scores"""
days_ago = (now - timestamp).days
decayed_score = score * np.exp(-decay_factor * days_ago)
return decayed_scoreCombining multiple algorithms for better performance:
def get_ensemble_recommendations(user_id, num_recommendations=10):
# Get predictions from different models
cf_scores = collaborative_model.predict(user_id, candidate_products)
mf_scores = matrix_factorization_model.predict(user_id, candidate_products)
# Weighted ensemble
ensemble_scores = 0.7 * cf_scores + 0.3 * mf_scores
# Rank and return top recommendations
top_indices = np.argsort(ensemble_scores)[::-1][:num_recommendations]
return [candidate_products[i] for i in top_indices]┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ User │ │ UserBehavior │ │ Product │
│ │ │ │ │ │
│ • id (PK) │◄──►│ • id (PK) │◄──►│ • id (PK) │
│ • username │ │ • user_id (FK) │ │ • name │
│ • email │ │ • product_id(FK)│ │ • description │
│ • password │ │ • interaction │ │ • category │
│ • date_joined │ │ • rating │ │ • price │
└─────────────────┘ │ • timestamp │ │ • created_at │
│ • session_id │ └─────────────────┘
└─────────────────┘
│
▼
┌─────────────────┐
│ UserProfile │
│ │
│ • user_id (FK) │
│ • preferences │
│ • embedding │
│ • last_updated │
└─────────────────┘
CREATE TABLE products (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name VARCHAR(200) NOT NULL,
description TEXT,
category VARCHAR(100),
price DECIMAL(10,2),
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);CREATE TABLE user_behavior (
id INTEGER PRIMARY KEY AUTOINCREMENT,
user_id INTEGER REFERENCES auth_user(id),
product_id INTEGER REFERENCES products(id),
interaction_type VARCHAR(20) CHECK (interaction_type IN ('view', 'like', 'cart', 'purchase')),
rating FLOAT,
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
session_id VARCHAR(100)
);
-- Indexes for performance
CREATE INDEX idx_user_behavior_user ON user_behavior(user_id);
CREATE INDEX idx_user_behavior_product ON user_behavior(product_id);
CREATE INDEX idx_user_behavior_timestamp ON user_behavior(timestamp);class Product(models.Model):
name = models.CharField(max_length=200)
description = models.TextField()
category = models.CharField(max_length=100)
price = models.DecimalField(max_digits=10, decimal_places=2)
created_at = models.DateTimeField(auto_now_add=True)
class Meta:
ordering = ['-created_at']
indexes = [
models.Index(fields=['category']),
models.Index(fields=['price']),
]
def __str__(self):
return self.nameclass UserBehavior(models.Model):
INTERACTION_TYPES = [
('view', 'View'),
('like', 'Like'),
('cart', 'Add to Cart'),
('purchase', 'Purchase'),
]
user = models.ForeignKey(User, on_delete=models.CASCADE)
product = models.ForeignKey(Product, on_delete=models.CASCADE)
interaction_type = models.CharField(max_length=20, choices=INTERACTION_TYPES)
rating = models.FloatField(null=True, blank=True)
timestamp = models.DateTimeField(auto_now_add=True)
session_id = models.CharField(max_length=100, null=True, blank=True)
class Meta:
indexes = [
models.Index(fields=['user', 'product']),
models.Index(fields=['timestamp']),
]REST (Representational State Transfer) principles:
- Stateless: Each request contains all necessary information
- Cacheable: Responses can be cached for performance
- Uniform Interface: Consistent URL structure
- Resource-Based: URLs represent resources, not actions
GET /api/recommendations/{user_id}/Parameters:
user_id(int): User ID to get recommendations forcount(int, optional): Number of recommendations (default: 10)
Response:
{
"user_id": 1,
"recommendations": [
{
"product_id": 5,
"product_name": "Wireless Headphones",
"category": "Electronics",
"price": 99.99,
"confidence_score": 0.85,
"cf_score": 0.7,
"mf_score": 0.3
}
],
"count": 10
}Implementation:
class RecommendationsAPIView(APIView):
def get(self, request, user_id):
try:
count = int(request.query_params.get('count', 10))
# Get recommendations from ML engine
recommendations = recommendation_engine.get_recommendations(
user_id, num_recommendations=count
)
return Response({
'user_id': user_id,
'recommendations': recommendations,
'count': len(recommendations)
}, status=status.HTTP_200_OK)
except Exception as e:
return Response(
{'error': str(e)},
status=status.HTTP_500_INTERNAL_SERVER_ERROR
)POST /api/interaction/Request Body:
{
"user_id": 1,
"product_id": 5,
"interaction_type": "view",
"rating": 4.5
}Response:
{
"message": "Interaction recorded successfully"
}Implementation:
class InteractionAPIView(APIView):
def post(self, request):
try:
user_id = request.data.get('user_id')
product_id = request.data.get('product_id')
interaction_type = request.data.get('interaction_type')
rating = request.data.get('rating')
# Validate required fields
if not all([user_id, product_id, interaction_type]):
return Response(
{'error': 'user_id, product_id, and interaction_type are required'},
status=status.HTTP_400_BAD_REQUEST
)
# Record interaction
UserBehavior.objects.create(
user_id=user_id,
product_id=product_id,
interaction_type=interaction_type,
rating=rating
)
# Update recommendations asynchronously
recommendation_engine.record_interaction(user_id, product_id, interaction_type)
return Response(
{'message': 'Interaction recorded successfully'},
status=status.HTTP_201_CREATED
)
except Exception as e:
return Response(
{'error': str(e)},
status=status.HTTP_500_INTERNAL_SERVER_ERROR
)GET /api/search/?q=electronics&user_id=1Parameters:
q(string): Search queryuser_id(int, optional): User ID for personalization
Response:
{
"products": [
{
"id": 1,
"name": "Smartphone Pro",
"category": "Electronics",
"price": 699.99,
"description": "Latest smartphone...",
"personalization_score": 0.75
}
],
"count": 1
}| Code | Meaning | When to Use |
|---|---|---|
| 200 | OK | Successful GET request |
| 201 | Created | Successful POST request (resource created) |
| 400 | Bad Request | Invalid request data |
| 404 | Not Found | Resource doesn't exist |
| 405 | Method Not Allowed | Wrong HTTP method |
| 500 | Internal Server Error | Server-side error |
def handle_api_error(view_func):
"""Decorator for consistent error handling"""
def wrapper(*args, **kwargs):
try:
return view_func(*args, **kwargs)
except ValidationError as e:
return Response(
{'error': 'Validation failed', 'details': str(e)},
status=status.HTTP_400_BAD_REQUEST
)
except ObjectDoesNotExist as e:
return Response(
{'error': 'Resource not found', 'details': str(e)},
status=status.HTTP_404_NOT_FOUND
)
except Exception as e:
logger.error(f"Unexpected error in {view_func.__name__}: {str(e)}")
return Response(
{'error': 'Internal server error'},
status=status.HTTP_500_INTERNAL_SERVER_ERROR
)
return wrapperFROM python:3.10-slim
WORKDIR /app
# Install system dependencies
RUN apt-get update && apt-get install -y \
postgresql-client \
&& rm -rf /var/lib/apt/lists/*
# Install Python dependencies
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
# Copy application code
COPY . .
# Expose port
EXPOSE 8000
# Run application
CMD ["python", "manage.py", "runserver", "0.0.0.0:8000"]FROM node:18-alpine
WORKDIR /app
# Install dependencies
COPY package*.json ./
RUN npm install
# Copy source code
COPY . .
# Build application
RUN npm run build
# Serve with nginx
FROM nginx:alpine
COPY --from=0 /app/build /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]Purpose: Orchestrate multiple containers together
version: '3.8'
services:
# PostgreSQL Database
postgres:
image: postgres:13
environment:
POSTGRES_DB: ecommerce_rec
POSTGRES_USER: postgres
POSTGRES_PASSWORD: password
volumes:
- postgres_data:/var/lib/postgresql/data
ports:
- "5432:5432"
# Redis Cache
redis:
image: redis:alpine
ports:
- "6379:6379"
# Django Backend
backend:
build: .
command: python manage.py runserver 0.0.0.0:8000
volumes:
- .:/app
ports:
- "8000:8000"
depends_on:
- postgres
- redis
environment:
- DATABASE_URL=postgresql://postgres:password@postgres:5432/ecommerce_rec
- REDIS_URL=redis://redis:6379/0
# React Frontend
frontend:
build: ./frontend
ports:
- "3000:3000"
depends_on:
- backend
environment:
- REACT_APP_API_URL=http://localhost:8000/api
volumes:
postgres_data:DEBUG = True
ALLOWED_HOSTS = ['localhost', '127.0.0.1']
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
# Simplified cache for development
CACHES = {
'default': {
'BACKEND': 'django.core.cache.backends.locmem.LocMemCache',
}
}DEBUG = False
ALLOWED_HOSTS = ['your-domain.com', 'api.your-domain.com']
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.postgresql',
'NAME': os.environ.get('DB_NAME'),
'USER': os.environ.get('DB_USER'),
'PASSWORD': os.environ.get('DB_PASSWORD'),
'HOST': os.environ.get('DB_HOST'),
'PORT': os.environ.get('DB_PORT', '5432'),
}
}
# Redis cache for production
CACHES = {
'default': {
'BACKEND': 'django_redis.cache.RedisCache',
'LOCATION': os.environ.get('REDIS_URL'),
'OPTIONS': {
'CLIENT_CLASS': 'django_redis.client.DefaultClient',
}
}
}
# Security settings
SECURE_SSL_REDIRECT = True
SECURE_HSTS_SECONDS = 31536000
SECURE_HSTS_INCLUDE_SUBDOMAINS = True
SECURE_HSTS_PRELOAD = True# Start with Docker Compose
docker-compose up --build
# Or run manually
python manage.py runserver # Backend
npm start # Frontend (separate terminal)# Build and push to ECR
aws ecr get-login-password --region us-west-2 | docker login --username AWS --password-stdin <account>.dkr.ecr.us-west-2.amazonaws.com
docker build -t ecommerce-api .
docker tag ecommerce-api:latest <account>.dkr.ecr.us-west-2.amazonaws.com/ecommerce-api:latest
docker push <account>.dkr.ecr.us-west-2.amazonaws.com/ecommerce-api:latest
# Deploy with ECS or Kubernetes
kubectl apply -f kubernetes-deployment.yaml# Install Heroku CLI and login
heroku login
# Create app
heroku create your-ecommerce-app
# Add PostgreSQL
heroku addons:create heroku-postgresql:hobby-dev
# Add Redis
heroku addons:create heroku-redis:hobby-dev
# Deploy
git push heroku main
# Run migrations
heroku run python manage.py migrateE-Commerce Recommendation Engine/
├── ecommerce_rec/ # Django project settings
│ ├── __init__.py
│ ├── settings.py # Main settings
│ ├── settings_dev.py # Development settings
│ ├── urls.py # URL routing
│ ├── wsgi.py # WSGI application
│ └── asgi.py # ASGI application
├── recommendations/ # Main Django app
│ ├── models.py # Database models
│ ├── views.py # API views
│ ├── urls.py # App URLs
│ ├── admin.py # Admin interface
│ ├── recommendation_engine.py # ML recommendation logic
│ ├── ml_models_simple.py # Lightweight ML models
│ ├── simple_engine.py # Simple recommendation engine
│ ├── management/ # Django commands
│ │ └── commands/
│ │ └── populate_sample_data.py
│ └── migrations/ # Database migrations
├── frontend/ # React application
│ ├── public/
│ │ └── index.html # HTML template
│ ├── src/
│ │ ├── App.js # Main React component
│ │ ├── index.js # Entry point
│ │ ├── index.css # Global styles
│ │ ├── components/ # React components
│ │ └── services/ # API service layer
│ ├── package.json # Node.js dependencies
│ └── Dockerfile # Frontend container
├── requirements.txt # Python dependencies
├── docker-compose.yml # Development orchestration
├── docker-compose.prod.yml # Production orchestration
├── Dockerfile # Backend container
├── .dockerignore # Docker ignore file
├── manage.py # Django management script
└── db.sqlite3 # SQLite database (dev)
Purpose: Django's command-line utility for administrative tasks
#!/usr/bin/env python
import os
import sys
if __name__ == '__main__':
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'ecommerce_rec.settings')
from django.core.management import execute_from_command_line
execute_from_command_line(sys.argv)Common Commands:
python manage.py runserver # Start development server
python manage.py makemigrations # Create database migrations
python manage.py migrate # Apply database migrations
python manage.py createsuperuser # Create admin user
python manage.py collectstatic # Collect static files for production
python manage.py shell # Open Django shellPurpose: Lists all Python dependencies
Django==4.2.7 # Web framework
djangorestframework==3.14.0 # API framework
django-cors-headers==4.3.1 # CORS handling
django-redis==5.3.0 # Redis integration
psycopg2-binary==2.9.7 # PostgreSQL adapter
redis==4.6.0 # Redis client
scikit-learn==1.3.0 # Machine learning
pandas==2.0.3 # Data manipulation
numpy==1.24.3 # Numerical computing
celery==5.3.4 # Task queue
pillow==10.0.0 # Image processing
Faker==19.6.2 # Generate fake data
Purpose: Node.js project configuration and dependencies
{
"name": "ecommerce-recommendation-frontend",
"version": "1.0.0",
"dependencies": {
"react": "^18.2.0", // UI library
"react-dom": "^18.2.0", // DOM renderer
"react-scripts": "5.0.1", // Build tools
"lucide-react": "^0.263.1" // Icon library
},
"scripts": {
"start": "react-scripts start", // Development server
"build": "react-scripts build", // Production build
"test": "react-scripts test", // Run tests
"eject": "react-scripts eject" // Eject from CRA
},
"proxy": "http://localhost:8000" // Proxy API requests
}Purpose: Exclude files from Docker build context
# Virtual environments
venv/
env/
.venv/
# Node modules
node_modules/
npm-debug.log*
# Python cache
__pycache__/
*.pyc
*.pyo
# Database files
*.db
*.sqlite3
dump.rdb
# Git
.git/
.gitignore
# Documentation
*.md
docs/
Purpose: Version control for database schema changes
Example Migration (0001_initial.py):
from django.db import migrations, models
import django.db.models.deletion
class Migration(migrations.Migration):
initial = True
dependencies = [
('auth', '0012_alter_user_first_name_max_length'),
]
operations = [
migrations.CreateModel(
name='Product',
fields=[
('id', models.BigAutoField(primary_key=True)),
('name', models.CharField(max_length=200)),
('description', models.TextField()),
('category', models.CharField(max_length=100)),
('price', models.DecimalField(decimal_places=2, max_digits=10)),
('created_at', models.DateTimeField(auto_now_add=True)),
],
),
migrations.CreateModel(
name='UserBehavior',
fields=[
('id', models.BigAutoField(primary_key=True)),
('interaction_type', models.CharField(max_length=20)),
('rating', models.FloatField(blank=True, null=True)),
('timestamp', models.DateTimeField(auto_now_add=True)),
('session_id', models.CharField(blank=True, max_length=100, null=True)),
('product', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='recommendations.product')),
('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='auth.user')),
],
),
]1. User visits http://localhost:3000/
2. React app loads in browser
3. App makes initial API call to fetch popular products
4. Django receives request, queries database
5. Returns JSON response with product data
6. React renders product grid
1. User clicks "View" button on product
2. JavaScript event handler triggered
3. AJAX POST request sent to /api/interaction/
4. Django InteractionAPIView processes request
5. UserBehavior record created in database
6. Cache invalidated for user's recommendations
7. Success response sent back to frontend
1. User requests recommendations
2. Django RecommendationsAPIView called
3. RecommendationEngine.get_recommendations() invoked
4. Check cache for existing recommendations
5. If not cached, ML models generate predictions:
a. Collaborative Filtering analyzes user similarity
b. Matrix Factorization computes latent factors
c. Ensemble combines multiple algorithm scores
6. Top-N products selected and scored
7. Results cached for future requests
8. JSON response with recommendations returned
9. React updates UI with personalized suggestions
┌─────────────┐ HTTP Request ┌─────────────┐ Query ┌─────────────┐
│ React │ ──────────────────► │ Django │ ──────────► │ Database │
│ Frontend │ │ Backend │ │ (SQLite) │
│ │ ◄────────────────── │ │ ◄────────── │ │
└─────────────┘ JSON Response └─────────────┘ Results └─────────────┘
│ │ ▲
│ ▼ │
│ ┌─────────────┐ │
│ │ ML │ │
│ │ Engine │─────────────────────┘
│ │ │ Read User Data
│ └─────────────┘
│ │
│ ▼
│ ┌─────────────┐
│ │ Redis │
└───────────────────────────│ Cache │
Cached Recommendations │ │
└─────────────┘
1. Frontend Request:
// React component
const fetchRecommendations = async (userId) => {
try {
const response = await fetch(`/api/recommendations/${userId}/`);
const data = await response.json();
setRecommendations(data.recommendations);
} catch (error) {
console.error('Failed to fetch recommendations:', error);
}
};2. Django URL Routing:
# urls.py
urlpatterns = [
path('recommendations/<int:user_id>/', views.RecommendationsAPIView.as_view()),
]3. View Processing:
# views.py
class RecommendationsAPIView(APIView):
def get(self, request, user_id):
# Validate user exists
try:
user = User.objects.get(id=user_id)
except User.DoesNotExist:
return Response({'error': 'User not found'}, status=404)
# Get recommendations from ML engine
recommendations = recommendation_engine.get_recommendations(user_id)
return Response({
'user_id': user_id,
'recommendations': recommendations,
'count': len(recommendations)
})4. ML Engine Processing:
# recommendation_engine.py
def get_recommendations(self, user_id, num_recommendations=10):
# Check cache first
cache_key = f"recommendations_user_{user_id}_{num_recommendations}"
cached = cache.get(cache_key)
if cached:
return cached
# Get user interaction history
user_interactions = UserBehavior.objects.filter(user_id=user_id)
# Find candidate products (not yet interacted with)
interacted_products = user_interactions.values_list('product_id', flat=True)
candidates = Product.objects.exclude(id__in=interacted_products)
# Run ML algorithms
cf_scores = self.collaborative_filtering_model.predict(user_id, candidates)
mf_scores = self.matrix_factorization_model.predict(user_id, candidates)
# Combine scores with weighted ensemble
final_scores = 0.7 * cf_scores + 0.3 * mf_scores
# Rank and select top N
ranked_products = sorted(zip(candidates, final_scores),
key=lambda x: x[1], reverse=True)
top_products = ranked_products[:num_recommendations]
# Format response
recommendations = []
for product, score in top_products:
recommendations.append({
'product_id': product.id,
'product_name': product.name,
'category': product.category,
'price': float(product.price),
'confidence_score': float(score)
})
# Cache results
cache.set(cache_key, recommendations, timeout=1800)
return recommendations5. Database Queries:
-- Get user interactions
SELECT product_id, interaction_type, rating, timestamp
FROM user_behavior
WHERE user_id = 1
ORDER BY timestamp DESC;
-- Get candidate products
SELECT id, name, category, price
FROM products
WHERE id NOT IN (
SELECT DISTINCT product_id
FROM user_behavior
WHERE user_id = 1
);6. Response Back to Frontend:
{
"user_id": 1,
"recommendations": [
{
"product_id": 5,
"product_name": "Wireless Bluetooth Headphones",
"category": "Electronics",
"price": 99.99,
"confidence_score": 0.85
},
{
"product_id": 12,
"product_name": "Smart Fitness Watch",
"category": "Electronics",
"price": 199.99,
"confidence_score": 0.78
}
],
"count": 2
}# Multi-layer caching
class CachedRecommendationEngine:
def get_recommendations(self, user_id, num_recommendations=10):
# L1: Memory cache (fastest)
memory_key = f"mem_rec_{user_id}_{num_recommendations}"
if memory_key in self.memory_cache:
return self.memory_cache[memory_key]
# L2: Redis cache (fast)
redis_key = f"redis_rec_{user_id}_{num_recommendations}"
cached = cache.get(redis_key)
if cached:
self.memory_cache[memory_key] = cached
return cached
# L3: Database + ML computation (slow)
recommendations = self._compute_recommendations(user_id, num_recommendations)
# Store in all cache layers
cache.set(redis_key, recommendations, timeout=1800)
self.memory_cache[memory_key] = recommendations
return recommendations# models.py - Strategic indexes for performance
class UserBehavior(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE, db_index=True)
product = models.ForeignKey(Product, on_delete=models.CASCADE, db_index=True)
timestamp = models.DateTimeField(auto_now_add=True, db_index=True)
class Meta:
indexes = [
# Compound index for common query patterns
models.Index(fields=['user', 'timestamp']),
models.Index(fields=['product', 'interaction_type']),
models.Index(fields=['user', 'product', 'timestamp']),
]# tasks.py - Background tasks with Celery
from celery import shared_task
@shared_task
def retrain_models():
"""Retrain ML models in background"""
engine = RecommendationEngine()
engine.train_models()
# Invalidate all recommendation caches
cache.delete_pattern("recommendations_*")
@shared_task
def precompute_recommendations(user_id):
"""Precompute recommendations for active users"""
engine = RecommendationEngine()
recommendations = engine.get_recommendations(user_id)
# Store in cache for instant access
cache_key = f"recommendations_user_{user_id}_10"
cache.set(cache_key, recommendations, timeout=3600)-
HTTP Protocol
- Request/Response cycle
- Status codes (200, 404, 500, etc.)
- Headers and body
- REST principles
-
Database Concepts
- Relational databases (tables, relationships)
- SQL queries (SELECT, INSERT, UPDATE, DELETE)
- Indexing for performance
- Transactions and ACID properties
-
API Design
- RESTful conventions
- JSON data format
- Authentication and authorization
- Error handling
-
Python Basics
- Object-oriented programming
- List comprehensions
- Decorators and context managers
- Exception handling
-
Django Framework
- Models, Views, Templates (MVT pattern)
- ORM (Object-Relational Mapping)
- Middleware and signals
- Authentication system
-
Django REST Framework
- Serializers
- ViewSets and Generic Views
- Permissions and throttling
- Pagination
-
Modern JavaScript (ES6+)
- Arrow functions and destructuring
- Promises and async/await
- Modules (import/export)
- Array methods (map, filter, reduce)
-
React Fundamentals
- Components and JSX
- State and props
- Hooks (useState, useEffect, useCallback)
- Event handling
-
React Ecosystem
- Create React App
- Package management with npm
- Component libraries
- State management (Context API, Redux)
-
Core Concepts
- Supervised vs unsupervised learning
- Training, validation, and test sets
- Overfitting and underfitting
- Feature engineering
-
Recommendation Systems
- Collaborative filtering
- Content-based filtering
- Matrix factorization
- Evaluation metrics (precision, recall, NDCG)
-
Tools and Libraries
- scikit-learn for traditional ML
- pandas for data manipulation
- NumPy for numerical computing
- TensorFlow/PyTorch for deep learning
-
Web Development
- freeCodeCamp: Full Stack Development
- Mozilla Developer Network (MDN) Web Docs
- Django Official Tutorial
-
Machine Learning
- Coursera: Machine Learning by Andrew Ng
- edX: MIT Introduction to Computer Science
- Kaggle Learn: Micro-courses on ML topics
-
React
- React Official Documentation
- Scrimba: Learn React for Free
- React Tutorial by Kent C. Dodds
-
Beginner Projects
- Build a simple blog with Django
- Create a to-do app with React
- Implement basic recommendation system
-
Intermediate Projects
- E-commerce site with cart functionality
- Real-time chat application
- Movie recommendation system
-
Advanced Projects
- Microservices architecture
- Machine learning pipeline
- Full-stack application with authentication
-
Enhanced ML Models
# Add deep learning with TensorFlow pip install tensorflow==2.13.0 # Implement neural collaborative filtering class NeuralCollaborativeFiltering: def __init__(self, num_users, num_items, embedding_dim=50): self.model = tf.keras.Sequential([ tf.keras.layers.Embedding(num_users, embedding_dim), tf.keras.layers.Dense(128, activation='relu'), tf.keras.layers.Dense(64, activation='relu'), tf.keras.layers.Dense(1, activation='sigmoid') ])
-
Real-time Features
# Add WebSocket support pip install channels # Real-time recommendation updates class RecommendationConsumer(AsyncWebsocketConsumer): async def connect(self): await self.accept() async def receive(self, text_data): # Process real-time user interactions # Update recommendations instantly
-
Advanced Analytics
# A/B testing framework class ABTestFramework: def assign_user_to_variant(self, user_id, experiment_name): # Consistent assignment based on user_id hash hash_value = hashlib.md5(f"{user_id}_{experiment_name}".encode()).hexdigest() return "A" if int(hash_value, 16) % 2 == 0 else "B"
-
Security Enhancements
# Add API authentication from rest_framework.authentication import TokenAuthentication from rest_framework.permissions import IsAuthenticated class RecommendationsAPIView(APIView): authentication_classes = [TokenAuthentication] permission_classes = [IsAuthenticated]
-
Monitoring and Logging
# Add structured logging import structlog logger = structlog.get_logger() def log_recommendation_request(user_id, num_recommendations, response_time): logger.info( "recommendation_request", user_id=user_id, num_recommendations=num_recommendations, response_time_ms=response_time, timestamp=datetime.utcnow().isoformat() )
-
Performance Optimization
# Database query optimization def get_user_interactions_optimized(user_id): return UserBehavior.objects.filter( user_id=user_id ).select_related('product').prefetch_related( 'product__category' ).order_by('-timestamp')[:100]
-
Computer Vision Integration
# Image-based product recommendations from tensorflow.keras.applications import ResNet50 from tensorflow.keras.preprocessing import image class VisualRecommendationEngine: def __init__(self): self.model = ResNet50(weights='imagenet', include_top=False) def extract_features(self, image_path): img = image.load_img(image_path, target_size=(224, 224)) img_array = image.img_to_array(img) img_array = np.expand_dims(img_array, axis=0) features = self.model.predict(img_array) return features.flatten()
-
Natural Language Processing
# Text-based product search from transformers import AutoTokenizer, AutoModel class SemanticSearchEngine: def __init__(self): self.tokenizer = AutoTokenizer.from_pretrained('sentence-transformers/all-MiniLM-L6-v2') self.model = AutoModel.from_pretrained('sentence-transformers/all-MiniLM-L6-v2') def encode_text(self, text): inputs = self.tokenizer(text, return_tensors='pt', truncation=True, padding=True) outputs = self.model(**inputs) return outputs.last_hidden_state.mean(dim=1)
-
Junior Developer (0-2 years)
- Master one framework (Django or React)
- Understand database basics
- Write clean, readable code
- Learn version control (Git)
-
Mid-level Developer (2-5 years)
- Full-stack development
- API design and testing
- Performance optimization
- Code review and mentoring
-
Senior Developer (5+ years)
- System architecture
- Technical leadership
- Cross-functional collaboration
- Innovation and research
-
Machine Learning Engineer
- Focus on ML model development
- Learn MLOps and model deployment
- Master statistical analysis
- Contribute to ML research
-
Full-Stack Developer
- Expert in both frontend and backend
- DevOps and cloud platforms
- Performance optimization
- Team leadership
-
Data Scientist
- Statistical analysis and modeling
- Business intelligence
- Experimental design
- Data visualization
This AI E-Commerce Recommendation Engine project demonstrates modern web development practices, combining:
- Backend API development with Django and REST frameworks
- Frontend user interfaces with React and modern JavaScript
- Machine learning algorithms for personalized recommendations
- Database design for efficient data storage and retrieval
- DevOps practices with Docker and containerization
The project serves as an excellent foundation for learning full-stack development, machine learning, and building scalable web applications. Each component can be studied independently and then understood as part of the larger system.
Key Takeaways:
- Separation of Concerns: Frontend, backend, and ML components are distinct but work together
- API-First Design: RESTful APIs enable flexible frontend development
- Data-Driven Features: Machine learning enhances user experience with personalization
- Production Readiness: Docker, caching, and proper error handling prepare for real-world deployment
Continue building on this foundation by exploring advanced topics, contributing to open-source projects, and applying these concepts to your own ideas!
This documentation serves as both a reference guide and learning resource for understanding modern web application development with AI/ML integration.