Skip to content

README.md

Latest commit

 

History

History
74 lines (50 loc) · 2.77 KB

README.md

File metadata and controls

74 lines (50 loc) · 2.77 KB
Raw

QR Code Generator & Scanner

A modern React application for handling QR codes. The project combines generation, scanning, and history storage functionalities, built with Vite for maximum performance.

🔗 Live Demo

You can see the project live here: [https://bindasdanylo30.github.io/QrCode_React/]

🛠 Tech Stack

Core:

  • React (Hooks: useState)
  • Vite — Fast build tool and development server.
  • React Router DOM — SPA routing for navigating between scanner, generator, and history.

Styles:

  • SCSS (Sass) — Used preprocessor for variables, nesting, and mixins.
  • CSS Modules — Implemented a modular styling approach to ensure component isolation and prevent global namespace pollution.

QR Logic:

  • react-qr-code — Component for generating QR codes.
  • react-qr-scanner — Device camera integration and decoding logic.

Storage & Data:

  • LocalStorage API — Persists scanning and generation history.
  • JSON Handling — Usage of JSON.stringify and JSON.parse for data serialization.

🔧 Deployment & Configuration

The project is deployed to GitHub Pages.

To ensure proper routing and asset loading in the production environment, I implemented specific Vite configuration:

  • Base Path: Configured the base property in vite.config.js (e.g., base: '/repo-name/'). This ensures that assets (CSS, JS, Images) are linked correctly relative to the repository path, fixing the common "blank screen" issue on GitHub Pages.
  • Build Script: Optimized the npm run build command to generate a production-ready dist folder.

✨ Features

1. ⚡ QR Code Generation

The user can enter any text or link, and the application will instantly generate the corresponding QR code.

2. 📷 QR Scanning

Access to the device camera is implemented. The application recognizes QR codes in real-time and decodes their content.

3. 💾 History & Persistence

One of the key features is the preservation of user actions:

  • All generated and scanned codes are stored in LocalStorage.
  • Data persists across page reloads.
  • Implemented complex data structure handling using JSON.stringify() for serialization and JSON.parse() for retrieval.

🏗 Architecture

The project uses a component-based approach. The interface is divided into independent reusable blocks:

  • Navigation — Routing menu component.
  • Generate — Logic for input and code rendering.
  • GenerateHistory — Component for displaying saved generation records.
  • Scanner — Camera and scanning logic.
  • ScanHistory — Component for displaying saved scan records.

🚀 Getting Started

The project is built on Vite, so it launches very quickly.

  1. Install dependencies: 
    npm install