Pre-requisites & Tech Stack Used to Build The Color Picker App

Before we start building the Color Picker App, let’s make sure your development environment is ready. In this module, we’ll also cover the technologies behind the app so you can see how everything works together as you code along.

1) Basic Requirements

• Node.js and npm: Install Node.js (version 16 or newer). npm is included with Node.js and is needed to install project dependencies. You can download it from nodejs.org. Since this project uses Vite, a modern Node.js version is required.

• Code Editor: Use Visual Studio Code (VSCode). It provides features like an integrated terminal, syntax highlighting, and useful extensions for React development.

• Web Browser: Any modern browser such as Chrome, Firefox, or Edge will work for running and testing your app.

• Git (Optional): If you want to save your progress or collaborate with others, install Git from git-scm.com.

• Basic Knowledge:
  You should already be familiar with:

  • HTML and CSS fundamentals.
  • JavaScript ES6 features like arrow functions, array methods, and string operations.
  • React basics such as JSX, components, and the useState hook. We will also explain helper functions and interactive logic as we build the app.

2) Tech Stack Used

• React with Vite: We used React to build the user interface and Vite as the project setup tool. Vite is faster and more lightweight than Create React App, giving you an optimized development and build process.

• JavaScript (ES6+): The app’s functionality (like blending colors or converting formats) is powered by modern JavaScript. We use array operations, regex, and helper functions to make the app interactive.

• HTML and CSS:

  • JSX handles the app’s structure.
  • Styling is split across two files:
    • App.css contains custom styling for the input field, buttons, color box, and palette.
    • index.css manages global defaults like font, layout, and responsiveness.

• Node.js + npm: Node.js runs the local development server, while npm installs project dependencies like React, React DOM, and Vite.

• Deployment (Netlify): Once the app was ready, we deployed it using Netlify for free hosting. This allows you (and anyone else) to access the app through a live link in your browser.

3) Input

This app allows users to interact with colors in different ways:

• Text Field: A single input box lets you type a color name, a hex code, or even combine multiple color names with + (for example, red + blue).

• Buttons:

  • Pick Color applies the typed input.
  • Surprise Me! generates one or more random colors and blends them automatically.

• Palette Clicks: You can also pick directly from the palette of pre-defined colors. Clicking multiple palette colors blends them together in real time.

The typed or clicked colors are stored in React state using useState, so the interface updates instantly without reloading the page.

4) Output

The app dynamically displays the color you choose in a large preview box:

• Color Preview: The main display box changes its background color based on the user’s input or selected palette. The current hex code is shown inside the box.

• Palette Preview: When multiple colors are chosen, smaller preview squares show the selected palette before blending.

• Error Handling: If an invalid input is typed (like an unknown color name), the app shows a simple alert message explaining that the input is not valid.

All of this is handled smoothly thanks to React’s state system and the helper functions that convert, validate, and blend colors.