Skip to content

Front end repository for project #2 of mod 4 at the Turing School of Software & Design

Notifications You must be signed in to change notification settings

pgoulding/palette-picker-fe

 
 

Repository files navigation

This project was bootstrapped with Create React App.

PALETTE! PICKER FE

Created By: Patrick Goulding (https://github.com/pgoulding) & David Engel (https://github.com/David5280) Build Status

Summary

PALETTE! PICKER FE is an application for designers, color enthusiasts, and those who just need some help picking a color scheme for their next project. For information on the PALETTE! PICKER back-end server, visit PALETTE! PICKER BE.

This application provides the user with an unlimited amount of unique color palettes, five hexcodes at a time. The user has the ability to lock certain colors they find appealing and continue generating new colors in the unlocked spaces. Three options are given for color scheme, and six options are given for scheme variation to generate more predictable colors. By clicking the "Create New Project!" button, a text input appears for the user enter a new project name, along with a save button directly below it to send it to the database for safe-keeping. A dropdown menu directly to the right will display all saved projects in order to save new palettes to that project. Palettes can be named before saving to a project.

When a user clicks the menu icon in the upper-left, they arrive at the projects page which displays all saved projects by their titles. On this page, a user can visit each individual project, delete projects, or navigate back to the home page by clicking on the back arrow or application logo. More options are available when visiting an individual project page, click on one of the project titles to see!

Each individual project page displays the title of the project up top and each palette saved to that project right below that. A user can scroll through all of their saved palettes for easy comparison, and delete old palettes with the "X" icon next to that palette's title. If one of the five colors isn't working out, a user can slick the randomize icon on that color to generate a new color, while keeping their four other beloved shades of happiness. This new color can be saved by clicking the save icon that appears only when a new color has been generated.

Both PALETTE! PICKER FE & BE were built in 11 days.

Learning Goals & Requirements

  1. Server-side testing
  2. Further understanding of complete CRUD endpoints
  3. Connecting BE & FE repositories using CORS
  4. Multiple environments: -testing -making use of automatic CI with TravisCI -Deployment to Heroku
  5. Semantic, specific, professional documention
  6. Modular file organization
  7. Experience with RESTful APIs
  8. Understanding od NodeJS Express

Installation

  1. clone this repo to your local machine
  2. run npm install to download all necessay dependencies
  3. run npm start to run the server
  4. open localhost:3000 (unless your terminal says otherwise)
  5. experiment and come up with some excellent palettes for your next project!

OR

Visit the GHpages branch of this application here!

Preview

soon to come

About

Front end repository for project #2 of mod 4 at the Turing School of Software & Design

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 87.5%
  • CSS 9.6%
  • HTML 2.9%