Play Rank

Transcript

1. Play Rank By Erik Gonzalez, Braden Carter, Diego Wearden, Aditya Dhanraj, Krisha Patel, Cristian Cantu
2. Purpose - To look for the cheapest prices for your favorite games
3. We use different API’s to compare what the best price are for a specific video game and display that price to the user as well as recommending games similar to it all in one page. Our recommendation system uses machine learning to best calculate games you would enjoy based on the games you have viewed How?
4. Technologies Used • React • Flask • MySQL • Bootstrap • GCP • Gitlab • Postman
5. Phase ll System Design
6. System Design
7. System Design
8. System Design
9. System Design
10. System Design
11. Phase lll System Design
12. System Design
13. System Design
14. System Design
15. System Design
16. Home Page Search your favorite games or scroll through was trending and recommended to you
17. Games Page Filter, sort, search and scroll for games that our database contains.
18. Game Developers Page Not a fan of looking through games? Look for your favorite game developers ! You might just find your new favorite indie dev.
19. Game Publishers Page Still not satisfied ? You can look through your favorite game publishers !
20. History Page Have short term memory? No worries we have a history tab that keeps track of the things you’ve viewed !
21. About Page This page displays the amazing members working on the website alongside their contributions, tools and APIs used
22. Deployment Cloud Shell Deploying through cloud shell requires the least amount of setup. Database: CloudSQL - enable required APIs in GCP, grant app engine service account the CloudSQL Client IAM role, Create instance with MYSQL, add user and password install requirements, etc.
23. Deployment Cloud Shell Activate cloud shell and pull from repo. Add .env file with SQL URI to cloud db. Populate database with create_db.py, models.py. Deploy backend with SQL_URI in app.yaml Deploy frontend - npm run build, gcloud app deploy
24. Deployment VSCode Install gcloud CLI, authenticate through VSCode, set project etc. install cloud-sql-proxy, Add IP to authorized networks, use cloud-sql-proxy to use unix socket or set up to use TCP for windows.
25. Demo
26. Self Critique What did we do well? • We held consistent meetings and collaborated very well. • Divided up work appropriately (each person worked on what they were comfortable with) • We were able to quality test our website with other non members so there wasn’t any biased
27. Self Critique What did we learn? • How to deploy to to GCP with the CLI in vscode. (setting permissions, creating user on CloudSQL, etc.) • How to implement layers of routing within pages allowing a complex page
28. Self Critique What can we do better ? • Code hygiene. Some stuff was out of place • We could make discounted pricing more applicable. • Cleaner documentation What puzzles us ? • We were puzzled at how difficult it was to filter and sort in a way that would benefit the user as we thought it would be easier to implement it • Standard vs flex environment. And CloudSQL pricing! (Charged for uptime instead of runtime)
29. Visualization
33. Other Critique What did they do well? • Very professional-looking website • Intuitive overall design and layout • Footer design is clean and visually appealing • Modal content is well-organized and easy to follow • Visually attractive presentation of information • Useful map feature that clearly shows fishing spot locations • About page cards are creative and engaging
34. Other Critique What did we learn from their website? • Learned which types of lures are best suited for catching specific fish • Gained knowledge about the types of fish found in Austin and other parts of Texas
35. Other Critique What can they do better? • Add a label to the sorting dropdown for clarity • Move the sorting dropdown closer to the other filters for better usability • Improve page navigation buttons — they feel too condensed • Add labels to the double-arrow navigation buttons (may be unclear to some users) • Include a label for the wiki link on the fish page to clarify its purpose • Add links or information on where to buy the lures (e.g., Amazon)
36. Other Critique What puzzles us about their website? • Fishing spots lack additional details such as directions, accessibility, and whether the spots are free or require a fee
37. How We Will Get Paid $$$