color-palette-generator

About

Let photos you like help you find the right color palette for your project. You can browse automatically loaded photos or search for specific photos. When an image is clicked on, the dominant 6 colors are extracted and displayed, allowing you to copy and paste these HEX codes directly into your project.

What's really going on?

grommet- used to create the UI. The components from its library make it easy to create a responsive layout.

unsplash- used to pull the images that populate the layout. On the home page, a random selection of images categorized by Unsplash as "featured" are displayed. However, a specific topic can also be searched for using the search bar. In all cases, the images displayed are coming from Unsplash. The user who uploaded the image is credited on the page that loads when an image is clicked on.

react-color-extractor- npm package used to extract six dominant colors from a selected image.

Run locally

In the project directory, you can run:

`npm start` or `yarn start`

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

Demo

Landing page

Search results

Detail page

review

Overall looks great 💟 good usage of styled-components, hooks, routing, and grommet.
I think you've gained a lot of mileage of front-end development with this app, I'm happy you were able to own and execute it!
See my review comments below, nothing too big but embracing them will help grow your mindset for future projects, most of them are food for thought...

Have you tried using https://codesandbox.io/s/4jltk instead of https://github.com/taysea/photo-search-app/blob/a0202abd8b37d0b8cae5b73b29370f56daafb565/package.json#L15
we are encouraged to use as less external packages as possible, and leverage grommet as much possible.
Using CRA can add a lot of dependencies you don't need, for a cleaner usage on future projects try to use https://github.com/ShimiSun/grommet-template-prettier, or use your own webpack boilerplate that is tidy and clean.
Learn a little bit about prettier, I see you are using .prettierignore, but I don't see how you are actually using prettier, so take a look if this file can be removed if it is not being used (less is better). Prettier will help you build consistently semantic apps. https://prettier.io/ (BTW, at JSConf some people commented it looks like the HPEDev logo :) )
Why do you use yarn if you are not using it https://github.com/taysea/photo-search-app/blob/a0202abd8b37d0b8cae5b73b29370f56daafb565/package.json#L50?
I also see you have a yarn.lock file while you are not really using yarn (according to your readme), this may be confusing for dependency management.
The project Readme file should explain a little more what this project is trying to solve, or which features it offers, I would put more details into it, people like to know what are they getting themselves into and some context will create a positive experience.
Your home page code, App.js, looks great, thanks for refactoring it.
I'd encourage to use hooks for ResponsiveContext https://github.com/taysea/photo-search-app/blob/a0202abd8b37d0b8cae5b73b29370f56daafb565/src/components/Guideline.js#L8 and https://github.com/taysea/photo-search-app/blob/a0202abd8b37d0b8cae5b73b29370f56daafb565/src/components/Palette.js#L56
See my example:
grommet/grommet#3276
Why not using grommet Paragraph? https://github.com/taysea/photo-search-app/blob/a0202abd8b37d0b8cae5b73b29370f56daafb565/src/components/ProfileInformation.js#L37
I think this box is redundant https://github.com/taysea/photo-search-app/blob/a0202abd8b37d0b8cae5b73b29370f56daafb565/src/components/Footer.js#L14

As mentioned ⬆️ , looks great! great work

taysea / color-palette-generator Goto Github PK