GitHub
Live
PreviewGamer-Data
Test account
Username: fredb@gamer.ie
Password: t35t1ing1234
This application is a demo that allows users to search for information on video games by utilizing the RAWG API, providing access to a vast database of game details. In addition to browsing games, users can create personalized collections of the games they own or have played.
This project builds upon the concepts from two previous projects: the anime-data and bug tracking apps. From the anime-data project, the focus on API integration and displaying information on a website was applied, while from the bug tracking app, the use of a database for storing and retrieving data was incorporated. By combining these concepts, the app not only fetches game data from the API but also enables users to store and manage their game collections within the system.
- React
- JSX
- CSS3
- JavaScript
- Firebase
- TanStack Query
Features
Users can search for a game in a list of games that are sorted with rankings from the metacritic score.
Users can search for games by genre or by using the search bar and type the name of the game.
Users can demo an account that allows users to select games to add to a list and they can rate games in their own list
Lessons Learned
How react renders and when information will be displayed on the page, I learnt a lot from this project as I didn't fully understand how rendering worked.
Using React with a backend (Firebase) and Api. This took a most of my time as trying to sort data from one place to another and pick the best solutions to provide me the best answers.
Understanding how firebase stores information. I'm familiar with MongoDB and SQL databases but firebase did it a bit different and I had to get my head around the new way to get data.
Using useEffect less for API calls and instead using react query.
Future features
See other users games collection if public to other users.
Rate games in your collection how how satisfied you were with them.
Set if the game is completed or not.
Working On / Research
Add and improve accessibility on website.
Deployment
Deployed on render with firebase as the database.