CodePath WEB103 Final Project
Designed and developed by: Noel Alfaro & Mohamed Reda Falh
🔗 Link to deployed app: https://sneak-peak-client.up.railway.app/dashboard
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.
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.
Frontend: React, Tailwind CSS
Backend: Node, Express, PostgresSQL database
- Built using an Express backend and a React frontend.
- Dynamic routes implemented for both frontend and backend.
- Hosted and deployed via Railway.
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.
- GET
/shoes
: Fetch all shoe collections. - POST
/shoes
: Add a new shoe to a user's collection. - PATCH
/edit/shoes/:id
: Update shoe details. - DELETE
edit/shoes/:id
: Remove a shoe from the collection.
API endpoint to reset the database to its initial state.
While on the dashboard, the user can view cards of the shoes already uploaded to the database
The user should be able to fill out a form to upload a new 'Shoe' to add to their collection
After creating a Shoe, users are navigated to the Sneak-Peak gallery.
Users can edit or delete shoes listed in their collection
The user can log in via Github
- Clone the repository.
- Install dependencies using
npm install
. - Start the server using
npm start
. - Navigate to
localhost:3000
to see the app in action.