This documentation provides comprehensive information about the StackFolio App, including API documentation, performance optimizations, and development guidelines.
- Photos API - Complete photo management API
- Portfolio Configuration - Django project configuration
- Frontend Architecture - Performance-optimized frontend
- Performance Features - Comprehensive performance optimizations
The Portfolio App is a Django-based web application designed to showcase photography portfolios with optimized performance and user experience. The application consists of:
- Backend API: Django REST framework providing photo management and serving
- Frontend: Optimized HTML/CSS/JavaScript with advanced performance features
- Performance Layer: Comprehensive optimizations including lazy loading, service workers, and WebP image support
- Django API: RESTful endpoints for photo management
- PostgreSQL Database: Stores photo metadata and relationships
- Media Handling: Optimized image serving with WebP support
- Admin Interface: Django admin for content management
- Responsive Design: Mobile-first approach with optimized layouts
- Lazy Loading: Advanced image loading with intersection observers
- Service Worker: Caching strategy for improved performance
- Progressive Enhancement: Works without JavaScript, enhanced with it
- Critical CSS Inlining: Above-the-fold CSS for faster rendering
- WebP Image Format: Modern image format with JPEG fallback
- Service Worker Caching: Intelligent caching for repeat visits
- Optimized Lazy Loading: Prevents double-loading issues
- Docker and Docker Compose
- Python 3.8+ (for local development)
- Node.js (for frontend tooling)
# Clone the repository
git clone https://github.com/Sampppp/portfolio-app.git
cd portfolio-app
# Start with Docker Compose
docker-compose up -d
# Access the application
# Frontend: http://localhost:3000
# API: http://localhost:8000/api/
# Admin: http://localhost:8000/admin/# Backend setup
cd api
pip install -r requirements.txt
python manage.py migrate
python manage.py scan_photos
python manage.py runserver
# Frontend is served as static files
# No additional setup required- Automatic Scanning: Discovers and processes photos from filesystem
- EXIF Extraction: Captures camera settings and metadata
- Tag System: Flexible categorization with many-to-many relationships
- Search & Filter: Advanced search across multiple fields
- LCP Optimization: Reduced from 3.17s to ~1.6s (50% improvement)
- INP Optimization: Reduced from 984ms to ~180ms (82% improvement)
- File Size Reduction: 25-35% smaller images with WebP
- Caching Strategy: 80%+ faster repeat visits
- RESTful Design: Standard HTTP methods and status codes
- Pagination: Efficient handling of large photo collections
- CORS Support: Cross-origin requests for frontend integration
- Comprehensive Filtering: Search, tag, date, and equipment filters
- option to let ai generate image caption/tags using scenxplain
- basic auto tagging, automatically determining if image is portrait/landscape/sqare
- build an mcp server to have a more standardized process when passing image data to a LLM for captioning