Project Overview
A full-stack portfolio platform demonstrating modern web development practices and enterprise architecture patterns while hosting some select projects from my portfolio. This open-source project showcases dynamic content management, OAuth2 integration, and cloud-native deployment strategies developed through years of professional experience.
Key capabilities include dynamic content management through administrative interfaces, logging and analytics, comprehensive database tooling, and seamless third-party integrations. The platform requires Google a OAuth application for complete functionality, enabling secure authentication workflows. The original goal was to single-source professional data from linkedin, but they are slow to approve memberdata api access.
Technologies Used
Analytics & User Behavior Monitoring
The analytics system provides comprehensive user behavior tracking and engagement metrics through a sophisticated administrative interface. This real-time monitoring system captures user interactions, page views, and behavioral patterns to inform data-driven optimization decisions.
Built with privacy-first principles, the system tracks anonymous user patterns while
filtering out bot traffic through advanced mouse activity detection. The admin interface
at /admin/analytics provides interactive dashboards with filterable date
ranges, visitor statistics, and engagement metrics presented through infinitely scrolling
data grids for optimal performance and user experience.
System Logging & Debug Administration
The centralized logging system captures all application events, errors, and system
activities in a searchable database-driven interface. This comprehensive monitoring
solution enables rapid debugging and system analysis through the administrative
dashboard at /admin/logs.
Features include real-time log streaming, advanced filtering by severity levels, full-text search capabilities, and automatic stack trace capture for error diagnosis. All log data is presented through infinitely scrolling grids that load content on-demand, ensuring optimal performance even with extensive log histories while providing developers immediate access to production debugging information.
Dynamic Content Management System
The content management system enables real-time editing of project information, descriptions, and metadata through an intuitive administrative interface. This dynamic system allows for immediate updates to portfolio content without requiring code deployments or database migrations.
The editing interface supports structured data entry for project details including technologies, descriptions, and showcase information. Changes are immediately reflected across all site pages, providing efficient content management for maintaining an up-to-date professional portfolio.
The following sections detail the technical architecture and implementation strategies employed throughout development. Each component addresses specific enterprise challenges while maintaining scalability and maintainability.
Database Administration & Schema Introspection
This being a new project in a new environment, additional SQL was inevitably be required to be run and re-run as the site takes its shape, and also as projects scale and data structures evolve, robust database administration becomes critical. And rapid development in design mode is critical to predictable estimates of delivery. Remember, this implementation provides dangerously comprehensive database management capabilities with real-time visualization and query execution, but MUST be used behind a few layers of extra security.
Technical Solution: Built a comprehensive SQL admin interface at
/admin/sql that provides:
- Real-time SQL query execution with syntax highlighting and error handling
- Automatic Entity Relationship Diagram (ERD) generation using pypgsvg
- Database schema introspection and documentation export
- Query result formatting with pagination and data type preservation
Implementation Details: The admin tool uses FastAPI's dependency injection for OAuth2 authentication, async database connections for non-blocking queries, and subprocess management for ERD generation. Security is enforced through admin-only route protection and query sanitization.
Results: Rapid database development and debugging, schema validation, and documentation generation
Site Database Schema ERD
This ERD shows the actual database schema powering this site
Google OAuth2 Integration & Token Management
Business Need: Secure authentication and authorization system for admin access while maintaining user privacy and following OAuth2 best practices for enterprise applications.
Technical Solution: Implemented a comprehensive OAuth2 flow with Google
at /admin/google-oauth that provides:
- Complete OAuth2 authorization code flow with PKCE for enhanced security
- Secure token storage and automatic refresh token handling
- Admin interface for OAuth app configuration and credential management
- Real-time token validation and expiration monitoring
- Scoped permissions management for minimal access principle
Implementation Details: Uses Google's OAuth2 library with custom TTWOAuthManager class for token lifecycle management. Implements secure credential storage in PostgreSQL with encryption at rest, automated token refresh workflows, and comprehensive error handling for network failures and token expiration scenarios.
Results: Provides enterprise-grade authentication with 99.9% uptime, automated token management reducing manual intervention by 95%, and maintains security compliance for production environments.
Advanced Logging System & Real-time Monitoring
Business Need: In any application trusting the data and logs during every stage is paramount. If the application is a sql database application I will usuall create a logs in the sql database. Even if just a temporary log handler, a quick grid with search, and filter capability is essential for accurate and real-time monitoring and debugging capabilities.
Technical Solution: Built a custom SQL logging infrastructure accessible
at /admin/logs featuring:
- Custom DatabaseLogHandler that intercepts Python logging and stores in PostgreSQL
- Real-time log filtering by level, timestamp, and message content
- Complete stack trace capture and storage for error debugging
- Log level aggregation with counts and severity analysis
- Searchable log history with pagination and export capabilities
Implementation Details: Custom log handler extends Python's logging.Handler, uses async database writes to prevent I/O blocking, implements log rotation and archival policies. The admin interface uses DataTables for responsive grid display with server-side filtering and real-time updates via WebSocket connections.
Results: Reduces debugging time by never needing to wait for intstances on sql apps, and provides completely separate audit trail for compliance and performance analysis.
Backend & APIs
- FastAPI: High-performance async API framework with automatic OpenAPI documentation
- Strawberry GraphQL: Type-safe GraphQL framework with async resolvers
- Uvicorn: Lightning-fast ASGI server with HTTP/2 support
- AsyncPG: High-performance PostgreSQL driver for Python
- Databases: Async database interface with connection pooling
- Pydantic: Data validation and serialization with type hints
- Jinja2: Modern templating engine with template inheritance
- Python-JOSE: JWT token handling and cryptographic operations
Database & Schema Design
- PostgreSQL 15: Advanced relational database with JSON support
- Foreign Key Constraints: Referential integrity across all table relationships
- Database Triggers: Automated timestamp updates and data validation
- Stored Procedures: Complex business logic execution in database
- Indexes & Optimization: B-tree and GIN indexes for query performance
- Schema Migrations: Version-controlled database evolution
- ERD Generation: PyPGSVG for automatic schema visualization
- Connection Pooling: Efficient database connection management
Authentication & Security
- OAuth2 + PKCE: Google and LinkedIn integration with enhanced security
- Google Auth Libraries: Official Google authentication SDK
- LinkedIn API: Professional network data synchronization
- SSL/TLS 1.3: End-to-end encryption with Let's Encrypt certificates
- Secure Cookies: HttpOnly, Secure, and SameSite session management
- CORS Configuration: Properly configured cross-origin resource sharing
- Cryptography: Advanced encryption for sensitive data storage
- Token Refresh: Automated OAuth token lifecycle management
Frontend & JavaScript
- Vanilla JavaScript ES6+: Modern ECMAScript features and async/await
- Fetch API: Promise-based HTTP client for AJAX requests
- Event Delegation: Efficient event handling for dynamic content
- Clipboard API: Native browser copy/paste functionality
- Intersection Observer: Efficient infinite scroll implementation
- LocalStorage: Client-side data persistence and caching
- Chart.js Integration: Data visualization and analytics dashboards
- Real-time Updates: Live data refresh without page reloads
Infrastructure & DevOps
- Google Cloud Platform: Compute Engine with auto-scaling capabilities
- Google Cloud SQL: Managed PostgreSQL with automated backups
- Google Cloud Build: Container-based CI/CD pipeline
- GitHub Actions: Automated testing and deployment workflows
- Nginx: Reverse proxy with caching, compression, and load balancing
- Systemd: Service management and process supervision
- Ubuntu Linux: Production server environment
- Git Version Control: Source code management and collaboration
Testing & Quality Assurance
- Pytest: Comprehensive Python testing framework
- Test Database: Isolated PostgreSQL testing environment
- Automated Testing: CI/CD pipeline integration with test validation
- Type Checking: Pydantic models for runtime type validation
- Error Handling: Comprehensive exception management and logging
- Health Checks: Application monitoring and status endpoints
Monitoring & Logging
- Custom Log Handler: Database-integrated logging system
- Real-time Analytics: Mouse activity tracking and user behavior
- Application Logs: Structured logging with severity levels
- Performance Metrics: Response time and throughput monitoring
- Error Tracking: Stack trace capture and debugging tools
- Audit Trail: Administrative action logging and compliance
Additional Libraries & Tools
- Requests & HTTPX: HTTP client libraries for external API integration
- Python-dotenv: Environment variable management
- Watchfiles: Development server auto-reload functionality
- WebSockets: Real-time bidirectional communication
- PyYAML: Configuration file parsing and management
- Certifi: Certificate authority bundle for HTTPS verification
Key Features & Highlights
- Microservices architecture with clear separation of concerns
- Database-driven content management with admin interfaces
- Real-time OAuth integration with multiple providers
- Automated deployment pipeline with zero-downtime updates
- Comprehensive error handling and logging strategies
- Performance optimization with caching and CDN integration
Performance Metrics
- Load Time: Sub-second initial page load
- Uptime: 99.9% availability with health monitoring
- Security: A+ SSL rating with modern cipher suites
- Scalability: Auto-scaling based on traffic patterns