Check my Fit is an app where you can share your outfits and have them rated. As a user you can view outfits, add your outfits, add tags to your outfits, edit and delete your outfits, view other user's outfits, rate other user's outfits hot or not and add and delete comments on a outfit's page.
Installation
- Fork and Clone this Repo (Client) and The API
- Follow the instructions on the Check My Fit API Repo to install the API
- Install the necessary dependencies for this repo by copying the code below (or see dependencies to install individually):
npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome @testing-library/jest-dom @testing-library/react @testing-library/user-event axios bootstrap dotenv react react-bootstrap react-dom react-moment react-router-dom react-scripts sass uuid web-vitals - run
npm startfor the API (runs onlocalhost:3000) - run
npm startfor the this repo (The Client) and go tolocalhost:8000in your browser to view
Dependencies
- @Fortawesome/Fontawesome-Svg-Core
npm i @fortawesome/fontawesome-svg-core - @Fortawesome/Free-Solid-Svg-Icons
npm i @fortawesome/free-solid-svg-icons - @Fortawesome/React-Fontawesome
npm i @fortawesome/react-fontawesome - @Testing-library/Jest-Dom
npm i @testing-library/jest-dom - @Testing-Library/React
npm i @testing-library/react - @Testing-Library/User-Event
npm i @testing-library/user-event - Axios
npm i axios - Bootstrap
npm i bootstrap - Dontenv
npm i dotenv - React
npm i react - React-Bootstrap
npm i react-bootstrap - React-Dom
npm i react-dom - React-Moment
npm i react-moment - React-Router-DOM
npm i react-router-dom - React-Scripts
npm i react-scripts - Sass
npm i sass - Uuid
npm i uuid - Web-Vitals
npm i web-vitals
How to View a Profile
- After logging in and being brought to the Fit Feed, click on the top of one of the outfits to view another user's profile
- If you wish to view your own profile, click on My Fits in the Navbar
How to Add an Outfit
- After logging in, click Add New Outfit in the navbar
- Fill in all the fields and click the checkboxes of the tags you wish to add
- Click submit to add the new outfit
- Your outfit will appear on the Fit Feed page and your Profile page
How to Edit an Outfit
- From the Fit Feed, click view on the outfit you wish to edit, if you created it
- Once on the outfit page, click the Edit Outfit button in the lower right corner of the outfit
- Fill in the fields and uncheck or check the checkboxes you wish to change, and the click submit
- The edited details will appear on the outfit's page and on the Fit Feed page
How to Delete an Outfit
- From the Fit Feed, click view on the outfit you wish to delete, if you created it
- Once on the outfit page, click the Delete Outfit button in the lower right corner of the outfit
- The outfit will no longer appear on the Fit Feed page or your Profile page
How to Sort
- There are several ways to sort, either from the Fit Feed page, Outfit Page itself, or from the Navbar
- From the Fit Feed, click on a tag on one of the outfits to view the sorted page for the given tag
- From the Outfit Page, click on a tag on and view the sorted page for the given tag
- From the Navbar click Tag Search in the right corner. From there you will get a drop down, where you will be able to click on the tag and see the sorted page for the given tag
How to Rate Outfits Hot or Not
- From the Fit Feed, click view on an Outfit
- On the Outfit page, click the fire icon for Hot or no symbol for Not, according to how you wish to vote
- Under the caption of the outfit, it will display Hot or Not depending on the total number of votes (Hot is defaulted if no votes are made)
- The Hot or Not rating is also displayed on the Fit Feed page for each outfit
How to Add a Comment
- From the Fit Feed, click view on an Outfit
- On the Outfit page, enter your comment at the bottom of the page where it prompts you to do so
- Click submit to have your comment appear on the Outfit Page
- The comment will appear at the bottom of the page under the Enter your Comment form
How to Delete a Comment
- From the Fit Feed, click view on an Outfit
- On the Outfit page, if you created a comment, at X will appear on the upper right of the comment
- Click the X and the comment will be deleted
- The comment will not longer appear on the Outfit page
Outfits
| Endpoint | Component | AuthenticatedRoute? |
|---|---|---|
/outfits |
Index |
No |
/outfits/:outfitId |
Show |
Yes |
/outfits |
Create |
Yes |
/outfits/user/:userId |
Update |
No |
Tags
| Endpoint | Component | AuthenticatedRoute? |
|---|---|---|
/tags/:tagId |
Index |
No |
/tags/:outfitId |
Post |
Yes |
Votes
| Endpoint | Component | AuthenticatedRoute? |
|---|---|---|
/vote/:outfitId |
Post |
Yes |
User
| Endpoint | Component | AuthenticatedRoute? |
|---|---|---|
/sign-up |
SignUp |
No |
/sign-in |
SignIn |
No |
/sign-out |
SignOut |
Yes |
/change-password |
ChangePassword |
Yes |
As a Public User
- As a public user they want to be able to be view user's outfits
- They want be able click on user's profiles
- They want be able click on each individual outfit
- They want to be able to see the rating on the outfit
- They want to be able to see comments on an outfit
- They want to able to sign up if they choose for added functionality
As a Logged in User
- As a logged in user they want to be able to do all that a public user can do but with added functionality
- They want to be able to have a profile page with their outfits
- They want to be able to add their own outfits
- They want to be able to delete their own outfits
- They want to be able rate other user's outfits
- They want to be able to add comments on an outfit
- They want to be able to delete comments on an outfit
- Add Top Outfits aggregated by Hot rating to User's Profile page
- Expand on the amount of tags available for a user to select
- Add ability to upload photos via Cloudinary API