- Project Introduction
- System Architecture
- Core Features
- Technical Implementation
- API Endpoints
- Frontend Interface
- Data Flow
- Key Technologies
- Use Cases
- Future Enhancements
A flexible, feature-rich mock API server designed for testing and development purposes. It simulates a complete game store backend with a beautiful web interface, making it perfect for frontend development, API design prototyping, and learning REST principles.
- Frontend developers often need to wait for backend APIs to be ready
- Testing real APIs can be expensive and time-consuming
- Learning REST concepts requires hands-on practice with real endpoints
- Prototyping API designs needs quick iteration without complex setup
A lightweight, configurable mock server that:
- Provides 12 working REST endpoints out of the box
- Includes a professional dark-themed web interface
- Supports real data manipulation (CRUD operations)
- Requires zero database setup - runs entirely in-memory
- Can be configured via simple JSON files
┌─────────────────────────────────────────────────────────────┐
│ CLIENT LAYER │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ Web Browser │ │ REST Client │ │
│ │ (Frontend UI) │ │ (curl/Postman) │ │
│ └────────┬─────────┘ └────────┬─────────┘ │
└───────────┼──────────────────────────────┼──────────────────┘
│ │
│ HTTP Requests │
└──────────────┬───────────────┘
│
┌──────────────────────────▼───────────────────────────────────┐
│ APPLICATION LAYER │
│ ┌────────────────────────────────────────────────────────┐ │
│ │ MockRequestHandler (HTTP Server) │ │
│ │ • Routes requests to appropriate handlers │ │
│ │ • Manages CORS and HTTP methods │ │
│ │ • Logs all requests │ │
│ └────────────────────────────────────────────────────────┘ │
│ │ │
│ ┌─────────────────┼─────────────────┐ │
│ │ │ │ │
│ ┌──────▼──────┐ ┌─────▼──────┐ ┌─────▼──────┐ │
│ │ Wishlist │ │ Games │ │ Template │ │
│ │ Manager │ │ CRUD │ │ Engine │ │
│ └─────────────┘ └────────────┘ └────────────┘ │
└───────────────────────────────────────────────────────────────┘
│
┌──────────────────────────▼───────────────────────────────────┐
│ DATA LAYER │
│ ┌──────────────────┐ ┌──────────────────┐ │
│ │ In-Memory │ │ Configuration │ │
│ │ Database │ │ Files (JSON) │ │
│ │ (98 Games) │ │ • config.json │ │
│ └──────────────────┘ │ • GAMES.JSON │ │
│ └──────────────────┘ │
└───────────────────────────────────────────────────────────────┘
- Built on Python's
http.servermodule - Handles GET, POST, DELETE, OPTIONS methods
- Implements CORS for cross-origin requests
- Routes requests to specialized handlers
- MockRequestHandler: Main request processor
- Parses URLs and query parameters
- Manages request body (JSON)
- Sends formatted JSON responses
- WishlistManager: Manages wishlist operations (add/remove/view)
- MockServerConfig: Handles configuration and database operations
- TemplateEngine: Renders dynamic responses with variables
- RequestLogger: Tracks all API requests
- In-Memory Database: 98 game records loaded at startup
- Wishlist Storage: Thread-safe in-memory list
- Configuration: JSON-based endpoint definitions
- Retrieve all games
- Filter by new releases
- Filter by highest rated
- View games with discounts
- Search by title
- Filter by genre
- Submit game reviews
- Add games to wishlist
- View wishlist (starts empty)
- Add to wishlist (real storage)
- Remove from wishlist (real deletion)
- Health check
- View request logs
- Hot-reload configuration
- Wishlist: Actual add/remove functionality that persists during session
- Games CRUD: Create and delete games from the database
- Thread-Safe: All operations use locks for concurrent access
- Professional dark theme UI
- Auto-generated parameter forms
- Real-time response viewer
- Server health monitoring
- Formatted JSON display with syntax highlighting
- Hot-reload configuration without restart
- Request logging with timestamps
- Latency simulation (configurable per endpoint)
- Failure rate simulation for testing error handling
- CORS enabled by default
# main.py
def main():
# Load configuration
config = MockServerConfig('config/config.json')
logger = RequestLogger()
wishlist_manager = WishlistManager()
# Set class variables
MockRequestHandler.config = config
MockRequestHandler.logger = logger
MockRequestHandler.wishlist_manager = wishlist_manager
# Start HTTP server
server = HTTPServer(('', 8000), MockRequestHandler)
server.serve_forever()1. Client sends HTTP request
↓
2. MockRequestHandler receives request
↓
3. Parse URL, query params, and body
↓
4. Check for special endpoints (wishlist, CRUD, system)
↓
5. If special: Execute handler directly
↓
6. If normal: Find endpoint in config
↓
7. Apply latency simulation (if configured)
↓
8. Apply failure simulation (if configured)
↓
9. Render response with template engine
↓
10. Send JSON response to client
↓
11. Log request (method, path, status, latency)
class WishlistManager:
def __init__(self):
self.wishlist = [] # Starts empty
self.lock = threading.Lock() # Thread-safe
def add(self, title):
# Check for duplicates
# Add with timestamp and random price
# Return success/failure
def remove(self, title):
# Find and remove item
# Return success/failure
def get_all(self):
# Return all itemsSupports dynamic variables in responses:
{{timestamp}}- Current ISO timestamp{{query.param}}- Query parameter values{{random_int}}- Random integer (1-100){{random_price}}- Random price ($20-$80){{uuid}}- Random UUID{{database}}- Entire game database{{database_count}}- Total games count{{database_filter:field:value}}- Filtered results{{database_find:field:value}}- Single record
All shared resources use locks:
with self.lock:
# Critical section
# Modify shared dataDescription: Retrieve all games from database
Response:
{
"games": [...],
"timestamp": "2025-12-04T...",
"total": 98
}Description: Filter games marked as new releases
Response: List of new release games
Description: Get top-rated games
Response: List of highest-rated games
Description: View all games with discount information
Response: Games with discount data
Description: Search for a specific game by exact title
Parameters: title (required)
Example: /api/games/search?title=Minecraft
Description: Filter games by genre
Parameters: genre (required)
Example: /api/games/genre?genre=RPG
Description: Submit a game review
Parameters:
title(required)review(required)
Description: Add game to wishlist
Parameters: title (required)
Description: View all wishlist items (starts empty)
Response:
{
"wishlist": [],
"total_items": 0,
"timestamp": "2025-12-04T..."
}Description: Add game to wishlist (real storage)
Response: Success message with updated count
Description: Remove game from wishlist (real deletion)
Response: Success message with updated count
Description: Server health check
Response:
{
"status": "healthy",
"timestamp": "...",
"uptime": 42,
"request_id": "uuid"
}Description: View last 100 request logs
Response: Array of log entries with timestamps
Description: Hot-reload configuration without restart
Response: Confirmation message
-
Endpoint Browser
- Organized by category (Games API, Actions, Wishlist, System)
- Click any endpoint to load it
- Active endpoint highlighted
-
Request Panel
- Method badge (GET, POST, DELETE)
- Full URL display
- Auto-generated parameter forms
- JSON body editor (for POST requests)
- Send request button
-
Response Panel
- HTTP status code display
- Response time in milliseconds
- Formatted JSON with syntax highlighting
- Scrollable content area
-
Server Status
- Real-time health indicator
- Online/offline status
- Auto-refresh every 10 seconds
- HTML5: Semantic structure
- CSS3: Custom dark theme with CSS variables
- Vanilla JavaScript: No frameworks, pure JS
- Fetch API: Modern HTTP requests
- JSON: Data interchange format
1. User opens http://localhost:8000
↓
2. Frontend loads and checks server status
↓
3. User clicks "All Games" endpoint
↓
4. Request panel updates with GET method
↓
5. User clicks "Send Request"
↓
6. JavaScript sends fetch request
↓
7. Response displays in formatted JSON
↓
8. Status code and timing shown
┌──────────┐
│ User │
│ clicks │
│ "Add to │
│Wishlist" │
└────┬─────┘
│
▼
┌─────────────────────────────────┐
│ Frontend (app.js) │
│ • Collects title parameter │
│ • Builds URL with query param │
│ • Sends POST request │
└────┬────────────────────────────┘
│
▼ POST /api/games/wishlist?title=Minecraft
┌─────────────────────────────────┐
│ MockRequestHandler │
│ • Parses URL and params │
│ • Identifies wishlist endpoint │
│ • Extracts title from query │
└────┬────────────────────────────┘
│
▼
┌─────────────────────────────────┐
│ WishlistManager │
│ • Acquires thread lock │
│ • Checks for duplicates │
│ • Adds item with timestamp │
│ • Releases lock │
│ • Returns success │
└────┬────────────────────────────┘
│
▼
┌─────────────────────────────────┐
│ Response Handler │
│ • Formats JSON response │
│ • Includes success message │
│ • Adds wishlist count │
│ • Sends HTTP 200 OK │
└────┬────────────────────────────┘
│
▼
┌─────────────────────────────────┐
│ Frontend (app.js) │
│ • Receives response │
│ • Parses JSON │
│ • Displays formatted result │
│ • Shows response time │
└─────────────────────────────────┘
| Technology | Purpose | Why Chosen |
|---|---|---|
| Python 3 | Programming language | Simple, readable, great for rapid development |
| http.server | HTTP server module | Built-in, no external dependencies |
| JSON | Data format | Universal, human-readable, easy to parse |
| Threading | Concurrency | Thread-safe operations for shared data |
| datetime | Timestamps | ISO format timestamps for consistency |
| Technology | Purpose | Why Chosen |
|---|---|---|
| HTML5 | Structure | Semantic, accessible markup |
| CSS3 | Styling | Modern features, CSS variables for theming |
| JavaScript (ES6+) | Interactivity | Native fetch API, no framework overhead |
| Fetch API | HTTP requests | Modern, promise-based, clean syntax |
| File | Purpose |
|---|---|
config.json |
Endpoint definitions and responses |
GAMES.JSON |
Game database (98 records) |
config_schema.json |
JSON schema for validation |
Scenario: Building a game store UI
Benefit: Test UI without waiting for backend team
Example:
// Frontend can immediately start fetching data
fetch('http://localhost:8000/api/games')
.then(res => res.json())
.then(data => renderGames(data.games));Scenario: Designing REST API structure
Benefit: Quickly iterate on endpoint design
Example: Add new endpoint in config.json, reload, test immediately
Scenario: Teaching HTTP methods and REST concepts
Benefit: Hands-on practice with real endpoints
Topics Covered:
- GET vs POST vs DELETE
- Query parameters
- Request/response bodies
- HTTP status codes
- CORS
Scenario: Testing how frontend handles API responses
Benefit: Simulate various scenarios (success, errors, latency)
Example: Set failure_rate: 0.5 to test error handling
Scenario: Demonstrating API concepts
Benefit: Professional UI, no complex setup
Features: Live requests, formatted responses, visual feedback
-
Authentication & Authorization
- JWT token support
- User roles and permissions
- Protected endpoints
-
Database Persistence
- SQLite integration
- Save changes to disk
- Data import/export
-
Advanced Filtering
- Multiple filter criteria
- Sorting options
- Pagination support
-
WebSocket Support
- Real-time updates
- Live notifications
- Server-sent events
-
Enhanced UI
- Request history
- Save favorite requests
- Export responses
- Dark/light theme toggle
-
Testing Tools
- Automated test generation
- Response validation
- Performance metrics
-
Docker Support
- Containerization
- Easy deployment
- Multi-environment configs
-
GraphQL Support
- GraphQL endpoint
- Schema definition
- Query playground
- Total Endpoints: 12 working REST endpoints
- Database Size: 98 game records
- Lines of Code: ~800 (backend + frontend)
- Dependencies: 0 external packages (pure Python stdlib)
- Startup Time: < 1 second
- Memory Footprint: ~15 MB
- Response Time: 10-200ms (configurable)
-
HTTP Protocol Understanding
- Request methods (GET, POST, DELETE)
- Headers and CORS
- Status codes
- Request/response cycle
-
REST API Design
- Resource naming conventions
- Endpoint structure
- Query parameters vs body
- Idempotency
-
Python Web Development
- HTTP server implementation
- Request handling
- JSON processing
- Thread safety
-
Frontend Integration
- Fetch API usage
- Async/await patterns
- Error handling
- DOM manipulation
-
Software Architecture
- Separation of concerns
- Component design
- Data flow
- State management
✅ Zero Dependencies: Runs with Python standard library only
✅ Production-Ready UI: Professional dark theme interface
✅ Real Data Operations: Actual CRUD functionality
✅ Thread-Safe: Concurrent request handling
✅ Hot-Reload: Update config without restart
✅ Comprehensive Logging: Track all requests
✅ Flexible Configuration: JSON-based setup
✅ Cross-Platform: Works on Windows, Mac, Linux
This Game Store Mock API Server demonstrates a complete, production-quality mock API implementation that serves as both a practical development tool and an educational resource. It showcases modern web development practices, clean architecture, and user-friendly design while remaining simple enough for beginners to understand and extend.
The project successfully bridges the gap between learning and real-world application, providing a hands-on platform for understanding REST APIs, HTTP protocols, and full-stack development concepts.
Project Repository: [Your GitHub Link]
Live Demo: http://localhost:8000
Documentation: See /docs folder for detailed guides