Vidja Gamers — React Ver.

Github Repository

This is an app that will allow users to view video games. They can register, login, and manage their user info and their favorite video games. Games themselves have a descriptions on the video game itself, including developers, release year, and genres. A search function is also included to help users filter and find the game they want to look at and add or remove from their favorites list. User and game info are stored on an API, and the app itself accesses said API so long as a JWT token is correct. Passwords are also encrypted on the API. The two databases were made specifically for this app.

This project needed a lot more time to get the design to work well on top of the functions themselves. The prompt used movies, but everything was edited accomodate video games instead. Time constraints prevented an indepth branding design, so it may be a consideration in the future.

Check the live app

Features

Registering a user
Logging in and out
Storing data to local storage (for both authorization and displaying info)
Rerouting based on whether or not youre logged in or not
Displaying the list of games provided by the API
Favoriting/unfavoriting games
Clicking for more details about the description, genre, and developer of a specific game
Search games based on game title, genre, developer, release year, or series
Displaying user's details (excluding their password)
Allowing changes to user's information
Deleting user from the database

Tools Used

React: To start off with the app structure and import modules
Redux: To store the user state
React Bootstrap Components: To build game cards
FontAwesome: For icons
Parcel: To build the app

Vidja Gamers — Angular Ver.

Github Repository

This uses the same backend API and endpoints, but uses Angular-CLI to build the app. It also uses both components and templates as per the Angular framework. While this isn't a one to one iteration of the React version, it carries the core functionalities that the original had. Base design work and functionality were also created with Angular Material and edited as per previous design.

Because of the different nature of Angular, this caused a little bit of struggle with fetching using the API. Much like the React version, this will require more time for the design and any additional functions if this wanted to be one to one with the React app. The prompt used movies, but everything was edited accomodate video games instead.

Check the live app

Features

Registering a user
Logging in and out
Storing data to local storage (for both authorization and displaying info)
Rerouting based on whether or not youre logged in or not
Displaying the list of games provided by the API
Favoriting/unfavoriting games
Clicking for more details about the description, genre, and developer of a specific game
Displaying user's details (excluding their password)
Allowing changes to user's information
Deleting user from the database

Tools Used

Angular-CLI: To start off with the app structure and import modules
Angular Material: To quickly build items with styling
lite-server: For testing building
TypeDoc: For documenation

Game API

Github Repository

This assignment introduced was a self built API hosted on Heroku with the database hosted on MongoDB.

This database includes both users and a collection of selected games. Future updates may use another API for a fuller library of games.

Functions included

Registering/Deregistering a user
Log a user in/out
Update user info
Fetch user information
Fetch game information
Fetch genre information
Fetch all games of a certain genre
Fetch developer information
Fetch all games of a certain developer
Fetch all games of a certain year
Fetch all games of a certain series
Fetch all games of a certain platform
Fetch all featured games
Set up of user and game schemas
Password hashing
Authentication

Tools Used/Introduced

node.js: To run Javascript
npm: To get and manage packages
JWT Tokens: To create authentication tokens
Express: For HTTP methods (GET, POST, PUT, DELETE)
Morgan: For HTTP middleware
Postman: To test endpoints
PostgreSQL: To store databases in SQL, only used temporarily
MongoDB Atlas: To store databases in NoSQL, used currently
bcrypt: To hash passwords
Heroku: Stores and executes the API
Mongoose: For user and game schemas
JSDoc: For documenation