View the deployed app here on Vercel!
I created this project to explore the Vue.js framework and TypeScript. Users can create a palette of five colors by choosing from several types of generation modes. For further refinement, users can specify a seed color for a palette, as well as lock in colors that they like between generations. Palettes can be saved for later viewing, or deleted if desired.
npm installnpm run devnpm run buildLint with ESLint
npm run lintI had some difficulty wrapping my mind around reactive state in Vue! Having mostly worked with React in the past, it felt very taboo to mutate my state variables directly. I would like to continue studying the options for reactivity, as I still don't have a firm grasp on when to reach for reactive() versus ref().
One feature that I really liked is the scoped styling option for components. This is a really handy feature that could be very useful for avoiding conflicts in larger applications. I enjoyed using CSS Modules during my apprenticeship for similar functionality, and it is nice to see a feature like this baked in!
Vue provides several options for state management, but I decided to try out Pinia in this project. Setting up a store for the main palette was very straightforward, and I can see several opportunities to refactor other areas in the app. I struggled a bit using emits for actions like saving/deleting palettes, and adding a new Pinia store would make these actions much simpler!
There is still a lot of room for continued exploration in this project, and many future additions to consider:
Save palettes in local storage to persist across refreshesComplete!Allow users to click on a saved palette to bring it up in the main palette viewComplete!Allow users to choose the type of palette generated (monochromatic, triad, etc.)Complete!- Allow users to name palettes
- Add functionality to share palettes
Palettes generated with The Color API
RGB Color Wheel, Folder, Trash, Padlock, and Lock icons by Icons8
Markdown badges by Ileriayo