An interactive web-based educational game designed to teach FinOps (Financial Operations) concepts through problem-solving and persona matching, built with Streamlit for a modern, responsive user experience.
"FinOps City: Match & Solve" is an educational game that helps players learn about FinOps roles and responsibilities by matching real-world cloud cost management problems to the appropriate FinOps personas. Players engage in a gamified experience with instant feedback, mini-missions, and scoring.
- Understand FinOps personas and their responsibilities
- Learn which persona is best suited for different cloud cost challenges
- Gain knowledge of practical cost optimization strategies
- Understand the collaborative nature of FinOps
- Frontend & Backend: Streamlit (Python)
- Styling: Custom CSS with modern gradients and animations
- Containerization: Docker
- Port: 8501 (Streamlit default)
- Docker
-
Clone or navigate to the project directory
cd finops-persona -
Build and run the application
docker build -t finops-game-streamlit . docker run -p 8501:8501 finops-game-streamlit -
Access the game Open your browser and navigate to:
http://localhost:8501 -
Stop the application Press
Ctrl+Cin the terminal or run:docker ps docker stop <container_id>
cd finops-persona
chmod +x start.sh
./start.shcd finops-persona
docker build -t finops-game-streamlit .
docker run -p 8501:8501 finops-game-streamlitcd finops-persona
docker build -t finops-game-streamlit .
docker run -d -p 8501:8501 --name finops-game-streamlit-container finops-game-streamlitcd finops-persona
pip install -r requirements.txt
streamlit run streamlit_app.py- Start Screen: Read the introduction and game rules
- Matching Phase: Match 5 cloud cost problems to the correct FinOps personas
- Feedback: Receive instant feedback with explanations
- Mini-Missions: Complete short scenarios for bonus points
- Results: View your final score and learning outcomes
- Unexpected Cost Spike: Cloud bill jumped by 50% due to unoptimized resources
- Budget Forecasting Issue: Need to predict next quarter's cloud spending
- Lack of Cost Visibility: Teams unaware of cloud usage costs
- Resource Scaling Dilemma: Scale resources for a product launch while controlling costs
- Compliance Gap: Risk of violating cloud spending policies
- Cloud Engineer (Core): Optimizes cloud resources and infrastructure
- Finance Analyst (Allied): Handles budgeting, forecasting, and financial planning
- Product Manager (Allied): Balances business needs with cost considerations
- Procurement Specialist (Allied): Manages vendor relationships and policies
- Executive Leader (Allied): Ensures accountability and strategic alignment
- Correct Match: 10 points
- Mini-Mission Success: 5 points
- Maximum Score: 75 points (5 problems × 15 points each)
finops-persona/
├── streamlit_app.py # Main Streamlit application
├── requirements.txt # Python dependencies
├── Dockerfile # Container configuration
├── start.sh # Easy startup script
├── README.md # This file
└── one-pager.txt # Game design document
- Modern UI: Beautiful gradients, animations, and responsive design
- Interactive Cards: Click-to-select interface for problems and personas
- Real-time Feedback: Instant visual feedback with color-coded results
- Progress Tracking: Visual progress bar and score display
- Mini-Missions: Engaging scenarios that test practical knowledge
- Comprehensive Results: Detailed match summary and learning outcomes
If you want to run the application without Docker:
-
Install Python dependencies
pip install -r requirements.txt
-
Run the Streamlit app
streamlit run streamlit_app.py
-
Access the application Open your browser and navigate to:
http://localhost:8501
- Gradient Headers: Beautiful gradient backgrounds for main sections
- Card-based Design: Modern card layout with hover effects
- Color-coded Feedback: Green for success, red for errors
- Progress Visualization: Animated progress bar
- Responsive Layout: Works seamlessly on desktop and mobile
- Intuitive Navigation: Clear screen transitions
- Instant Feedback: Immediate response to user actions
- Visual Hierarchy: Clear distinction between different elements
- Accessibility: High contrast and readable fonts
- Smooth Animations: Subtle transitions for better engagement
The application can be configured using environment variables:
PYTHONUNBUFFERED=1- Ensures Python output is not buffered (useful for Docker)
The default port is 8501 (Streamlit default). To change it:
- Update the
EXPOSEline inDockerfile - Update the port in the
docker runcommand - Update the port in
start.sh
-
Port already in use
# Check what's using port 8501 lsof -i :8501 # Kill the process or change the port
-
Docker build fails
# Clean Docker cache docker system prune -a # Rebuild without cache docker build --no-cache -t finops-game-streamlit .
-
Streamlit app doesn't load
- Check browser console for errors
- Verify the app is running:
curl http://localhost:8501/ - Check Docker logs:
docker logs finops-game-streamlit-container
View application logs:
docker logs finops-game-streamlit-containerThis game teaches:
- FinOps Fundamentals: Understanding of cloud financial operations
- Role Clarity: Clear distinction between different FinOps personas
- Problem-Solving: How to approach different cloud cost challenges
- Collaboration: The importance of teamwork in FinOps
- Best Practices: Practical strategies for cost optimization
- Modern UI: Complete redesign with gradients and animations
- Better UX: Improved navigation and feedback systems
- Responsive Design: Works perfectly on all screen sizes
- Real-time Updates: Instant feedback and progress tracking
- Simplified Deployment: Single Streamlit app instead of separate frontend/backend
- Single Codebase: Everything in one Python file
- No API Calls: Direct state management within Streamlit
- Better Performance: Faster loading and interactions
- Easier Maintenance: Simplified architecture
- Docker Optimization: Smaller, more efficient container
To contribute to this project:
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is designed for educational purposes. Feel free to use and modify for learning FinOps concepts.
If you encounter any issues or have questions:
- Check the troubleshooting section above
- Review the browser console for errors
- Verify Docker is properly installed
- Ensure port 8501 is available
Happy Learning! 🎓