{"id":26218084,"url":"https://github.com/arnobt78/color-generator--react-fundamental-project-9","last_synced_at":"2026-04-04T16:36:05.575Z","repository":{"id":276597216,"uuid":"929735421","full_name":"arnobt78/Color-Generator--React-Fundamental-Project-9","owner":"arnobt78","description":"A hands-on React app that generates color palettes from any hex color. Enter a hex code or use the built-in color picker to get a full set of tints and shades, then copy any hex value to the clipboard with one click. Built with React, Vite, values.js, and react-toastify—ideal for learning component state, third-party libraries, \u0026 the Clipboard API","archived":false,"fork":false,"pushed_at":"2026-03-11T14:11:14.000Z","size":177,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-03-12T10:06:50.455Z","etag":null,"topics":["clipboard-api","color-generator","color-palette","color-picker","copy-to-clipboard","educational-project","functional-components","hex-color","javascript","react","react-basics","react-components","react-fundamentals","react-learning","react-toastify","react-tutorial","tints-and-shades","toast-notifications","valuejs","vite"],"latest_commit_sha":null,"homepage":"https://create-color.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobt78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-09T09:13:04.000Z","updated_at":"2026-03-11T14:11:19.000Z","dependencies_parsed_at":"2025-02-09T10:34:42.928Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/Color-Generator--React-Fundamental-Project-9","commit_stats":null,"previous_names":["arnobt78/color-generator--react-fundamental-project-9","arnobt78/color-generator--react-frontend-fundamental-project-9"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/arnobt78/Color-Generator--React-Fundamental-Project-9","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FColor-Generator--React-Fundamental-Project-9","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FColor-Generator--React-Fundamental-Project-9/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FColor-Generator--React-Fundamental-Project-9/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FColor-Generator--React-Fundamental-Project-9/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Color-Generator--React-Fundamental-Project-9/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FColor-Generator--React-Fundamental-Project-9/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31405705,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["clipboard-api","color-generator","color-palette","color-picker","copy-to-clipboard","educational-project","functional-components","hex-color","javascript","react","react-basics","react-components","react-fundamentals","react-learning","react-toastify","react-tutorial","tints-and-shades","toast-notifications","valuejs","vite"],"created_at":"2025-03-12T13:15:27.129Z","updated_at":"2026-04-04T16:36:05.547Z","avatar_url":"https://github.com/arnobt78.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Color Generator - React, Vite, JavaScript, Values.js, React-Toastify, Clipboard API, Fundamental Project 9\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Vite](https://img.shields.io/badge/Vite-4.1-646CFF?logo=vite\u0026logoColor=white)](https://vitejs.dev/)\n[![React](https://img.shields.io/badge/React-18.2-blue?logo=react\u0026logoColor=white)](https://react.dev/)\n[![JavaScript](https://img.shields.io/badge/JavaScript-ES6%2B-F7DF1E?logo=javascript\u0026logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript)\n\nA hands-on React app that generates color palettes from any hex color. Enter a hex code or use the built-in color picker to get a full set of tints and shades, then copy any hex value to the clipboard with one click. Built with React, Vite, values.js, and react-toastify—ideal for learning component state, third-party libraries, and the Clipboard API.\n\n- **Live Demo:** [https://create-color.vercel.app/](https://create-color.vercel.app/)\n\n![Screenshot 2026-03-11 at 15 09 29](https://github.com/user-attachments/assets/13966ee6-e633-4be6-bab0-66292eaeba08)\n\n## Table of Contents\n\n1. [Project Summary](#project-summary)\n2. [Live Demo](#live-demo)\n3. [Features](#features)\n4. [Technologies Used](#technologies-used)\n5. [Project Structure](#project-structure)\n6. [Setup \u0026 Installation](#setup--installation)\n7. [Environment Variables (.env)](#environment-variables-env)\n8. [How to Run \u0026 Use](#how-to-run--use)\n9. [Usage Instructions](#usage-instructions)\n10. [Component Walkthrough](#component-walkthrough)\n11. [Key Functionality \u0026 APIs](#key-functionality--apis)\n12. [Routes \u0026 Architecture](#routes--architecture)\n13. [Styling and Responsive Design](#styling-and-responsive-design)\n14. [Code Examples \u0026 Teaching Content](#code-examples--teaching-content)\n15. [Reusing Components in Other Projects](#reusing-components-in-other-projects)\n16. [Learning Outcomes](#learning-outcomes)\n17. [Keywords](#keywords)\n18. [Conclusion](#conclusion)\n19. [License](#license)\n\n---\n\n## Project Summary\n\nThis project is a **client-side only** color palette generator. There is no backend server or database: all logic runs in the browser. You pick or type a hex color, and the app uses the **values.js** library to compute tints (lighter) and shades (darker) in 10% steps. Each swatch is clickable to copy its hex code via the **Clipboard API**, with **react-toastify** used for success and error messages. The UI is built with React functional components and hooks, styled with CSS (including CSS Grid), and bundled with Vite.\n\n---\n\n## Live Demo\n\n**Production URL:** [https://create-color.vercel.app/](https://create-color.vercel.app/)\n\nYou can use the live demo without installing anything—enter a hex (e.g. `#f15025`) or use the color picker, then click any generated color to copy its hex value.\n\n---\n\n## Features\n\n- **Hex input \u0026 color picker** — Enter a color as hex (e.g. `#f15025`) or use the native color picker.\n- **Instant palette generation** — Generate a full set of tints and shades (10% steps) from one base color.\n- **Copy to clipboard** — Click any color swatch to copy its hex code; toast confirms success or error.\n- **Responsive grid** — Color grid uses CSS Grid and adapts to different screen sizes.\n- **Toast notifications** — Success and error feedback via react-toastify (e.g. invalid hex, copy success/failure).\n- **Component-based structure** — Clear separation: `App` (state), `Form` (input), `ColorList` / `SingleColor` (display and copy).\n\n---\n\n## Technologies Used\n\n| Technology            | Purpose                                      |\n| --------------------- | -------------------------------------------- |\n| **React 18**          | UI components, state (useState), composition |\n| **Vite 4**            | Build tool, dev server, HMR                  |\n| **JavaScript (ES6+)** | No TypeScript; modern JS and JSX             |\n| **values.js**         | Generate tints/shades from a hex color       |\n| **react-toastify**    | Toast notifications (success/error)          |\n| **nanoid**            | Unique keys for list items                   |\n| **Clipboard API**     | Browser API to copy hex to clipboard         |\n| **CSS Grid**          | Responsive layout for color swatches         |\n\n---\n\n## Project Structure\n\n```bash\n09-color-generator/\n├── public/\n│   └── vite.svg              # Favicon / app icon\n├── src/\n│   ├── components/\n│   │   ├── Form.jsx           # Color input form (hex + color picker)\n│   │   ├── ColorList.jsx      # Grid container for color swatches\n│   │   └── SingleColor.jsx    # One swatch + copy-on-click\n│   ├── App.jsx                # Root: state, addColor, Form + ColorList\n│   ├── main.jsx               # React root mount + global CSS imports\n│   └── index.css              # Global + project-specific styles\n├── index.html                 # Entry HTML, meta, script to main.jsx\n├── vite.config.js             # Vite + React plugin config\n├── package.json\n├── eslint.config.js           # ESLint 9 flat config (React, hooks)\n└── README.md\n```\n\n**Entry point:** `index.html` loads `/src/main.jsx` → `main.jsx` renders `\u003cApp /\u003e` into `#root`. There are no route definitions (single-page app, single view).\n\n---\n\n## Setup \u0026 Installation\n\n1. **Clone the repository**\n\n   ```bash\n   git clone https://github.com/arnobt78/Color-Generator--React-Fundamental-Project-9.git\n   cd Color-Generator--React-Fundamental-Project-9\n   ```\n\n2. **Install dependencies**\n\n   ```bash\n   npm install\n   ```\n\n3. **Start the development server**\n\n   ```bash\n   npm run dev\n   ```\n\n   The app will be at `http://localhost:5173` (or the port Vite prints in the terminal).\n\n4. **Build for production**\n\n   ```bash\n   npm run build\n   ```\n\n   Output goes to `dist/`. Preview the production build with:\n\n   ```bash\n   npm run preview\n   ```\n\n5. **Lint**\n\n   ```bash\n   npm run lint\n   ```\n\n   Runs ESLint on `src/` with zero warnings allowed.\n\n---\n\n## Environment Variables (.env)\n\nThis project **does not use any environment variables** out of the box. All behavior is driven by user input and client-side libraries (values.js, react-toastify). There are no API keys, feature flags, or backend URLs to configure.\n\nIf you extend the project (e.g. analytics, optional API, or feature flags), you can use Vite’s env support:\n\n- **Creating env files:** In the project root, add `.env`, `.env.local`, `.env.development`, or `.env.production`.\n- **Naming:** Only variables prefixed with `VITE_` are exposed to the client. Example: `VITE_APP_TITLE=Color Generator`.\n- **Usage in code:** Read them via `import.meta.env.VITE_APP_TITLE`. Do not put secrets in `VITE_*`—they are embedded in the client bundle.\n- **Example:**  \n  Create `.env.local` with:\n\n  ```env\n  VITE_APP_TITLE=Color Generator\n  ```\n\n  Then in JS: `const title = import.meta.env.VITE_APP_TITLE;`\n\nNo `.env` file is required to run or build the project as-is.\n\n---\n\n## How to Run \u0026 Use\n\n- **Development:** `npm run dev` → open the URL shown (e.g. `http://localhost:5173`).\n- **Production build:** `npm run build` → `npm run preview` to test the `dist/` build locally.\n- **Usage flow:** Type or pick a color → click **submit** → click any swatch to copy its hex. Invalid hex shows an error toast.\n\n---\n\n## Usage Instructions\n\n1. Enter a color in hex format (e.g. `#f15025`) in the text input, or use the color picker.\n2. Click **submit** to generate a palette of tints and shades (10% steps).\n3. Click any color in the grid to copy its hex code to the clipboard; a toast confirms success.\n4. If the input is invalid, a toast shows the error message from values.js.\n5. Use the copied hex codes in your design tools, CSS, or other apps.\n\n---\n\n## Component Walkthrough\n\n### App Component (`src/App.jsx`)\n\n- **Role:** Root component. Holds the list of generated colors and the handler that generates a new palette from a hex string.\n- **State:** `colors` — array of color objects from values.js (each has `hex`, `weight`, etc.).\n- **Handler:** `addColor(color)` — calls `new Values(color).all(10)`, updates `colors`, or shows a toast on error.\n- **Renders:** `\u003cForm addColor={addColor} /\u003e`, `\u003cColorList colors={colors} /\u003e`, and `\u003cToastContainer position='top-center' /\u003e`.\n\n---\n\n### Form Component (`src/components/Form.jsx`)\n\n- **Role:** Collects the user’s color input (text + color picker) and submits it to the parent.\n- **State:** `color` — current hex string (or empty).\n- **Behavior:** Both the color picker and the text input update `color`; form submit calls `addColor(color)`.\n- **Renders:** A section with heading “color generator”, a form with color input, text input (placeholder `#f15025`), and a submit button styled with the current color.\n\n---\n\n### ColorList Component (`src/components/ColorList.jsx`)\n\n- **Role:** Renders the list of generated colors as a grid.\n- **Props:** `colors` — array of color objects from values.js.\n- **Behavior:** Maps over `colors` and renders a `SingleColor` for each, using `nanoid()` for the React `key`.\n- **Renders:** A `\u003csection className='colors'\u003e` containing multiple `SingleColor` components.\n\n---\n\n### SingleColor Component (`src/components/SingleColor.jsx`)\n\n- **Role:** One color swatch: shows weight (%) and hex, and copies hex to clipboard on click.\n- **Props:** `index` (number), `color` (object with `hex`, `weight`).\n- **Behavior:** Click handler checks `navigator.clipboard`, then `navigator.clipboard.writeText(\\`#${hex}\\`)`, and shows success or error toast.\n- **Renders:** An `\u003carticle\u003e` with background `#${hex}`, weight and hex text; uses class `color-light` when `index \u003e 10` for readable text on light tints.\n\n---\n\n## Key Functionality \u0026 APIs\n\n### Color generation (values.js)\n\n- **Library:** [values.js](https://github.com/noeldelgado/values.js) — creates tints and shades from a single hex.\n- **Usage:**\n\n  ```js\n  import Values from \"values.js\";\n\n  const colors = new Values(\"#f15025\").all(10); // 10% steps\n  // colors is an array of objects: { hex, weight, type, ... }\n  ```\n\n- **Error handling:** Invalid hex (e.g. `\"red\"` or `\"#ggg\"`) throws; the app catches and shows `error.message` via toast.\n\n---\n\n### Notifications (react-toastify)\n\n- **Setup in App.jsx:**\n\n  ```js\n  import { ToastContainer, toast } from \"react-toastify\";\n  import \"react-toastify/dist/ReactToastify.css\";\n\n  // In JSX:\n  \u003cToastContainer position=\"top-center\" /\u003e;\n  ```\n\n- **Usage:**\n\n  ```js\n  toast.success(\"Color copied to clipboard\");\n  toast.error(\"Invalid color value\");\n  toast.error(error.message); // from catch block\n  ```\n\n---\n\n### Copy to clipboard (Clipboard API)\n\n- **API:** `navigator.clipboard.writeText(text)` (async, returns a Promise).\n- **Usage in SingleColor.jsx:**\n\n  ```js\n  if (navigator.clipboard) {\n    try {\n      await navigator.clipboard.writeText(`#${hex}`);\n      toast.success(\"Color copied to clipboard\");\n    } catch {\n      toast.error(\"Failed to copy color to clipboard\");\n    }\n  } else {\n    toast.error(\"Clipboard access not available\");\n  }\n  ```\n\n- **Note:** Clipboard API requires a secure context (HTTPS or localhost).\n\n---\n\n## Routes \u0026 Architecture\n\n- **Routes:** None. This is a single-page app with one screen: form at the top, color grid below.\n- **Data flow:** One-way. User input → `Form` → `addColor` in `App` → `colors` state → `ColorList` → `SingleColor`. No router, no backend, no API endpoints.\n- **Backend:** There is no backend; everything runs in the browser.\n\n---\n\n## Styling and Responsive Design\n\n- **Global styles:** `src/index.css` — resets, CSS variables (e.g. `--primary-500`, `--grey-*`, `--borderRadius`), typography, buttons, form and alert classes.\n- **Project-specific:** `.container` (form layout), `.color-form`, `.colors` (grid), `.color` / `.color-light` (swatch and text contrast).\n- **Grid layout:**\n\n  ```css\n  .colors {\n    min-height: calc(100vh - 160px);\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(223.33px, 1fr));\n    grid-template-rows: repeat(auto-fit, minmax(96px, 1fr));\n  }\n  ```\n\n- **Responsive:** At `min-width: 768px`, the form switches to a horizontal layout (color picker + text input + button in one row). The color grid always uses `auto-fit` and min widths so it adapts to screen size.\n\n---\n\n## Code Examples \u0026 Teaching Content\n\n### Generate palette on submit (App.jsx)\n\n```js\nimport Values from \"values.js\";\nimport { useState } from \"react\";\nimport { toast } from \"react-toastify\";\n\nconst [colors, setColors] = useState(new Values(\"#f15025\").all(10));\n\nconst addColor = (color) =\u003e {\n  try {\n    const newColors = new Values(color).all(10);\n    setColors(newColors);\n  } catch (error) {\n    toast.error(error.message);\n  }\n};\n```\n\n---\n\n### Form with controlled input (Form.jsx)\n\n```js\nconst [color, setColor] = useState(\"\");\n\nconst handleSubmit = (e) =\u003e {\n  e.preventDefault();\n  addColor(color);\n};\n\n// In JSX: value={color}, onChange={(e) =\u003e setColor(e.target.value)} on both inputs\n```\n\n---\n\n### Copy hex on click (SingleColor.jsx)\n\n```js\nconst saveToClipboard = async () =\u003e {\n  if (navigator.clipboard) {\n    try {\n      await navigator.clipboard.writeText(`#${hex}`);\n      toast.success(\"Color copied to clipboard\");\n    } catch {\n      toast.error(\"Failed to copy color to clipboard\");\n    }\n  } else {\n    toast.error(\"Clipboard access not available\");\n  }\n};\n\n// On the article: onClick={saveToClipboard}\n```\n\n---\n\n### List with stable keys (ColorList.jsx)\n\n```js\nimport { nanoid } from \"nanoid\";\n\n{\n  colors.map((color, index) =\u003e (\n    \u003cSingleColor key={nanoid()} color={color} index={index} /\u003e\n  ));\n  olors.map((color, index) =\u003e (\n    \u003cSingleColor key={nanoid()} color={color} index={index} /\u003e\n  ));\n}\n```\n\nUsing `nanoid()` gives a unique key per item. For a static list that never reorders, `index` could be used as key instead.\n\n---\n\n## Reusing Components in Other Projects\n\n- **Form.jsx:** Copy the file; it only needs `addColor(color)` from the parent. You can rename the heading or placeholder and restyle with your own CSS.\n- **ColorList.jsx:** Pass any array of objects that have at least the shape `{ hex, weight }` (or adapt SingleColor to your shape). Replace `nanoid` with another key strategy if needed.\n- **SingleColor.jsx:** Reusable wherever you have a `{ hex, weight }` (or similar) object. Ensure the parent app has `ToastContainer` and `react-toastify` CSS if you use toasts.\n- **Pattern:** State lives in a parent; Form and ColorList are presentational plus minimal behavior (submit, click-to-copy). You can wrap this in a route or embed the grid in a larger design tool UI.\n\n---\n\n## Learning Outcomes\n\n- Use React functional components and `useState` for local and lifted state.\n- Compose components and pass props/callbacks (Form → App → ColorList → SingleColor).\n- Integrate third-party libraries (values.js, react-toastify) in a Vite + React app.\n- Use the Clipboard API for copy-to-clipboard and handle success/error with toasts.\n- Structure a small app with clear separation: one smart component (App) and presentational components (Form, ColorList, SingleColor).\n- Apply responsive CSS Grid and CSS variables for layout and theming.\n\n---\n\n## Keywords\n\nReact, Color Generator, Hex Color, Tints and Shades, Color Palette, values.js, react-toastify, Color Picker, Copy to Clipboard, Clipboard API, CSS Grid, Functional Components, useState, JavaScript ES6+, Vite, Web Development, Frontend, UI, Hooks, Toast Notifications, Responsive Design.\n\n---\n\n## Conclusion\n\nThis project is a focused introduction to React fundamentals: state, props, event handlers, and integration with external libraries and browser APIs. It has no backend or environment variables, so you can run it immediately after `npm install` and `npm run dev`. You can extend it with features like saving palettes, exporting to JSON/CSS, or switching to a different step size for tints and shades. The component structure and patterns (controlled inputs, lifted state, copy-to-clipboard) are reusable in other React apps.\n\n---\n\n## License\n\nThis project is licensed under the [MIT License](https://opensource.org/licenses/MIT). Feel free to use, modify, and distribute the code as per the terms of the license.\n\n## Happy Coding! 🎉\n\nThis is an **open-source project** — feel free to use, enhance, and extend this project further!\n\nIf you have any questions or want to share your work, reach out via GitHub or my portfolio at [https://www.arnobmahmud.com](https://www.arnobmahmud.com).\n\n**Enjoy building and learning!** 🚀\n\nThank you! 😊\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fcolor-generator--react-fundamental-project-9","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2Fcolor-generator--react-fundamental-project-9","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2Fcolor-generator--react-fundamental-project-9/lists"}