diff --git a/README.md b/README.md index 0e1211217..454792136 100644 --- a/README.md +++ b/README.md @@ -1,49 +1,117 @@ -# [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](#baseline-features) +- [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 + +## Baseline Features + +- 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 -Backend: +**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. -## Features + -### [Name of Feature 1] +### RESTful API Endpoints -[short description goes here] +- **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. + +## 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] -### [Name of Feature 2] +### Redirection + +After creating a Shoe, users are navigated to the Sneak-Peak gallery. +[gif goes here] -[short description goes here] +### User Interactions +Users can upvote/downvote shoes in the highlight gallery. [gif goes here] -### [Name of Feature 3] +### "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] + +### User can Edit/Delete shoe from their collection + +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. +### React Component Structure + +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] -### [ADDITIONAL FEATURES GO HERE - ADD ALL FEATURES HERE IN THE FORMAT ABOVE; you will check these off and add gifs as you complete them] +### User log in via Github + +- The user can log in via Github + [gif goes here] + +## Getting Started + +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..afa774c2a 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..1db9021e7 100644 --- a/planning/user_stories.md +++ b/planning/user_stories.md @@ -4,10 +4,29 @@ 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 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.