Contributing to BrainFuel

Git Workflow

Branches

• develop - Development branch. All work happens here.
• production - Production/live deployment branch. Always synced with develop.
• main - DEPRECATED - DO NOT USE

Workflow Rules

IMPORTANT: Always sync develop to production

1. Make all changes in the develop branch
2. Test your changes locally
3. Commit and push to develop
4. ALWAYS immediately sync to production:

   git checkout production
   git merge develop
   git push
   git checkout develop

Quick sync command:

git checkout production && git merge develop && git push && git checkout develop

Never use or push to main branch - Only develop and production are used.

Development Setup

Running Locally

The app is a static HTML/CSS/JS application. Serve it with any HTTP server:

Python:

cd c:/Projects/BrainFuel
python -m http.server 8000
# Open http://localhost:8000

Node.js:

npx serve c:/Projects/BrainFuel

VS Code:

• Install "Live Server" extension
• Right-click index.html → "Open with Live Server"

PlantUML Diagrams

Generating Diagrams

After modifying any .puml files, regenerate the PNG images:

node generate-diagrams.js

This script:

• Finds all .puml files in diagrams/
• Converts them to PNG using PlantUML
• Outputs to images/diagrams/ (preserving directory structure)

Requirements

• Node.js
• Java (for PlantUML)
• PlantUML JAR file at plantuml.jar in project root

Mobile Responsiveness

The app is optimized for mobile devices:

• Body padding: 10px desktop, 5px mobile
• View padding: 30px desktop, 15px mobile
• Tab buttons: Responsive sizing with reduced padding on mobile
• Exercise cards: 2-column grid on desktop, single column on mobile

Test mobile layouts by resizing browser or using device emulation tools.

Code Style

• Use clear, descriptive variable names
• Add comments for complex logic
• Keep functions focused and single-purpose
• Test on both desktop and mobile viewports