Palette Picker FE

Palette Picker FE is a React App allows users to view color palettes, name and save them in projects all stored in our Palette Picker BE.

Focuses

  • Server-side testing.

  • Complete CRUD endpoints.

  • Connecting BE & FE repositories using CORS.

  • ultiple environments:

    • Testing.
    • Making use of automatic continuous integration with TravisCI deployment with Heroku.
  • Developing professional-level workflow habits.

    • Using a PR template.
    • Conducting code reviews in PRs.
    • Detailed agile workflow using a kanban system or GH issues keeping track of MVP features and nice-to-have features.
    • Agreeing to a commit message template.
    • Exploring git rebase and squashing.
    • Highly semantic, specific, professional documentation (README, API documentation, etc).

Planning

  • In developing our plan, we used Githubs built in projects board, in a kanban style.

See our project board here

  • Previous to building this app, we developed a backend, with Node.js using the Express framework and a PostgreSQL database.

View the backend repository developed alongside this application here

  • As we began the planning stage, we decided upon a relatively simple schema for our data.

Backend schema

  • Ultimately, we decided upon this dataflow between our React app and database.

Data map

Inspiration

  • Biking kits are great inspiration for simple, geometic designs. This jersey from TwinSix was a spark of inspiration since a plus symbol is made up of five equally sized squares and we wanted to display five colors.

Screen Shot 2019-12-02 at 8 58 38 PM

Screenshots

InVision Prototype

  • Next, a design is implemented and basic user flow is considered. Here is a clickable InVision Prototype: Click on a movies from the home screen then the main logo to get back.

https://projects.invisionapp.com/prototype/ck3vt0vk700dgef01pfzx9mcb/play

Live Site

  • Palette Picker home page

Palette Picker home page

  • Project and palette creation

Project and palette creation

  • Browse your saved palettes and projects

Browse your saved palettes and projects

Tech

  • Back-End: build using Express, knex, and PostgreSQL. Each API endpoint should respond with JSON-formatted data.

  • Front-End: build using React utilizing SCSS.

  • Tested with Jest/Enzyme.

BE Repo

BE Repo

Deployed BE

Team

Set Up

Clone repo.

git clone 

Install dependencies.

npm install

Run browser.

npm start

And enjoy!