By Zack Carlson
Live Link๐
- Navigate to repo
- Clone locally using
git clone https://github.com/zackcarlson/code-challenge.git
- Install dependencies using
npm install
- Run tests using
npm test
- Start your dev server using
npm run dev
- Navigate to app in browser
- Enjoy!
I used the following technologies: React, React Context, React Hooks, React Router, PropTypes, TypeScript, GraphQL, Apollo Client, Enzyme, Jest, Serve, Husky, Eslint, Prettier, and CSS. I used create-react-app to generate the scaffolding for this app.
- Use given font
- Replicate Sketch file
- Use iconography
- Click "Load More" button retrieves "# of your choice" more colors from database
- Display a grid list of colors on homepage
- When a color is clicked, it should be saved to the color cart.
- Cart Icon that displays the current number of added colors in the sites header.
- Clicking on the cart icon should route you to the
/cart
route view which should display the list of saved palette colors which a user can delete. - Refreshing the
/cart
route should reload the page and rehydrate the page with the correct data (ie the colors the user selected before refreshing the page). - The styling should be responsive so the application looks appropriate no matter the screen size.
Name and save current selected cart colors on the /cart
route and display a list of previously saved color palettes
- I completed this functionality using React Context and localStorage.
- I didn't add in route transitions, but I did add in appropriate hover effects.