Deployment and Final Touches for The Color Picker App

By now, you’ve built a fully functional Color Picker App in React using Vite. The app lets users enter color names, hex codes, or mix multiple colors together. It also includes a surprise button that generates random blended colors and an interactive palette to click and select colors. The app dynamically displays the selected color inside a preview box while also showing the active palette below.

The final step is to share your project with others by deploying it online. In this module, we’ll cover pushing your code to GitHub, deploying the app with Netlify, and reviewing the project’s file structure.

1) Pushing Your App to GitHub

Before deployment, it’s good practice to keep your code safe in an online repository. GitHub is the most common option.

Step 1: Initialize Git
Open a terminal in your project’s root folder (where package.json is located) and run:

git init

git add .

git commit -m "Initial commit"

Step 2: Create a GitHub Repository

• Go to GitHub and log in.
• Click the + icon → New repository.
• Give it a name like color-picker-app.
• Keep it empty (don’t add README, .gitignore, or license).
• Click Create repository.

Step 3: Push Your Project
Back in your terminal, connect your app to GitHub:

git branch -M main

git remote add origin https://github.com/your-username/color-picker-app.git

git push -u origin main

If this is your first push, configure Git with your details:

git config --global user.name "Your Name"

git config --global user.email "[email protected]"

Your code will now appear in your GitHub repository.

2) Deploying to Netlify

With your code on GitHub, you can deploy your app and share it with a live link.

Step 1: Build the Project
Run the following command to create a production-ready build:

npm run build

This generates a dist/ folder, which contains the optimized version of your app.

Step 2: Set Up Netlify

• Go to Netlify and create a free account (or log in).
• Click Add New Site → Import an Existing Project.

Step 3: Connect GitHub

• Authorize Netlify to access your GitHub account.
• Select your color-picker-app repository.

Step 4: Configure Build Settings
Use the following:

• Build Command: npm run build
• Publish Directory: dist

Click Deploy Site. After a few moments, Netlify will provide you with a live link such as:

https://my-color-picker.netlify.app/

You can customize this link under Site Settings → Change Site Name.

Your Color Picker App is now live and ready to be shared.