https://family-game-night.onrender.com

Family Game Night is a web app developed by myself (Chad Campbell) as a final project for Harvard CS50x. The project uses micro framework Flask with Python and Jinja syntax for some logic to show database information on the apps routes. HTML, CSS with bootstrap, and Javascript were used on the front end. SQLite3 was used for the database. Note: Demo may be slow to spin up due to Render hosting free tier.

This is the landing page that just greets the user and explains the purpose of the app, if they are logged in. If not they are redirected to login.

These forms are validated with SQL queries and a hash for the password made using werkzeug.security. Then the user id will be the primary key for all other databases.

These forms and data tables INSERT and show SELECTED data for the apps other services, the leaderboard/history and the "wheel".

The forms on this page only allow inputs from the data tables controlled on the Family or Games page, but they INSERT into their own table. This way games and family members can be added and removed while the historical data here will remain.

The Wheel was a bit tricky. I wanted something that would change dynamically based on the users games table. Most iterations of this I could find prior were done with mainly CSS and were static. The answer was winwheel.js. A Javascript library that does the heavy lifting by utilizing a canvas element in HTML. Adding some loops and some of the built in functions of the library the segments of the wheel are created with the data from the SQL table associated with the users games.