From fe7e508fe66b69f8e39a6cb58df855378c497362 Mon Sep 17 00:00:00 2001 From: Noel Date: Wed, 18 Oct 2023 22:51:59 -0500 Subject: [PATCH 1/4] milestone 1 draft checkpoint --- README.md | 99 ++++++++++++++++++++++++++++++++-------- milestones/milestone1.md | 26 ++++++----- planning/user_stories.md | 23 ++++++++-- 3 files changed, 114 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 0e1211217..7d9b07438 100644 --- a/README.md +++ b/README.md @@ -1,49 +1,110 @@ -# [your app name here] +# Sneak-Peak CodePath WEB103 Final Project -Designed and developed by: [your names here] +Designed and developed by: Noel Alfaro & Mohamed Reda Falhi πŸ”— Link to deployed app: +## Table of Contents + +- [Backend and Frontend Configuration](#backend-and-frontend-configuration) +- [Backend Features](#backend-features) +- [Frontend Features](#frontend-features) +- [Getting Started](#getting-started) +- [Contributing](#contributing) + ## About ### Description and Purpose -[text goes here] +Sneak-Peak is a web application designed to cater to sneaker enthusiasts, and newcomers. +It is a web app built with Node.js/Express and PostgresSQL on the backend and React on the frontend. +The purpose of this app is to allow users to be able to manage, share & showcase their shoe collections. ### Inspiration -[text goes here] +We were inspired by shoe buying apps like GOAT, which allow users to buy new and vintage shoes. +We wanted to create an app that users can treat as their digital locker room to store & update their collections, upvote other users shoes, and highlight their favorites. ## Tech Stack -Frontend: +Frontend: React, Tailwind CSS + +Backend: Node, Express, PostgresSQL database + +## Backend and Frontend Configuration + +- Built using an Express backend and a React frontend. +- Dynamic routes implemented for both frontend and backend. +- Hosted and deployed via Railway. + +## Backend Features + +### Database Relationships in Postgres + +- **User & Sneaker**: One-to-many relationship where each user can upload multiple shoes. +- **User & Sneaker**: Many-to-many relationship where many users can upvote/downvote multiple shoes. +- **User & Profile**: One-to-One relationship is established between users and their profiles. Users can customize their profiles to add additional information, enhancing their personalization within the app. + + +### RESTful API Endpoints + +- **GET** `/shoes`: Fetch all shoe collections. +- **POST** `/shoes`: Add a new shoe to a user's collection. +- **PATCH** `/shoes/:id`: Update shoe details. +- **DELETE** `/shoes/:id`: Remove a shoe from the collection. + +### Database Management + +- API endpoint to reset the database to its initial state. + +### User log in via Github + +- The user can log in via Github + +## Frontend Features + +### Uploading a Shoe + +- The user should be able to fill out a form to upload a new 'Shoe' to add to their collection + [gif goes here] + +### Redirection + +- After creating a Shoe, users are navigated to the Sneak-Peak gallery. + [gif goes here] -Backend: +### User Interactions -## Features +- Users can upvote/downvote shoes in the highlight gallery. + [gif goes here] -### [Name of Feature 1] +### "Highlighting" -[short description goes here] +- The user should be able to 'Highlight' a shoe so that their shoe can be added to the highlighted dashboard on the homepage + [gif goes here] -[gif goes here] +### User can Edit/Delete shoe from their collection -### [Name of Feature 2] +- Logged in Users edit or delete shoes listed in their collection + [gif goes here] -[short description goes here] +### Dynamic Routing -[gif goes here] +- Landing page, user profiles, individual shoe details, and Sneak-Peak Dashboard, all facilitated via React Router. -### [Name of Feature 3] +### React Component Structure -[short description goes here] +- Hierarchically designed components segmented into pages and component types. -[gif goes here] +## Getting Started -### [ADDITIONAL FEATURES GO HERE - ADD ALL FEATURES HERE IN THE FORMAT ABOVE; you will check these off and add gifs as you complete them] +1. Clone the repository. +2. Install dependencies using `npm install`. +3. Start the server using `npm start`. +4. Navigate to `localhost:3000` to see the app in action. -## Installation Instructions +## Contributing -[instructions go here] +Feel free to fork the repository, make changes, and submit a pull request. We appreciate all contributions! diff --git a/milestones/milestone1.md b/milestones/milestone1.md index a8f086378..9981274e3 100644 --- a/milestones/milestone1.md +++ b/milestones/milestone1.md @@ -6,26 +6,28 @@ 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] +- Communicating our ideas and giving feedback to each other to finalize our proposed project idea. ### 2. What were some challenges your group faced in this unit? -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ your answer here] +- Coming up with good user stories was harder than initially thought ### 3. What additional support will you need in upcoming units as you continue to work on your final project? -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ your answer here] +- Coming up with a consistent schedule to meet and assign tasks will be very important to make good progress and meet our goals + +- Communication of blockers and clarifying questions will help development progress smoothly diff --git a/planning/user_stories.md b/planning/user_stories.md index 1e55ecbcd..f3b14e525 100644 --- a/planning/user_stories.md +++ b/planning/user_stories.md @@ -4,10 +4,27 @@ Reference the Writing User Stories final project guide in the course portal for ## Outline User Roles -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ Include at least at least 1, but no more than 3, user roles.] +- Newbie : a user who is new to the shoe game and wants to begin cataloging +- Sneakerhead : a user who is very knowledgeable about sneakers and has a lot of em cataloged ## Draft User Stories -[πŸ‘‰πŸΎπŸ‘‰πŸΎπŸ‘‰πŸΎ Include at least at least 10 user stories in this format:] +1. As a Newbie, I want to create a profile so that I can start cataloging my shoe collection. -1. As a [user role], I want to [what], so that [why]. +2. As a Newbie, I want to view my own shoe collection in a user-friendly format so that I can easily manage and organize my shoes. + +3. As a Sneakerhead, I want to create a profile to showcase my extensive shoe collection, so that I can have a digital copy of them to view anytime. + +4. As a Sneakerhead, I want to be able to make edits as my collection grows and changes over time, so that I can see which sneaker styles I get over time. + +5. As a Sneakerhead, I want to upvote good shoes that deserve recognition on the highlighted dashboard, so that other users can add them to their collection. + +6. As a Newbie, I want to be introduced to new shoes or brands, so that I can then add them to my collection. + +7. As a Sneakerhead, I want to search and filter different brands, so that I can view what users are into. + +8. As a Sneakerhead, I want to 'Highlight' my rare sneakers, so that other users can see that I have them. + +9. As a Newbie, I want to browse through the highlighted sneakers, so that I can learn what makes them 'Highlight' worthy. + +10. As a Newbie, I want to see which shoes in my collection get the most upvotes, so that I can learn which of my shoes other users like the most. From 4b810ca7a6ea51e7a61b423b3cdb758906e67899 Mon Sep 17 00:00:00 2001 From: Noel Date: Thu, 19 Oct 2023 16:31:41 -0500 Subject: [PATCH 2/4] edited readme file --- README.md | 51 +++++++++++++++++++++++++++++---------------------- 1 file changed, 29 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 7d9b07438..454792136 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Designed and developed by: Noel Alfaro & Mohamed Reda Falhi ## Table of Contents -- [Backend and Frontend Configuration](#backend-and-frontend-configuration) +- [Backend and Frontend Configuration](#baseline-features) - [Backend Features](#backend-features) - [Frontend Features](#frontend-features) - [Getting Started](#getting-started) @@ -33,7 +33,7 @@ Frontend: React, Tailwind CSS Backend: Node, Express, PostgresSQL database -## Backend and Frontend Configuration +## Baseline Features - Built using an Express backend and a React frontend. - Dynamic routes implemented for both frontend and backend. @@ -43,9 +43,10 @@ Backend: Node, Express, PostgresSQL database ### Database Relationships in Postgres -- **User & Sneaker**: One-to-many relationship where each user can upload multiple shoes. -- **User & Sneaker**: Many-to-many relationship where many users can upvote/downvote multiple shoes. -- **User & Profile**: One-to-One relationship is established between users and their profiles. Users can customize their profiles to add additional information, enhancing their personalization within the app. +**User & Sneaker**: One-to-many relationship where each user can upload multiple shoes. +**User & Sneaker**: Many-to-many relationship where many users can upvote/downvote multiple shoes. +**User & Profile**: One-to-One relationship is established between users and their profiles. Users can customize their profiles to add additional information, enhancing their personalization within the app. + ### RESTful API Endpoints @@ -57,46 +58,52 @@ Backend: Node, Express, PostgresSQL database ### Database Management -- API endpoint to reset the database to its initial state. - -### User log in via Github - -- The user can log in via Github +API endpoint to reset the database to its initial state. ## Frontend Features ### Uploading a Shoe -- The user should be able to fill out a form to upload a new 'Shoe' to add to their collection - [gif goes here] +The user should be able to fill out a form to upload a new 'Shoe' to add to their collection +[gif goes here] ### Redirection -- After creating a Shoe, users are navigated to the Sneak-Peak gallery. - [gif goes here] +After creating a Shoe, users are navigated to the Sneak-Peak gallery. +[gif goes here] ### User Interactions -- Users can upvote/downvote shoes in the highlight gallery. - [gif goes here] +Users can upvote/downvote shoes in the highlight gallery. +[gif goes here] ### "Highlighting" -- The user should be able to 'Highlight' a shoe so that their shoe can be added to the highlighted dashboard on the homepage - [gif goes here] +The user should be able to 'Highlight' a shoe so that their shoe can be added to the highlighted dashboard on the homepage +[gif goes here] ### User can Edit/Delete shoe from their collection -- Logged in Users edit or delete shoes listed in their collection - [gif goes here] +Logged in Users edit or delete shoes listed in their collection +[gif goes here] ### Dynamic Routing -- Landing page, user profiles, individual shoe details, and Sneak-Peak Dashboard, all facilitated via React Router. +Landing page, user profiles, individual shoe details, and Sneak-Peak Dashboard, all facilitated via React Router. ### React Component Structure -- Hierarchically designed components segmented into pages and component types. +Hierarchically designed components segmented into pages and component types. + +### The Web App Gracefully Handles Errors + +The web app displays an error message to the user if something goes wrong. +[gif goes here] + +### User log in via Github + +- The user can log in via Github + [gif goes here] ## Getting Started From fc2b3ec831b37bc946546f64afd6f14ed553d71d Mon Sep 17 00:00:00 2001 From: Noel Date: Thu, 19 Oct 2023 18:15:05 -0500 Subject: [PATCH 3/4] edited readme --- planning/user_stories.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/planning/user_stories.md b/planning/user_stories.md index f3b14e525..1db9021e7 100644 --- a/planning/user_stories.md +++ b/planning/user_stories.md @@ -27,4 +27,6 @@ Reference the Writing User Stories final project guide in the course portal for 9. As a Newbie, I want to browse through the highlighted sneakers, so that I can learn what makes them 'Highlight' worthy. -10. As a Newbie, I want to see which shoes in my collection get the most upvotes, so that I can learn which of my shoes other users like the most. +10. As a Newbie, I want to read detailed product descriptions and specifications for each shoe, such as materials, technologies, & sizing reccommendations, so that I can learn about the shoe on a deeper level. + +11. As a Sneakerhead, I want to filter out the shoes shown to me based on criteria like color and brand, so that I can see how many upvotes they have. From 84b82694854cccbd9d69c285bbcdbdb319989d6c Mon Sep 17 00:00:00 2001 From: Mohamed Reda Falhi <70645288+madfalouh@users.noreply.github.com> Date: Thu, 19 Oct 2023 18:21:15 -0500 Subject: [PATCH 4/4] added navbar --- milestones/milestone1.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/milestones/milestone1.md b/milestones/milestone1.md index 9981274e3..afa774c2a 100644 --- a/milestones/milestone1.md +++ b/milestones/milestone1.md @@ -30,4 +30,4 @@ This unit, be sure to complete all tasks listed below. To complete a task, place - Coming up with a consistent schedule to meet and assign tasks will be very important to make good progress and meet our goals -- Communication of blockers and clarifying questions will help development progress smoothly +- Communication of blockers and clarifying questions will help development progress smoothly.