Well Played is a video game social media review app where users can add their friends, review games that they own, keep track of all their games, and be able to add unowned games to a wishlist.
Well Played is built on the MERN stack.
MongoDB: NoSQL database that stores data in JSON like documents, which allows easy changes such as new fields in the model.
Express.js: Framework used to easily create RESTful API in Node, as well as manage databases.
Node.js: Runtime environment that allows Javascript to be run on the server.
React.js: Library used to create dynamic user interfaces, allowing the reuse of components.
Redux: Framework used to manage state across the whole app.
IGDB Video Games API: API utilized to fetch video game information vital to Well Played.
Users are able to search for video games with or without filters. In the search page, results are returned with basic information. Upon clicking the game, users are able to see more details about a game. In both the search page and in the game show page, users are able to add and remove the game from their wishlist and library by clicking on their respective buttons.
In the search page and in the game show page, users are able to add games to their wishlist and library by clicking on the icons. Whenever they are clicked, depending on whether or not the video game is currently in the user's lists, the corresponding game is added or removed to the user's list.
In the game show page, users are able to see user reviews for the game as well as leave their own review. Reviews consist of a description as well as different ratings pertaining to: gameplay, story, and visuals.
The user profile contains both the user's wishlist and library lists of games. Users are also able to manage their friends in their friends list.
Users are able to send and receive friend requests. The receiver is able to accept or deny the friend request. Users are also able to remove friends from their friendlist.
The most important part of the application is how we are fetching all of the user information. Upon logging in, an action is fired off into several reducers at the same time, populating our store with all relevant information such as the user's wishlist, library, and friends.
// session.js
export const RECEIVE_CURRENT_USER = "session/RECEIVE_CURRENT_USER";
const receiveCurrentUser = currentUser => ({
type: RECEIVE_CURRENT_USER,
currentUser
});
const sessionReducer = (state = {}, action) => {
switch (action.type) {
case RECEIVE_CURRENT_USER:
if (!action.currentUser) return state;
return {
username: action.currentUser.username,
email: action.currentUser.email,
id: action.currentUser._id
};
case RECEIVE_USER_LOGOUT:
return {};
default:
return state;
}
};
// wishlist.js
const wishlistReducer = (state = {}, action) => {
switch (action.type) {
// Load wishlist when a user logs in or session is restored.
case RECEIVE_CURRENT_USER:
const newState = {};
if (!action.currentUser) return newState;
// Populate state with gameId: gameData key-value pairs.
if (action.currentUser.wishlistGames.length > 0) {
action.currentUser.wishlistGames.forEach((wishlistItem) => {
newState[wishlistItem.gameId] = wishlistItem;
});
}
return newState;
case RECEIVE_WISHLIST_ITEM:
return {
...state,
[action.wishlistItem.gameId]: action.wishlistItem,
}
case REMOVE_WISHLIST_ITEM:
const nextState = { ...state };
delete nextState[action.gameId];
return nextState;
case RECEIVE_USER_LOGOUT:
return {};
default:
return state;
}
}
Example of the store:
- Game Night with Friends/Looking for Group
- Custom User lists
- Steam/Xbox/Playstation Integration
- Discord OAuth
- AI Generated Recommendations using OpenAI API