Birthday Website - Rais Adli Portfolio

The Challenge

Creating a personalized birthday website required deploying a Flask application to the web and implementing a scalable image upload system - all while keeping costs at zero. The challenge was to navigate free-tier hosting services, integrate cloud storage for images, and learn the deployment workflow from development to production without prior hosting experience.

The Solution

I built a full-stack Flask application and deployed it on a free-tier hosting platform, integrating Cloudflare R2 object storage for handling image uploads. The project involved learning the complete deployment lifecycle - from local development to production configuration, environment variable management, and cloud storage SDK integration. The result is a fully functional web application hosted at zero cost with scalable storage infrastructure.

🚀

Free-Tier Deployment

Successfully deployed Flask application on free hosting service, learning configuration management and production deployment workflows

☁️

Cloudflare R2 Integration

Implemented object storage with Cloudflare R2 for scalable image uploads using boto3 SDK and presigned URLs

🔧

Environment Configuration

Learned proper environment variable management, secret handling, and production vs development configuration

🎨

Custom Frontend

Designed and implemented responsive HTML/CSS interface with image gallery and birthday celebration theme

Features in Action

Explore the birthday website's interactive features and cloud storage integration

Click image to enlarge

Welcome Page

Landing page with birthday celebration theme featuring responsive design and call-to-action to begin the experience

Personalized Letter

Custom birthday message page with heartfelt content rendered using Flask Jinja2 templating for dynamic personalization

Interactive Activity

Engaging birthday activity featuring JavaScript interactivity and responsive design for mobile compatibility

Upload Image

Memory storage feature allowing users to upload and preserve special moments through drag-and-drop functionality with Cloudflare R2 integration

Riddle Challenge

Interactive riddle game with JavaScript validation and Flask backend for answer verification and progress tracking

Photo Gallery

Responsive image gallery displaying photos stored in Cloudflare R2 with grid layout and lightbox preview functionality

Cloudflare R2 Storage Backend

Object storage interface showing uploaded images organized in metadata folder, demonstrating boto3 SDK integration with S3-compatible API

How It Works

01

Flask Application Development

Built a Flask web application with routes for displaying birthday content, handling image uploads, and rendering gallery pages. Implemented proper request handling, form processing, and file validation for secure image uploads.

02

Cloudflare R2 Storage Setup

Configured Cloudflare R2 bucket for object storage, integrated boto3 S3-compatible SDK for file uploads, and implemented secure access with API tokens. Used presigned URLs for temporary image access and public bucket policies for gallery display.

03

Hosting Platform Deployment

Researched and configured free-tier hosting options, set up deployment pipelines, configured environment variables for production, and learned about WSGI servers, process management, and production best practices.

04

Frontend & User Experience

Designed responsive birthday-themed interface with HTML/CSS, created image gallery with grid layout, added upload forms with validation feedback, and optimized for mobile viewing experience.

Technical Implementation

Technology Stack

Flask Framework

Purpose: Python web framework for building the application backend and handling HTTP requests.

Implementation: Routes for homepage, upload handling, gallery display, and error pages with Jinja2 templating.

Cloudflare R2 Object Storage

Purpose: Scalable cloud storage for user-uploaded images without using local server storage.

Implementation: boto3 SDK integration with S3-compatible API, bucket configuration, and secure file upload handling.

Free-Tier Hosting

Purpose: Cost-free production deployment with automatic scaling and uptime monitoring.

Features: Environment variable configuration, WSGI server setup, automated deployments from GitHub, and production logging.

Deployment Features

Environment Variables: Secure storage of API keys and configuration secrets
File Upload Validation: Size limits, file type checking, and sanitization
Error Handling: Custom error pages and graceful failure handling
Responsive Design: Mobile-first CSS with grid layouts for image gallery

Key Learning Outcomes

💡

The Challenge

Learning the complete deployment lifecycle from scratch - from local development to production hosting. Understanding cloud storage integration, environment configuration, and the differences between development and production environments.

🛠️

Skills Developed

Flask application deployment to production
Cloudflare R2 object storage integration with boto3
Free-tier hosting platform configuration
Environment variable and secret management
File upload handling and validation
Production debugging and logging

📈

Growth & Impact

This project taught me the real-world skills of deploying applications to production. I learned that development is only half the battle - deployment, configuration, and maintenance are equally critical. The experience of integrating cloud services like Cloudflare R2 gave me hands-on exposure to modern cloud infrastructure and taught me to navigate documentation, SDK integration, and troubleshooting production issues.

Project Resources

View Source Code

Explore the Flask application and deployment configuration

← Back to All Projects