Learning Objectives

• Implement search, pagination, file upload
• Deploy to Heroku/Vercel
• Configure environment variables
• Application functional locally
• Git repository clean
• Heroku/Vercel account

Step 1: File Upload

python
Run Inline
# backend/upload.py
import os
from flask import Blueprint, request, jsonify
from werkzeug.utils import secure_filename
UPLOAD_FOLDER = 'uploads'
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
upload = Blueprint('upload', __name__)
def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
@upload.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return {'msg': 'No file part'}, 400
    file = request.files['file']
    if file.filename == '':
        return {'msg': 'No selected file'}, 400
    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        file.save(os.path.join(UPLOAD_FOLDER, filename))
        return {'url': f'/uploads/{filename}'}, 201

Step 2: Deploy to Heroku

bash
# Create Procfile
echo "web: gunicorn app:app" > Procfile
# Create runtime.txt
echo "python-3.9.18" > runtime.txt
# Deploy
heroku create your-app-name
git push heroku main
heroku config:set SECRET_KEY=your-secret

• File upload working locally
• App accessible on deployed URL
• Environment variables set correctly
• Database migrations applied on production
• Search/pagination implemented
• File upload working
• Deployed to cloud platform
• README with demo link
• All code on GitHub Join Discord PreviousMilestone 4: Frontend UI & State ManagementNextMilestone 6: Testing & Debugging