kaohman / palettepicker

PalettePicker

PalettePicker is a React app that utilizes Redux and React Router to create an intuitive color palette picking scheme, similar to https://coolors.co.

Live Site

https://palettes-picker.herokuapp.com/

Installation Steps (Back End)

• Clone down backend repo: https://github.com/foxwellm/PalettePickerApi.git
• Install dependencies : npm install
• Start Local Host 3001: npm start
• For testing suite: npm test

Installation Steps (Front End)

• Clone this repo: https://github.com/kaohman/PalettePicker.git
• Install dependencies: npm install
• Start Local Host 3000: npm start and visit localhost:3000 in your browser
• For testing suite: npm test

Background/About

This application is a two-week-long paired project intended to solidify our RESTful API design skills and get us familiar with the patterns associated with building a single app across multiple repositories.

Primary Technologies Used - Front End

• React
• Redux
• Redux-Thunk
• React Router
• SCSS
• Jest
• Enzyme
• Masonry

Primary Technologies Used - Back End

• Node.js
• Postgres
• Express
• Knex
• Jest

Screenshots

Main Page

Search Page

Original Wireframes

Main Page

Search Page

Next Steps

Future iterations of the project could include:

• Ability to edit project name
• Ability to edit palette names and colors
• Having the ability to sign in and create an account
• Load only 10 projects at a time to prevent fetch slowdown

Contributors

Karin Ohman

Matthew Foxwell

palettepicker's Issues

Default Show 10 projects

• Setup get endpoint to only give 10 projects at a time
• Default give 10 most recent projects from backend
• Add Show More button functionality

Deploy

Deploy FE linked to BE on Heroku

Sort projects by most recent

Sort by updated_at time from backend for project OR palette. Also delete load more button.

Never need to refresh the page to see new information

Design Research

As part of your submission template, we’d like you to do some design research. Pick a single UI element off of Dribbble (or any other site you find to be really pretty) that you like and use it to inspire the rest of your design. For example:

I really like the subtle drop-shadows on these notifications, and the way the notification icons vary slightly in color by being slightly lighter than the rest of the background. I will incorporate these types of drop-shadows on elements in my project and play with this particular use of color.

In your project submission, you will link to your wireframes and to your design inspiration(s).

Save a generated palette to a project folder

• The saved palette should appear in the folder with the name of the palette (specified by the user) and the saved palette colors
• When you click on the name or colors in the saved palette, the palette generator should show the colors of that saved palette
• The saved palette should persist in your backend database

Put/Patch Projects/Palettes

• Ability to edit project name
• Ability to edit palette name
• Ability to edit palette colors

Styling

• Style project cards
• Style buttons
• Finalize all styling
• Update error messages displayed on dom

Testing

• Test components - mapToProps too
  • NotFound
  • App
  • ControlForm
  • Header
  • Home
  • Palette
  • ProjectCard
  • ProjectCardPalette
  • ProjectContainer
  • Share
• Test PUT thunks
• Test api call
• Test redux actions
• Test redux reducers

Generate Palette with 5 distinct colors

• You should be able to hold or “freeze” one color and generate a new palette while the frozen color remains the same
• The colors should be randomly generated (do not use predefined lists of color palettes)
• Colors should not duplicate!

Delete a palette from a project folder, which removes it from the page and database

PropTypes

don't forget to add 'em!

FE Documentation

README

• remember to add design research

Project/Palette Search Functionality

• as user types in search bar, projects update to show matching projects/palettes

Hook up Router

• Home page - title links to home
• Search route - make a search route
• Individual share palette route - shows just palette with link to home, get to specific id
• Individual share project route - shows just project card with link to home, get to specific id

Delete a project and all its associated palettes, which removes it from the page and database

Create a project folder as a place to save palettes

• You should be able to create multiple folders
• Folder names must be unique (you should not be able to create two folders with the same name)
• A folder can hold many saved palettes (a one-to-many relationship)
• The saved folder should persist in your backend database