About Pass the Pigs Online
This is a personal project to create a web-based version of the classic game, Pass the Pigs. The MVP is a single-player version with a target score of 100. It's designed to be simple, fast, and mobile-friendly.
Feel free to toss the virtual pigs and push your luck to reach the target score before a Pig Out ends your turn!
I did not write any of the code for this project.
I used AI for the code-generation and imagery (pig positions).
The goal of the project was to ship something "vibe-coded". You'll find a few reflections below about the process of getting this live.
Project tools
- Code generation: Google Gemini and GitHub Copilot
- Image generation: Google Gemini
- Developing look and feel: Lovable / Figma Make / Bolt
- Project requirements doc: ChatPRD (although I didn't use this beyond the first prompt to Gemini)
Tech stack
- Backend: Python (Flask)
- Frontend: HTML, CSS, JavaScript
- Templating: Jinja2 (Flask templates)
- Styling: Custom CSS
- Image Assets: AI-generated PNGs
- Environment: Virtualenv (.venv)
- Other Tools: Markdown for content pages
Project images
The initial sketch - I gave this to the vibe-coding tools as a prompt.
Lovable Lovable did a decent first attempt. I asked for a 3D animated version (V2) but at this point things went west.
V1
V2
Figma Make / Bolt.new
Figma Make and Bolt.new both produced very similar results. Perhaps they connect to the same API behind the scenes. I wasn't impressed with their attempts, Lovable definitely got closest to the look-and-feel I was after, not to mention the more realistic pig images.
Learnings
- Free credits on Lovable and Bolt run out very quickly.
- Asking Gemini over-and-over again to make changes is not sustainable for a large project. While it's obviously an amazing tool, it accidentally "forgets" changes it made in an earlier iteration and is prone to re-adding things you asked it to take out.
- Mix and match designs from different tools. Plug designs from Lovable into Gemini, ask Gemini to write you the prompt for Bolt... It helps feel the way towards an MVP, even if it does look a bit shit to begin with.
- Stuff that makes sense in your head doesn't always translate to a useful feature. Vibe coding is good for exposing ideas that make sense in principle but not in practice. See screenshots below of the "turn history" module - rubbish idea.
- GitHub Copilot was great and I should've used this at an earlier stage in the project. Being able to add context and insert directly into the code (rather than copy-pasting from Gemini) is much more sustainable. And it allows for better version control via the keep/discard buttons.