Skip to content

Add navbar #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 84 additions & 16 deletions README.md
Original file line number Diff line number Diff line change
@@ -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
<!-- 2. **User & SneakPeak Comments**: Many-to-many relationship with a join table to facilitate user comments on Sneak-Peak. -->

### [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!
26 changes: 14 additions & 12 deletions milestones/milestone1.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
25 changes: 22 additions & 3 deletions planning/user_stories.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.