Probably make the name catchier, but this works for now
Note
Fill in this sections as the submission artifact for this deliverable. You can refer to this example for inspiration.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Proper use of Markdown - Formatted text size and images to make following the document clear
- A concise and compelling elevator pitch - Wrote the pitch
- Description of key features - Wrote up a brief description of the features I want, including means of user interaction and pages
- Description of how you will use each technology - Wrote up a brief description of each of the technologies and my inital thoughts on implementing it
- One or more rough sketches of your application. Images must be embedded in this file using Markdown image references. - Added images for a home page, game page, and a sequence diagram of several functions
There are a myriad of really interesting and fun video games, but there aren't actually very many good review sites. You can find reviews on Amazon, Xbox, Google, or other places but it doesn't ever seem like there are any truly dedicated locations for quality reviews. The goal of the Games Rating application is to fix this issue by providing a space for people to share their reviews and have discussions about different video games that have released. When users want to, they can open up this application and add a new game to the game options or leave a review on one that's already there. These discussions and reviews are saved so that they can be referenced in the future. Additionally an average rating for each game is displayed for concise information about opinions on the game. These will all be out of 100 so that there is plenty of room for nuanced opinions.
This is the home page
This is a game page
Above are some quick images of the home page and the game page for reference
Above this is a quick sequence diagram of several core functions involving user interactions, made very simple and summarized
- Secure login over HTTPS
- Ability to add new games to the application
- Ability to leave a review for a game
- Ability to leave a comment on a game
- Ability for an admin to delete games, reviews, and comments
- Ability for the user to view a page for each game, with reviews and comments that are updated in real time
- Persistently stored comments, reviews, and games information
- Display of the game list
- Display of a small page with information for each game
I am going to use the required technologies in the following ways:
- HTML - Uses simple HTML structure to create small HTML pages for each game, as well as a login page.
- CSS - Used to make the app look good even if screens are different sizes, as well as for formatting of pages to ensure comfortable whitespace, good spacing of images, and clear differentation of ideas in the page.
- React - Used for login, leaving reviews, adding new games, leaving comments, and for other miscellaneous actions and components.
- Service - Backend service with endpoints, including the following:
- login
- retrieving game information
- submitting reviews
- retrieving review scores
- leaving comments
- retrieving comments
- DB/Login - Store comments, votes, and game information in a database. Register and login users with securely stored credentials. People can't interact with anything other than the login page unless they are authenticated.
- WebSocket - When a user adds a game, leaves a review, or leaves a comment, it will be broadcast to all other users who are logged in and on the appropriate page.
Note
This is a template for your startup application. You must modify this README.md file for each phase of your development. You only need to fill in the section for each deliverable when that deliverable is submitted in Canvas. Without completing the section for a deliverable, the TA will not know what to look for when grading your submission. Feel free to add additional information to each deliverable description, but make sure you at least have the list of rubric items and a description of what you did for each item.
Note
If you are not familiar with Markdown then you should review the documentation before continuing.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Server deployed and accessible with custom domain name - Here is my domain.
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- HTML pages - I created four simple html pages that indicate the layout of my website.
- Proper HTML element usage - I made sure to use HTML elements thoroughly to both create function for and organize the webpage.
- Links - My html pages link between each other as appropriate
- Text - I indlucded various text elements and forms that the users can both view and fill out on several pages
- 3rd party API placeholder - I noted how a 3rd party API would be used in the game creation page to verify game existence for the site
- Images - I added an image to the game page template. Note that this will display a different image for each game so there will be several more than are here. I also added a website banner image to the main page.
- Login placeholder - I created an example login page as well as a login button or username display, depending on status of the login
- DB data placeholder - I indicated some locations where tables and other data might be filled in using DB data, especially in the index page
- WebSocket placeholder - I indicated some locations where a list will be populated as people create data, via websocket. Especially in the index page
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Visually appealing colors and layout. No overflowing elements. - I colored all of the elements of the page in an effort to make a visualy appealing design that still had clarity
- Use of a CSS framework - I implemented the tailwind framework into several elements of my page, especially the buttons and link formatting
- All visual elements styled using CSS - I styled all of the visuals that I currently intend on having using CSS
- Responsive to window resizing using flexbox and/or grid display - The page will successfully resize to match different screen types, widths, and heights!
- Use of a imported font - I imported the Roboto font from Google and set that to be my webpage's font
- Use of different types of selectors including element, class, ID, and pseudo selectors - I used class selectors, ID selectors, and element selectors to style various text boxes and other items. I also used pseudo selectors to style links and invalid data types in forms correctly
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Bundled using Vite - The application now correctly uses vite
- Components - All of the components have been properly converted to use react
- Router - All of the application information now passes through a router
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- All functionality implemented or mocked out - I implemented mocks of the ability to read from different databases, log in, and leave reviews and comments!
- Hooks - I used useEffect to create the various different repeating mock elements and displays on my screen and useState to set up variables to help with those mocks
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Node.js/Express HTTP service - The services are being used, as instructed
- Static middleware for frontend - I implemented the middleware as instructed!
- Calls to third party endpoints - I got an auth from and called the endpoints for twitch's game database services
- Backend service endpoints - I created the endpoints for most of the core functions of my app
- Frontend calls service endpoints - I made it so that my frontend pages call my endpoints
- Supports registration, login, logout, and restricted endpoint - I added endpoints for logging in and out, as well as some that require the user to be logged in
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Stores data in MongoDB - The data is now stored and persistent in MongoDB
- Stores credentials in MongoDB - Users and their credentials are also now stored and persistent in MongoDB
For this deliverable I did the following. I checked the box [x] and added a description for things I completed.
- Backend listens for WebSocket connection - Integrated websocket in the backed for the transfer of data in chats
- Frontend makes WebSocket connection - The websocket connection is initiated differently depending on the page to allow for different functions. It is implemented!
- Data sent over WebSocket connection - The websocket hosts a chat room when you are viewing a game (the chat room is not game specific) and uses WebSocket to send out updates to the home page when stuff is added. This notably doesn't apply to the reviews
- WebSocket data displayed - Websocket data is viewable in the chat on the side of a game
- Application is fully functional - Pretty much everything that I intended to have working in this application does!