jeduardorjx / palette-picker-frontend

Tone Zone Front-End

Tone Zone, a web based an application, allows users to create random palettes, lock colors they love, and create project folders to store those palettes. Tech used for this frontend:

• React
• Jest
• Enzyme
• NodeJS
• React Router
• SASS

Back-End

To our back-end repo for Tone Zone

Contributors

• J. Eduardo Rodriguez
• Lacy Rudd

To Try It Out

Create your own palettes!

Project Board

• Link to Project Board

Design Inspiration

We used InVision Studio to create our design

Screenshot

Screenshot of Landing Page

Screenshot of Lower Part of Landing Page

Screenshot of Projects Page

palette-picker-frontend's Issues

Add a PR Template

Delete a specific palette

A user should be able to delete a specific project

A user should be able to create a new palette

Link Project Board to BE Repo

Install SASS

Install SASS to use and handle all our styling

• run npm install node-sass
• Convert all .css files to .scss

Add Setup instructions on README

Add instructions so a user knows how to set this repo up on their local machines if they desire

Randomly generate a palette with 5 colors

*Must be truly random

Display Project Options

A user should be able to see their projects in the Project drop down

No Projects with Same Name

Ensure a Project cannot have the same name as another project

Toggle Lock Icon

On click - the lock icon should toggle from lock to unlock and and reflect in isLocked: T/F

Convert app to mobile friendly version

Convert desktop site to mobile friendly version using media queries

A user should be able to create a new project

NOTE A user should not be able to create the same project name twice

Add Delete functionality

• A user should be able to delete a palette from a project
• A user should be able to delete a project
• Deletion should persist on database
• A user should not need to refresh to see new information

DELETE a palette

Have a user be able to delete an individual palette

User data persist on BE

The new project should persist on BE

Add the 'Chewy' font to our app globally

• Download the Chewy font from https://fonts.google.com/specimen/Chewy
• Add it to our index.js header
• Set the font globally in the App.scss file

Color Locking Feature

Enable lock feature while allowing other colors on the palette to randomly change

Change placement and design of 'View All Projects Button'

Need to change the design and placement of 'View All Projects Button'

Display Palette Options

A user should be able to see the palettes correlated with their currently selected project

Add a PR Template