gaj23/face-it

A PWA that utilizes RESTful API, React, React-Hooks, and Cypress to generate make-up based on a users chosen lifestyle.

💄🌱 FaceIt 🐰💄

updated: 03/02/2020

---

Table of Contents

• Introduction
• Features
• Technologies
• Artist Credits
• Contributions
• Authors

---

Introduction

This project comes out of the need for an app that can help a concerned & conscientious consumer understand what beauty products match their lifestyle.

Originally, this project was built for a project with Turing School of Software & Design. See rubric here.

Features

To view:

https://face-it.vercel.app/

Categories:

• Home Page

• Selecting a Category

• Selecting a Product

• Viewing a Cosmetic's Details

• Using the Navigation Bar

• Search by Certification

• Error Message

• Desktop Additions

• Cypress User Flow Testing

Home Page

Upon navigating to our landing page, users see the available product categories: vegan, allergen friendly, and eco conscious.

Example of Home Page

Category Page

A user can select a category type and view makeup products available in that category.

Example of User flow

Example of Eco

Example of Allergen Friendly

Example of Vegan

Product Page

A user can select a category type, view makeup products available, and then view the items of that product type in that category.

Example of Mobile Experience

Cosmetic Details

A user can view a particular cosmetic's details such as brand, listed price, and available colors of that cosmetic.

Example of Mobile Experience

Navigation Bar

A user can click the links in the navigation bar to visit a category's section rather than scrolling to the associated picture below. They can access this navigation bar no matter where they are.

Example of Mobile Experience

Search Bar

A user can search for a product by the certification tag (such as 'organic' or 'gluten free') or brand (such as 'e.l.f')

Example of Mobile Experience

Error Message

If there's a failure to load data from the API or if there's been a user-side error, an error message will display to let the user know there's been a problem.

Example of Mobile Experience

Desktop Additions

Note hover functionality

Example of Mobile Experience

Cypress User Flow Testing

Testing the UX & UI of our app.

Example of Cypress Experience

Technologies

• React
• Router
• Cypress for Testing
• CSS
• HTML
• Webpack
• WAVE for accessibility auditing
• Lighthouse for PWA & accessibility auditing

Artist Credits

Thanks to the following artists from Unsplash:

• @noahbuscher
• @brookelark
• @daniele_franchi
• @kellysikkema
• @igorrand
• @joannakosinska
• @raphaellovaski
• @pesce
• @laurachouette

Future Iterations

More specifics about future work or refactoring can be found in this projects GH issues.

Contributions

Thank you Lola Dolinsky, Matthew Lane, Elle Li, Leta Keane, and Scott Ertmer for their time and patience.

To Contribute

If you'd like to contribute to the code, please complete the following steps:

• clone this repo locally: git clone git@github.com:gaj23/rancid.git <renameHere>
• API documentation & endpoints are here
  • Due to low rate limit of our chosen API you may choose to use the Data folder contained inside or our server
  • To use the local server in you CLI: git clone git@github.com:kelsiebesingeryeh/face-it-server.git <renameHere>
  • cd <nameOfServer>
  • npm init --yes
  • npm i express --save
  • node server.js
• from there please create a new branch following this pattern: git checkout -b initials/feature-fix/focus-of-branch
• cd into your local copy and run npm install
• Use Cypress for testing
• check that the following key-value pair in scripts is in your package.json
• "cypress": "cypress open"
• if not please download Cypress with npm i -D cypress and add the above to scripts.
• contribute as you'd like and push up your work for review Thank you.

Author

Kelsie Besinger Yeh GH	Connie Hong GH	Gabrielle Joyce GH