Bad Banana is a simple game that allows you to practice your mental math. Try to answer as many arithmetic questions as possible before losing all your lives!
This version of Bad Banana uses the badbanana package originally purposed for the
original CLI version of the game. Additional game-logic happens in the api.game_api module.
Python 3 and Flask 2 were used for the backend; ReactJS was used for the frontend.
I wanted to learn a frontend framework/library, and React seemed like a good choice given its popularity. There was definitely a learning curve from having worked primarily in Python, but I got something to clunk away (I hope!).
You can play online here!
I highly recommend cloning this repository. You should have Node.js, yarn, and at least Python 3.8.5 installed on your machine.
In the project-root directory, run npm install. This should install
all the JS dependencies for the project.
Inside the api folder, create a virtual environment using venv. Once you've activated your virtual environment, run pip3 install requirements.txt to download all the necessary Python packages for the backend.
You should be good at this point to get the project running. To start the Flask server,
run yarn start-api. To start the React client, run yarn start. Open localhost:3000 in a browser. Happy math-ing!
I'm currently learning the basics of Docker. I hope to have a Docker image on Docker Hub for this project soon!
I used pytest for unit testing. To run the tests, make sure you're in the api folder. Once there, run pytest test_api.py.
I have yet to write any frontend tests.
I'm having proxy issues in Safari that make the game non-functional. I have yet to look into the problem deeply to see whether there's something wrong with my configuration or something more generally amiss. As such, I developed this app on Firefox and Chrome, and it ran well on both. Hopefully, either of those browsers will work for you, too.
As with all projects, I've been the beneficiary of a multitude of online resources, but there were two in particular that helped me out the most for Bad Banana.
- Miguel Grinberg's tutorial: How to Create a React + Flask Project
- Maximilian Schwarzmüller's Udemy course: React - The Complete Guide
Some of you might recognize the leopard background from Season 1 of Mike White's The White Lotus. If you haven't seen it yet, what are you waiting for??
Read here.
