diff --git a/README.md b/README.md index 6db0ea8..299d12d 100644 --- a/README.md +++ b/README.md @@ -1,25 +1,88 @@ -# chrōma - Cosmetic Color Reference +# chrōma: Cosmetic Color Reference ## Introduction -Chroma is designed to help people with color vision deficiency (CVD) better identify and perceive the color of makeup products. We have 4 lines of products: eye shadow, eyeliner, lip balm, and lipsticks. Each product line has multiple choices of shades. Every shade not only has a photo and a name, but it also includes a text explanation to further describe the shade color and a color combination swatch. +chrōma: Cosmetic Color Reference is an app designed to help people with color vision deficiency (CVD) better identify and understand the colors in makeup products. Currently, we have 2 make-up categories (Lips and Eyes), each with two lines of product from Estée Lauder. Each product has multiple shades that users can look through. Each shade information includes: +- Reference images that help to understand the color +- Detailed textual color description +- Alt names for the color +- Color ‘story’ which allow users to envision a scene in nature +- Color support information (Hue, Hex code, RGB, HSL) -### Accessibility +This project is a group submission for the ELC Accessible Beauty Hackathon created by Caiyi Chen, Chris Kim, Heidi Ye, Ingrid Yau, and Neha Bhole. + -## Technologies Stack -Built using the MERN stack: +## Accessibility +The cosmetics industry has made progress in accessible design, but individuals with Color Vision Deficiency (CVD) still face significant challenges when it comes to exploring the world of cosmetics. From ambiguous color labels and packaging, to having to rely on others to make informed purchases, to feeling limited in their options, these obstacles can create a sense of exclusion. + +Recognizing the need for increased accessibility to color for users with CVD, we developed chrōma, an online database providing a comprehensive cosmetic color reference specifically for this community. Through chrōma, users can look up products to learn more about the color profile, texture, coverage, sensory or associations with nature of the color, and makeup suggestions. We also designed a grayscale UI option to provide a more comfortable experience for individuals with Achromatopisa (Total Color Blindness). This setting ensures that users exploring our database in greyscale have the same experience as those exploring in color, fulfilling our goal of inclusivity and accessibility. Our goal is to empower individuals with CVD to confidently navigate and explore the world of beauty and makeup by eliminating any barriers they may face. + +## Features +Fully functional, responsive, and accessible full-stack application built using the MERN stack: - Database: MongoDB - Front-end: React.js -- Back-end: Express.js +- Back-end: Express.js/Node.js +- Deployed on: +UI Design +- Grayscale toggle that allows users to switch between full color and grayscale +- Comprehensive color descriptors including, color profile, texture, coverage, sensory or associations with nature of the color, and makeup suggestions, to provide a better understanding of the color for individuals with CVD. ## Build Processes - +### Design +Design: Figma +The design prioritizes accessibility and centers users who experience color differently. It is intentionally straightforward, functional, and provides ample contrast and interaction cues for seamless navigation. -## Future Implementations +![]() + +Our core functionality is to make color information easily accessible and understandable. We achieve this by presenting swatches of the color range of a product against pure black (#000000) and pure white (#FFFFFF), serving as a reference for the color's shade and tint. + +![]() +![]() + +Based on our user research, we understand that texture and associations with sensory or natural elements are crucial in helping individuals with CVD comprehend color. With this in mind, we have created a comprehensive breakdown of color information, including color description (with alternative names), color story, and color support details. Our images showcase the product, texture, complementary imagery for color story, color alone, and color against black and white to enhance the user's understanding of the color profile. To make the selection process more accessible, we have also included a brief description of texture and color in the dropdown selector. + +![]() + +The design system was also intentionally kept uncomplicated, by exploring different ways to enhance visual hierarchy and interest in lieu of a wider color system. Our goal was to make the colors from the products stand out without sacrificing the overall visual appeal of the database. We utilized well-established font family, weight, and sizes, shadow elevation and micro interactions to assist with visual hierarchy and interaction cues. +![]() +![]() +Responsive mobile design designed with touchscreen interactions +![]() +Grayscale toggle option to provide a more comfortable experience for individuals with Achromatopsia (Total Color Blindness). +![]() +### Development +Architechture +The backend system is built using the Model-View-Controller (MVC) architecture pattern. The Model is created using Mongoose to connect to MongoDB Atlas, the Controller uses Express.js, and the View is built using React. By using this pattern, the code is organized in a way that makes it easier to maintain and scale the application. + +Database Setup +The project uses MongoDB Atlas as the database for storing data. There are three models used in the database - Category, Product, and Shade. +Categories to Products have a one-to-many relationship, where each category can have many products associated with it. +Category Schema is referenced in the Product Schema so that products can be queried independently. +Products to Shades also have a one-to-many relationship, where each product can have many shades associated with it. +Shade Schema is embedded in the Product Schema to simplify queries and improve performance. + +ERD +![]() + +API Endpoints +The backend provides only one API endpoint at the moment, which is implemented using the Express.js router in the ./routes/api/categories.js file. This endpoint allows you to query data about categories in the database using a GET request. + +In future implementations, we plan to add more endpoints to provide additional functionality, such as the ability to create, update, and delete categories and products, as well as endpoints for managing user-related tasks. + + +## Future Implementations +Add more categories and products into the database +Add more brands beyond Estée Lauder into the database +Add search and filter functionality: +By similar products or colors +Complementary products or colors +Display settings that can be personalized (i.e Contrast or text size adjustments) +User Authentication (i.e. build favorites list, own profiles, different access points for different types of users) +Community aspect (i.e. discussions, comments, reviews, likes) +Multiple toggle settings to target all types of CVD (i.e. red-green, blue-yellow, etc.) diff --git a/controllers/api/categories.js b/controllers/api/categories.js index aef02b9..fd69a74 100644 --- a/controllers/api/categories.js +++ b/controllers/api/categories.js @@ -1,5 +1,4 @@ const Category = require('../../models/category'); -// const Product = require('../../models/product'); module.exports = { index, diff --git a/notes.txt b/notes.txt deleted file mode 100644 index 3be2597..0000000 --- a/notes.txt +++ /dev/null @@ -1,15 +0,0 @@ -Backend Notes For ReadMe - -Sections -Planning -ERD -ERD explained below - -Database Setup -- Have three models - Category, Product, Shade -- Categories to Products has a one to many relationship - - This needs to be references because we want products to be queriable independently -- Products to Shades also has a one to many relationship - - This needs to be embedded because we dont necessarily want to make a shade queriable independently - - diff --git a/routes/api/products.js b/routes/api/products.js deleted file mode 100644 index 2ff469b..0000000 --- a/routes/api/products.js +++ /dev/null @@ -1,5 +0,0 @@ -const express = require('express'); -const router = express.Router(); - - -module.exports = router; \ No newline at end of file diff --git a/routes/api/shades.js b/routes/api/shades.js deleted file mode 100644 index 2ff469b..0000000 --- a/routes/api/shades.js +++ /dev/null @@ -1,5 +0,0 @@ -const express = require('express'); -const router = express.Router(); - - -module.exports = router; \ No newline at end of file diff --git a/server.js b/server.js index f809c8d..7f4cd02 100644 --- a/server.js +++ b/server.js @@ -1,30 +1,20 @@ const express = require('express'); const path = require('path'); const logger = require('morgan'); -const bodyParser = require("body-parser"); require('dotenv').config(); -// Connect to db +// CONNECT TO DB require('./config/database'); const app = express(); -app.set('trust proxy', true); - -app.use(bodyParser.json()); -app.use(bodyParser.urlencoded({ extended: true })); app.use(logger('dev')); app.use(express.json()); - - app.use(express.static(path.join(__dirname, 'build'))); - // API ROUTES app.use('/api/categories', require('./routes/api/categories')); -app.use('/api/products', require('./routes/api/products')); -app.use('/api/shades', require('./routes/api/shades')); // CATCH ALL ROUTE app.get('/*', function (req, res) { diff --git a/src/assets/CategoryPage/Pure Color Envy Luxe EyeShadow Quad Limited Edition-DimensionalEyes-Rose_Shine-640x640-Product.jpeg b/src/assets/CategoryPage/Pure Color Envy Luxe EyeShadow Quad Limited Edition-DimensionalEyes-Rose_Shine-640x640-Product.jpeg deleted file mode 100644 index 8814d1a..0000000 Binary files a/src/assets/CategoryPage/Pure Color Envy Luxe EyeShadow Quad Limited Edition-DimensionalEyes-Rose_Shine-640x640-Product.jpeg and /dev/null differ diff --git a/src/assets/CategoryPage/Pure-Color-Envy-Paint-On-Liquid-LipColor-bronze-leaf-product.jpeg b/src/assets/CategoryPage/Pure-Color-Envy-Paint-On-Liquid-LipColor-bronze-leaf-product.jpeg deleted file mode 100644 index 27b62df..0000000 Binary files a/src/assets/CategoryPage/Pure-Color-Envy-Paint-On-Liquid-LipColor-bronze-leaf-product.jpeg and /dev/null differ diff --git a/src/assets/CategoryPage/Pure-Color-Revitalizing-Crystal-Balm-cosmic-crystal-product.jpeg b/src/assets/CategoryPage/Pure-Color-Revitalizing-Crystal-Balm-cosmic-crystal-product.jpeg deleted file mode 100644 index 425b9ae..0000000 Binary files a/src/assets/CategoryPage/Pure-Color-Revitalizing-Crystal-Balm-cosmic-crystal-product.jpeg and /dev/null differ diff --git a/src/assets/CategoryPage/Smoke and Brighten Kajal Eyeliner Duo-Bordeaux-Ivory-640x640-Product.jpeg b/src/assets/CategoryPage/Smoke and Brighten Kajal Eyeliner Duo-Bordeaux-Ivory-640x640-Product.jpeg deleted file mode 100644 index e912683..0000000 Binary files a/src/assets/CategoryPage/Smoke and Brighten Kajal Eyeliner Duo-Bordeaux-Ivory-640x640-Product.jpeg and /dev/null differ diff --git a/src/assets/CategoryPage/eyes1-productpagecartswatch-desktop.png b/src/assets/CategoryPage/eyes1-productpagecartswatch-desktop.png deleted file mode 100644 index 4bc0d05..0000000 Binary files a/src/assets/CategoryPage/eyes1-productpagecartswatch-desktop.png and /dev/null differ diff --git a/src/assets/CategoryPage/eyes2-productpagecartswatch-desktop.png b/src/assets/CategoryPage/eyes2-productpagecartswatch-desktop.png deleted file mode 100644 index d0ec376..0000000 Binary files a/src/assets/CategoryPage/eyes2-productpagecartswatch-desktop.png and /dev/null differ diff --git a/src/assets/CategoryPage/index.js b/src/assets/CategoryPage/index.js deleted file mode 100644 index afac73d..0000000 --- a/src/assets/CategoryPage/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import lips from "./Lips.jpg" -import eyes from "./Eyes.jpg" - -const images = { - lips, - eyes -} - -export default images; \ No newline at end of file diff --git a/src/assets/CategoryPage/lips1-productpagecartswatch-desktop.png b/src/assets/CategoryPage/lips1-productpagecartswatch-desktop.png deleted file mode 100644 index f5864f0..0000000 Binary files a/src/assets/CategoryPage/lips1-productpagecartswatch-desktop.png and /dev/null differ diff --git a/src/assets/CategoryPage/lips2-productpagecartswatch-desktop.png b/src/assets/CategoryPage/lips2-productpagecartswatch-desktop.png deleted file mode 100644 index 001b402..0000000 Binary files a/src/assets/CategoryPage/lips2-productpagecartswatch-desktop.png and /dev/null differ diff --git a/src/assets/LandingPage/Eyes.jpg b/src/assets/LandingPage/Eyes.jpg deleted file mode 100644 index 8b9422a..0000000 Binary files a/src/assets/LandingPage/Eyes.jpg and /dev/null differ diff --git a/src/assets/LandingPage/Lips.jpg b/src/assets/LandingPage/Lips.jpg deleted file mode 100644 index 7cca646..0000000 Binary files a/src/assets/LandingPage/Lips.jpg and /dev/null differ diff --git a/src/assets/LandingPage/index.js b/src/assets/LandingPage/index.js deleted file mode 100644 index afac73d..0000000 --- a/src/assets/LandingPage/index.js +++ /dev/null @@ -1,9 +0,0 @@ -import lips from "./Lips.jpg" -import eyes from "./Eyes.jpg" - -const images = { - lips, - eyes -} - -export default images; \ No newline at end of file diff --git a/src/assets/lips1-productpagecartswatch-desktop.png b/src/assets/lips1-productpagecartswatch-desktop.png deleted file mode 100644 index f5864f0..0000000 Binary files a/src/assets/lips1-productpagecartswatch-desktop.png and /dev/null differ diff --git a/src/components/TheCreators.js b/src/components/TheCreators.js index 0db1793..ee215f6 100644 --- a/src/components/TheCreators.js +++ b/src/components/TheCreators.js @@ -1,7 +1,7 @@ const TheCreators = () => { return (
-

The Creators

+

The Creators

); }; diff --git a/src/notes.txt b/src/notes.txt deleted file mode 100644 index d49c020..0000000 --- a/src/notes.txt +++ /dev/null @@ -1,29 +0,0 @@ -LandingPage -- when user clicks on the category, API is called (take the name of the category and send it with the API) -- this opens up the category page (pg 2) -(onClick) - -CategoryPage (one page for both eyes and lips) -- In the productCard: - - image - - brand - - name of product - - how many shades - - swatch img -- when user clicks on a productCard, it calls API (take the name of the product) -(onClick) - -ProductPage (one page for ALL products) -- Brand Name -- Product Name -- Product Description -- How to use -- Ingredients -- Shades: (onChange) - - Color Name - - Swatch Image - - Color Alt Name - - Color Description - - Finding earthy tones - - Color Support Information - - 5 different images