SCCO

Check out cosmetics' ingredients at a glance

The goal of the app was to help skin product users make informed decisions before making a purchase by providing a clear overview of the ingredients in each product. To display this information, I imported the Chart.js JavaScript library and used it to create a bar chart that showed the total number of ingredients and highlighted those that were low risk, medium risk, or high risk.

This project includes a backend database that stores information about the product and its ingredients, as well as user sign-in data and reviews. The database allows for the creation, reading, updating, and deleting of all stored data.

Built With

• React

• Ruby on Rails

• CSS

• Chart.js

• Render (for Deployment - visit: https://project-scco.onrender.com/ )

Getting Started

Prerequisites

• Install NPM packages

$ npm install

• Next, run the Rails server in one terminal:

$ rails s

• To access the admin page:

visit: http://localhost:3000/admin

• Open another terminal and run the React server:

$ npm start --prefix client

(back to top)

Usage

• See all ingredients as a chart at a glance

• See all ingredients in detail

(back to top)

*See/enter/edit/delete Reviews

*Signin or Create an account and stay signed in.

*Navigate to Admin page http://localhost:3000/admin and have access to add more products/ingredients, and manage users/reviews.

(back to top)

Tables Diagram developed with Figma

(back to top)