From 89949832bad8a21f87842d45361258200a2934d6 Mon Sep 17 00:00:00 2001 From: csi-Abil Date: Fri, 20 Oct 2023 19:16:51 -0400 Subject: [PATCH 1/7] milestone 1 --- README.md | 116 ++++++++++++++++++++++++++++++++++----- milestones/milestone1.md | 31 +++++++---- planning/user_stories.md | 22 ++++++-- 3 files changed, 137 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 0e1211217..196838983 100644 --- a/README.md +++ b/README.md @@ -1,49 +1,137 @@ -# [your app name here] +# PlayPal CodePath WEB103 Final Project -Designed and developed by: [your names here] +Designed and developed by: [Abil Shrestha & Aashil Ahmad] πŸ”— Link to deployed app: ## About +PlayPal is a web app tailored for avid gamers and casual players. It acts as your one-stop shop to uncover new games, receive personalized game suggestions, and stay current on the latest gaming news. With an intuitive interface, PlayPal simplifies exploring a universe of new gaming adventures. + ### Description and Purpose -[text goes here] +The app features a robust database of games spanning all genres and platforms. Users can browse and search for games by title, genre, platform, and more. Staying current with the gaming world is a breeze with PlayPal. Peruse the latest gaming headlines, previews, and reviews. PlayPal takes the hassle out of game discovery. Its clean interface and wealth of gaming info empowers users to effortlessly find their next favorite game and connect with other gaming enthusiasts. + +The purpose of GameDiscoverer is to be the go-to platform for gamers to discover new game titles to play. Key goals include: + + ### Inspiration -[text goes here] +Rawg.io ## Tech Stack -Frontend: +Frontend: ReactJs, Redux, Axios, Tailwind -Backend: +Backend: Node.js, Express, Passport.js, Postgresql ## Features -### [Name of Feature 1] +### Use Passport.js for GitHub OAuth login to restrict profile and favorites pages to logged in users + +Allow users to login via GitHub OAuth using Passport.js to restrict access to profile and favorites pages. [gif goes here] + +[gif goes here] + +### PostgreSQL database with tables for games, platforms, genres, etc. + +Setup a PostgreSQL database with structured tables to store game data. + +[gif goes here] + +### Create RESTful API routes for games, platforms, and genres that support GET, POST, PATCH, and DELETE requests + +Implement REST API endpoints for CRUD operations on games, platforms, genres. [gif goes here] + +[gif goes here] + +### Validate game data entered in forms before creating/updating in database + +Validate game info entered by user before inserting or updating in the database. + +[gif goes here] + +### React Router for dynamic routing to pages like Home, Games, Genres, Platforms, etc. + +Use React Router to handle routing between app pages. + +[gif goes here] + +### Redirect user to Login page if not authenticated when trying to access profile + +Redirect to login page if user tries to access profile when unauthenticated. + +[gif goes here] + +### Break components into pages, containers, and presentational components -[short description goes here] +Organize components into pages, containers, and presentational components. [gif goes here] -### [Name of Feature 2] +### Use component hierarchy for clean structure and separation of concerns -[short description goes here] +Structure components hierarchically for clean code and separation of concerns. [gif goes here] -### [Name of Feature 3] +### Game search, filter, and sort functionality -[short description goes here] +Allow searching, filtering, and sorting the games list. + +[gif goes here] + +### Add a slide-out navigation pane for navigation links + +Implement slide out navigation drawer for navigation links. + +[gif goes here] + +### Display toast notifications when games are favorited, deleted, added, etc. + +Show toast notifications when games are favorited, deleted, added, etc. + +[gif goes here] + +### Show loading spinner for game images and other page elements while loading + +Display loading spinner for game images and page elements. + +[gif goes here] + +### Disable action buttons while form is submitting to prevent duplicate submits + +Disable form buttons during submission to prevent duplicates. + +[gif goes here] + +### Display toast notifications when games are favorited, deleted, added, etc. + +Show toast notifications when games are favorited, deleted, added, etc. [gif goes here] -### [ADDITIONAL FEATURES GO HERE - ADD ALL FEATURES HERE IN THE FORMAT ABOVE; you will check these off and add gifs as you complete them] ## Installation Instructions -[instructions go here] +All commands are run from the root of the project, from a terminal: + +| Command | Action | +| :------------------------ | :----------------------------------------------- | +| `npm install` | Installs dependencies | +| `npm run dev` | Starts local dev server at `localhost:3000` | +| `npm run build` | Build your production site to `./dist/` | +| `npm run preview` | Preview your build locally, before deploying | + + diff --git a/milestones/milestone1.md b/milestones/milestone1.md index a8f086378..571e2fea0 100644 --- a/milestones/milestone1.md +++ b/milestones/milestone1.md @@ -6,26 +6,33 @@ This document should be completed and submitted during **Unit 5** of this course This unit, be sure to complete all tasks listed below. To complete a task, place an `x` between the brackets. -- [ ] Read and understand all required features - - [ ] Understand you **must** implement **all** baseline features and **two** custom features -- [ ] In `readme.md`: update app name -- [ ] In `readme.md`: add all group members' names -- [ ] In `readme.md`: complete the **Description and Purpose** section -- [ ] In `readme.md`: complete the **Inspiration** section -- [ ] In `readme.md`: list all features you intend to include in your app (in future units, you will check off features as you complete them and add GIFs demonstrating the features) -- [ ] In `planning/user_stories.md`: add all user stories -- [ ] In this document, complete the **Reflection** section below +- [X] Read and understand all required features + - [X] Understand you **must** implement **all** baseline features and **two** custom features +- [X] In `readme.md`: update app name +- [X] In `readme.md`: add all group members' names +- [X] In `readme.md`: complete the **Description and Purpose** section +- [X] In `readme.md`: complete the **Inspiration** section +- [X] In `readme.md`: list all features you intend to include in your app (in future units, you will check off features as you complete them and add GIFs demonstrating the features) +- [X] In `planning/user_stories.md`: add all user stories +- [X] In this document, complete the **Reflection** section below ## Reflection ### 1. What went well during this unit? -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ your answer here] +Our team worked really well together during this unit to come up with an exciting web app concept - a game discovery app for gamers. We took inspiration from successful existing platforms like Rawg.io to make sure our app would fill a real need and have an engaged user base. + +By brainstorming the app purpose and core features as a team, we were able to get aligned on the direction for this project. We clearly outlined the goals and user experiences we want our app to provide. Breaking these down into detailed user stories gave us a solid framework to build off of as we move into the next development stages. + +We believe that the strategic planning and user-centric design principles we focused on this unit have set us up for success. Moving forward, we want to maintain this momentum of working together to bring an innovative web app from concept to reality. ### 2. What were some challenges your group faced in this unit? -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ your answer here] +We learned the importance of prioritizing core features and intentionally defining an MVP to make the project achievable within our timeline and skills. This discussion brought valuable collaboration as we aligned on the most essential user stories and functionality ### 3. What additional support will you need in upcoming units as you continue to work on your final project? -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ your answer here] + We need support on how to improve website performance and responsiveness. We could use some guidance on best practices for modeling these relationships in our database and setting them up in our backend. We have questions around: + 1. How to properly structure the tables and foreign keys to define one-to-many relationships in our schema? + 2. What is the ideal way to implement joins and junction tables to enable many-to-many connections between certain data types in our app? + 3. What are some pitfalls to avoid when designing and querying these types of relationships on the backend? diff --git a/planning/user_stories.md b/planning/user_stories.md index 1e55ecbcd..3b1502de1 100644 --- a/planning/user_stories.md +++ b/planning/user_stories.md @@ -1,13 +1,23 @@ # User Stories -Reference the Writing User Stories final project guide in the course portal for more information about how to complete each of the sections below. +As you plan, it's tempting to jump straight into thinking in terms of implementation: what cool features you'll build and what technologies you will use to achieve your vision. However, starting out this way narrows your thinking about the design of your app and limit its possibilities. You'll need to get coding eventually, but it's important to remember: technology exists to solve problems for people. The balance between design and implementation will be a give and take. Sometimes you will have to make compromises due to technical and time constraints. However, the implementation should always serve the design, not the other way around. -## Outline User Roles +This guide will give you an overview of one common technique for designing technology that's actually useful: writing user stories. User stories are short, straightforward descriptions of an app's functionality expressed from the perspective of the end user. By focusing on users' needs and experiences, user stories help developers prioritize features, create more user-centered products, and ultimately build technology that truly benefits its users. -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ Include at least at least 1, but no more than 3, user roles.] +## User Roles -## Draft User Stories +1. Regular User : A use who can search games, view details.Basic usage. +2. Registered User : Same as regular + can create account, save favorites, get recommendations, like games etc. -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ Include at least at least 10 user stories in this format:] +## User Stories -1. As a [user role], I want to [what], so that [why]. +1. As a user I want to be able to search for games by title, genre, platform, etc. so I can easily find new games to play. +2. As a user I want the ability to create an account and log in so I can save games to a favorites list. +3. As a user I want to be able to sort and filter searches by criteria like platform, genre, and rating so I can customize results. +4. As a user I want to view descriptions, images, videos, and other details about a game so I can learn more before playing. +5. As a user I want the interface to be intuitive and easy to navigate so I can use the app with minimal effort. +6. I want the app to have a responsive design that adapts across devices like mobile, tablet, desktop +7. As a user I want my account information and data to be kept private and secure. +8. As a user I want the app to load quickly and be stable so I can seamlessly discover new games. +9. As a user, I want to be able to easily view new and upcoming game releases so I can stay up-to-date on what's coming out. +10. As a user, I want the option to subscribe to an email newsletter so I can receive regular updates about new games and content. From be41fab6f9f4edbbde0d520ebec7d7a820d3cfbf Mon Sep 17 00:00:00 2001 From: csi-Abil Date: Fri, 20 Oct 2023 19:18:31 -0400 Subject: [PATCH 2/7] milestone 1 --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 196838983..399994ab1 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ PlayPal is a web app tailored for avid gamers and casual players. It acts as you The app features a robust database of games spanning all genres and platforms. Users can browse and search for games by title, genre, platform, and more. Staying current with the gaming world is a breeze with PlayPal. Peruse the latest gaming headlines, previews, and reviews. PlayPal takes the hassle out of game discovery. Its clean interface and wealth of gaming info empowers users to effortlessly find their next favorite game and connect with other gaming enthusiasts. -The purpose of GameDiscoverer is to be the go-to platform for gamers to discover new game titles to play. Key goals include: +The purpose of PlayPal is to be the go-to platform for gamers to discover new game titles to play. Key goals include: