Mako-Coders

A Flask-based HTML profile and game builder for student coders aged 10-17. Micro:Bit-style split-screen editor: write HTML on the left, see it live on the right!

What Is This?

Mako-Coders is a local web app for a classroom of up to 100 students. Each student builds:

• A personal profile page using raw HTML
• HTML games using HTML + JavaScript
• An image gallery with uploaded images and animated GIFs

Students share their pages with friends (not a public feed — just your classmates). The coding instructor can see and moderate everything.

Features

For Students

• Split-screen editor — type HTML code on the left, see the live result on the right (updates as you type!)
• Profile page builder — make your own personal home page with HTML
• Game builder — create playable HTML games with JavaScript
• Image uploads — upload PNG, JPG, GIF, and WebP images to use in your pages
• Friends system — add classmates as friends, see their pages and play their games
• Gallery — browse your friends' published pages and games
• No external feed — only see content from your friends, not the whole internet

For Teachers

• Dashboard — see all students, all pages, all images, and all moderation flags
• Moderation queue — review flagged pages, approve or remove them
• Student management — reset passwords, delete students, view their content
• Image moderation — view and delete any uploaded image
• Class settings — set max students, toggle GIF uploads, toggle game uploads
• Print-friendly reports — print class rosters and page listings

Quick Start

# 1. Install dependencies
pip install -r requirements.txt

# 2. Run the server
python app.py

# 3. Open in your browser
# Go to http://localhost:5000

Demo Accounts

Role	Username	Password
Teacher	teacher	teach123
Student	alex	supersecret
Student	sam	supersecret
Student	jordan	supersecret
Student	casey	supersecret
Student	maya	supersecret

Students can also register their own accounts from the Register page.

How the Split-Screen Editor Works

The editor works like a Micro:Bit or CodePen interface:

1. Left pane — A text area where you type HTML code
2. Right pane — An iframe that shows your code rendered as a live web page
3. As you type, the preview updates automatically (after a short pause)
4. Click Save to save your work to the database
5. Click Publish to share it with your friends

The editor supports both profile pages and game pages. Games can include JavaScript — the preview iframe runs your code in a sandboxed environment.

Project Structure

mako-coders/
├── app.py                 # Flask application (all routes)
├── database.py            # Database layer (schema, CRUD, seeding)
├── requirements.txt       # Dependencies (Flask, Werkzeug, pytest)
├── PROMPTS.md             # 30 testable build prompts
├── .gitignore
├── data/                  # SQLite database (gitignored)
├── static/
│   ├── css/style.css      # Kid-friendly responsive stylesheet
│   ├── js/editor.js       # Split-screen editor logic
│   └── uploads/           # Student image uploads (gitignored)
├── templates/
│   ├── base.html          # Shared layout with nav bar
│   ├── index.html         # Landing page
│   ├── login.html         # Login form
│   ├── register.html      # Student registration
│   ├── dashboard.html     # Student dashboard
│   ├── editor.html        # Split-screen code editor (key feature!)
│   ├── preview.html       # Full-page profile preview
│   ├── view_page.html     # View a friend's profile or game
│   ├── gallery.html       # Friends' pages and games gallery
│   ├── friends.html       # Friend list and requests
│   ├── my_images.html     # Student image gallery + upload
│   ├── teacher_dashboard.html    # Teacher overview
│   ├── teacher_view_page.html    # Teacher page moderation
│   ├── teacher_students.html     # Student management
│   ├── teacher_flags.html         # Moderation queue
│   ├── teacher_images.html        # Image moderation
│   └── teacher_settings.html      # Class settings
└── tests/
    └── test_mako_coders.py  # 98 tests covering all 30 prompts

Running the Tests

python -m pytest tests/ -v

All 98 tests pass, covering:

• Database CRUD (users, pages, images, friendships, flags, settings)
• Authentication (login, logout, session management)
• Registration (validation, duplicate prevention, capacity limits)
• Split-screen editors (profile and game)
• Image uploads (valid/invalid extensions, GIF toggle)
• Friends system (requests, accept, remove, visibility)
• Gallery (friends-only content visibility)
• Teacher routes (role gating, dashboard, moderation)
• Settings enforcement (max students, GIF toggle)
• Full integration flows (student + teacher)

Tech Stack

• Backend: Flask 3.0+ (Python)
• Database: SQLite (no external database server needed)
• Frontend: Vanilla HTML/CSS/JS (no frameworks, no CDNs)
• Auth: Session-based with Werkzeug password hashing
• File uploads: Werkzeug secure filename + extension validation

Security Notes

• Passwords are hashed with Werkzeug's salted PBKDF2
• Session IDs are regenerated on login (prevents session fixation)
• Debug mode is off by default (enable with FLASK_DEBUG=1)
• File uploads are validated by extension and size-limited (5MB)
• Student pages are sandboxed in iframes with allow-scripts allow-same-origin
• Teacher routes are protected with role-based access control

Made for Learning

This project is designed for students aged 10-17 who are learning HTML for the first time. The interface is simple, the colors are bright, and the split-screen editor makes it immediately clear what your code does. No prior experience needed.

License

MIT