Color Detector Camera PWA

Welcome to the Color Detector PWA, a modern Progressive Web App designed to detect colors in real-time using your device's camera. This app provides color names, hexadecimal values, and a suite of user-friendly features, all wrapped in a sleek, responsive interface. Built with cutting-edge technologies like React, TailwindCSS, Framer Motion, and JavaScript, this app is installable, offline-capable, and optimized for both mobile and desktop devices.

Features

The Color Detector PWA offers a rich set of features to enhance user experience:

• Real-Time Color Detection: Instantly identifies the color at the center of your camera feed, displaying its name and hexadecimal value.

• Color History: Tracks and displays the last 5 detected colors with their names and hex codes.

• Favorites: Save your favorite colors for quick access and reference.

• Copy to Clipboard: Easily copy hex codes with a single click.

• PWA Support: Install the app on mobile or desktop for a native-like experience.

• Install Prompt: Guided prompts encourage users to install the app for offline use.

• Responsive Design: Seamlessly adapts to various screen sizes and devices.

Getting Started

Follow these steps to set up and run the Color Detector PWA locally:

Prerequisites

• Node.js (v16 or higher) and npm installed.

• A modern web browser (Chrome, Firefox, Safari, or Edge).

Installation Steps

1. Clone the Repository:

   bash

   git clone https://github.com/mahmud-r-farhan/Color-Detector-App.git
   cd color-detector-pwa

2. Install Dependencies:

   bash

   npm install

3. Run the Development Server:

   bash

   npm run dev

4. Access the App: Open your browser and navigate to http://localhost:3000.

Build & Deployment

To prepare the app for production:

1. Build the App:

   bash

   npm run build

2. Deploy: Deploy the contents of the build folder to your preferred hosting platform (e.g., Vercel, Netlify, or GitHub Pages).

Tech Stack

The Color Detector PWA is built with a robust and modern tech stack:

Frontend

• Next.js (React): Framework for server-side rendering and static site generation.

• TailwindCSS: Utility-first CSS framework for rapid UI development.

• Framer Motion: Library for smooth and engaging animations.

• color-namer: Utility for converting hex codes to human-readable color names.

PWA

• Service Worker: Enables offline functionality and caching.

• Web Manifest: Provides metadata for installability and native-like behavior.

PWA Capabilities

The Color Detector PWA is designed to feel like a native app:

• Installable: Add it to your home screen on Android, iOS, or desktop devices via the browser's "Add to Home Screen" option.

• Offline Capable: Access cached resources and core functionalities without an internet connection.

• Push Notifications: (Planned) Receive updates or reminders for saved colors.

To install, open the app in your browser, click the menu, and select Add to Home Screen.

Contributing

We welcome contributions from the community! To get started:

1. Fork the Repository: Create your own copy of the project.

2. Clone Locally:

   bash

   git clone https://github.com/mahmud-r-farhan/Color-Detector-App.git

3. Create a Branch:

   bash

   git checkout -b feature/your-feature-name

4. Write Tests: Add tests to maintain code quality.

5. Submit a Pull Request: Push your changes and open a PR to the main repository.

Contact

For questions, feedback, or support, reach out to us at:

• Email: [email protected]

• GitHub Issues: File an issue

Thank you for using the Color Detector PWA! We hope it inspires creativity and simplifies your color exploration journey. 🎨

---

Built with ❤ by Mahmud