Published

Building the Web App

Take a linear programming Python script and turn it into a mobile-friendly web application.

Sports AnalyticsPythonLinear ProgrammingPuLPOptimization

This blog post belongs to a four-part series: Softball Pulp

  1. Coaching Headaches
  2. Formalizing the Lineup Problem
  3. Solving the Lineup Problem
  4. Building the Web App (this page)

TODO: This is AI-generated placeholder content. It needs to be replaced with real content.

Next Steps: Building the Web Application

After solving the optimization problem with PuLP, the next step was building a web application so my teammates could easily access the lineups on their phones during games. I chose a simple, server-side rendered approach:

Flask (Web Framework)

Flask is a lightweight Python web framework that makes it easy to build web applications. Since the optimization logic was already written in Python (using PuLP), Flask was a natural choice. The application flow is straightforward:

  1. Users input player names, genders, and position preferences via web forms
  2. Users rank players by skill level (rankings are kept private to avoid hurt feelings)
  3. Flask runs the PuLP optimization on the server
  4. Results are rendered and displayed in a mobile-friendly format

Pug Templating & Server-Side Rendering

Instead of building a complex single-page application (SPA), I used Pug (formerly Jade) as a templating engine. Pug provides a clean, indentation-based syntax for writing HTML templates. The key advantages:

  • Server-side rendering: HTML is generated on the server and sent to the browser, so the app works without JavaScript
  • Simple deployment: No build process or client-side framework complexity
  • Fast initial load: Users see content immediately without waiting for JavaScript bundles to download and execute
  • Mobile-friendly: Perfect for quickly checking lineups on a phone at the softball field

Here’s a simplified example of a Pug template:

extends layout

block content
  h1 Batting Order
  ol
    each player in battingOrder
      li= player.name

Pico CSS (Styling)

For styling, I used Pico CSS, a minimal CSS framework that provides beautiful defaults with almost no classes needed. It’s perfect for small projects where you want professional-looking UI without the overhead of larger frameworks.

Web Hosting & Deployment

The application is deployed as a simple Flask app, which can be hosted on platforms like:

  • DigitalOcean App Platform: Easy deployment with automatic HTTPS
  • Heroku: Simple git-based deployment (though pricing has changed recently)
  • Railway: Modern platform with generous free tier
  • Traditional VPS: Deploy with gunicorn + nginx for full control

The entire stack (PuLP + Flask + Pug + Pico CSS) is simple to maintain, costs almost nothing to host, and provides exactly what’s needed: a fast, mobile-friendly way to share optimized softball lineups with the team.

Check out the live application: softball-optimization.alexandershank.com