This app was created by Nim Garcia and Lynne Rang.
This project is a Turing front-end development project focused on working with React and and Enzyme/Jest on the front-end and Express, Knex, SQL, Postgres, and middleware on the back-end.
This was an app inspired by palette picker websites like Coolers or HTMLColorCodes for generating and editing different color palettes. In this app, you can also save and manage palettes within different projects/categories and edit them after they are saved.
You can view this application live on Heroku at: https://palette-pal-fe.herokuapp.com/ !
OR
If you'd like to clone this repository to your own local machine, run the following commands in your terminal:
git clone https://github.com/nimsum/palette-pal-frontend.git
git clone https://github.com/nimsum/palette-pal-backend.gitThen for each repo, run the following command to install dependencies:
npm installTo view the app in action, run the following command in your terminal for the front-end:
npm startThen run the following command in your terminal to start the server for the back-end:
node server.jsRun an npm install, then create your own local database called 'palette_auth_test' using psql:
psql
# CREATE DATABASE palette_auth_test;
\qRun the following commands to create the database tables and seed them with test data:
knex migrate:latest
knex seed:runThen, go to http://localhost:3000/ in your browser to see the code running in the browser.
- On the home page, you can see a randomized color palette with five colors. You can hit the space bar or click "Generate New Palette" to get a new palette.
- You can also see hsl and rgb values for the colors by using the format drop-down at the top right.
- Instead of randomizing each color, you can also choose to see complementary color palettes or a gradient palette between two random colors by using the "Mode" dropdown at the top right.
- You can lock colors by clicking the "Hold" checkbox at the bottom of each color, and when you hit the space bar it will refresh any unheld colors.
- The "Generate New Palette" button will always refresh all five colors whether they are held or not.
- You can also edit each color by clicking the pencil icon and using the editor to choose what new color you would like.
- If you sign up for an account and log in, you can save a palette by clicking "Save Palette" at the bottom right and entering palette details.
- You can also access the "My Projects" page and manage your own projects and palettes if you are signed into an account.
- In the "My Projects" page, you can edit project or palette names by clicking directly on them. You can also edit palette colors using the pencil, icon, delete palettes by clicking the X at the top right, or delete whole projects by clicking the trash can in each project section.
- You can also view hsl and rgb values in the "My Projects" page using the "Format" dropdown, or filter to specific projects by selecting from the "Project" dropdown.
Given the limited time frame, we created a high-fidelity prototype of the design on Figma to have a more detailed idea of where we wanted everything to go on the different pages.
We plan to keep working on this to add more features like the following:
- Add media queries for better responsiveness across devices
- Add field validation & error handling in dialogs
- Add search bar to "My Projects" page to allow searching by project or palette names
- Refactor login and sign up dialogs into react router routes
- Load save palette dialog with specific project when "add new palette" is clicked from project screen
- Implement drag and drop to reorder projects and palettes
View the project specification on the Turing webpage for this project.
- SCSS
- Flex-box
- UI design
- React
- React router
- Es6 classes
- Async JavaScript
- API fetches
- Enzyme & Jest testing
- Webpack
- NPM
- Node.js/Express
- Knex
- Relational Databases
- SQL
- Postgres
- JWT Authentication
- Express Middleware
All credit goes to Turing School of Software for providing the project specifications.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent