elbrewster / colorsandbox

Color Sandbox

Preview

Overview

This is a fun little project I did over my break to review React fundamentals. I gathered hex code color data and set it up in files for a front-end UI-intensive app experience. My goal was to get more comfortable handling state, local storage, conditional rendering, and to do a CSS review on responsive layouts. Since I made this app for myself for fun, I thought about how I might use it when designing other websites as a color picking aide for new palettes. The Sandbox container will be great for assessing color palettes with the Colorblindly Chrome add-on, and then with the Randomizer I can get ideas from a pre-set collection of 450 colors.

Deployed App

Visit my app here.

Setup & Installation

1. Click to open repo
2. Click the "Fork" button. (This will create a user copy of the repository.)
3. Open the Terminal application.
4. In Terminal, use the "cd" command to navigate to where the local repository will live.
5. In GitHub, click on the green "Code' dropdown.
6. You will see three clone options. Select "SSH".
7. Copy the SSH key.
8. In Terminal, run "git clone [insert copied SSH key here]".
9. In Terminal, use the "cd" command to navigate into the newly created directory.
10. Open the local repository in VS Code by typing: code .
11. Type npm run dev in your Terminal to run the Vite app in your browser.

Libraries and Frameworks

This app was made by El Brewster! You can find me at: * GitHub * LinkedIn