Overview

Developed and deployed a full-stack portfolio web application using Flask, integrating backend database management, real-time visitor analytics, and production-level security practices. The project demonstrates end-to-end system design from development to cloud deployment with monitoring and optimization.

The site is currently live at www.mohrafik.it, serving as both my professional resume and a testament to my full-stack engineering capabilities.

Project Summary

• Designed and developed a full-stack portfolio website using Flask (Python), HTML, CSS, and Bootstrap
• Implemented dynamic project rendering using Markdown (.md → HTML pipeline) for scalable content management
• Integrated SQLite/MySQL database for storing contact form submissions and project metadata
• Built a real-time visitor analytics system capturing IP, location, visited routes, and timestamps
• Visualized visitor activity using live tracking and map-based insights
• Deployed application on Railway cloud platform with environment-based configuration
• Implemented secure backend architecture using environment variables and protected routes
• Added anti-spam CAPTCHA validation for contact form submissions
• Designed email notification system (admin alert + auto-reply workflow)
• Built production-level logging system for monitoring user activity and suspicious requests
• Implemented security filtering to block malicious requests (e.g., .env, .git, /debug, /config)
• Configured custom domain (mohrafik.it) with external email service integration

Problem Statement

Modern portfolio websites often lack:
- Real-time user analytics
- Secure backend handling of sensitive data
- Scalable content management
- Production-ready deployment practices

This project addresses these gaps by building a complete, secure, and data-aware web system.

Technical Approach

Backend Development

• Flask-based architecture with modular routing
• SQLAlchemy ORM for database interaction
• Markdown-based content system for dynamic project rendering

Database Design

• Tables: contacts, projects, visitor_logs
• Persistent storage for user queries and analytics

Deployment & DevOps

• Hosted on Railway (cloud platform)
• Environment variables managed securely (SECRET_KEY, DB URL, Mail config)
• GitHub-based CI/CD workflow (auto-deploy on push)

Security Implementation

• Blocked access to sensitive paths (.env, .git, /config, /debug)
• Disabled debug mode in production
• Added request filtering for suspicious traffic
• Implemented input validation + CAPTCHA

Analytics System

• Captures:
• Visitor IP
• Location (Geo-based)
• Pages visited
• Timestamp
• Stored and visualized for monitoring traffic behavior

Automated Communication Pipeline

• Custom Domain Email Integration: Configured and linked a professional Hostinger email environment (contact@mohrafik.it) to handle incoming platform queries reliably.

• API-Driven Auto-Replies: Integrated the Resend API to process contact form submissions backend. Upon submission, the system automatically dispatches a formatted confirmation email to the user, ensuring immediate engagement and a polished, professional user experience.

Tech Stack

• Backend: Python, Flask
• Frontend: HTML5, CSS3, Bootstrap
• Database: SQLite / MySQL
• ORM: SQLAlchemy
• Deployment: Railway
• Version Control: Git, GitHub
• Security: Environment variables, route filtering
• Analytics: Custom visitor tracking system

Key Achievements

• Built a production-ready web application from scratch
• Implemented real-time analytics system without third-party tools
• Successfully deployed with custom domain integration
• Achieved secure handling of sensitive data and routes
• Demonstrated end-to-end full-stack development capability

Applications

• Personal portfolio hosting
• Web analytics tracking system
• Secure Flask-based web applications
• Scalable content-driven platforms

Future Improvements

• Add interactive analytics dashboard with charts
• Integrate AI-based visitor behavior insights
• Add rate limiting and IP blocking system

Project Link

View Project on GitHub