https://github.com/sidd0894/qr-code-generator-with-react

A qr code generator written in react
https://github.com/sidd0894/qr-code-generator-with-react

qr-code qrcode qrcode-generator react reactjs

Last synced: 3 months ago
JSON representation

A qr code generator written in react

• Host: GitHub
• URL: https://github.com/sidd0894/qr-code-generator-with-react
• Owner: sidd0894
• License: mit
• Created: 2024-08-12T11:44:58.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-08-29T09:58:11.000Z (10 months ago)
• Last Synced: 2025-02-15T02:18:44.746Z (5 months ago)
• Topics: qr-code, qrcode, qrcode-generator, react, reactjs
• Language: JavaScript
• Homepage:
• Size: 56.6 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# QR Code Generator

This project is built using **React (Vite)** and **Tailwind CSS**.  

In React, it utilizes the **`useState()`** hook to manage the state of the text input field, background color of the QR code, the `src` of the image in the image tag, and the character warning that appears when the user enters the `#` or `&` characters. It also uses the **`useEffect()`** hook, which runs whenever its dependencies change.

### How to Run This Project

1. **Install VSCode**: Download and install [VSCode](https://code.visualstudio.com/) if you haven't already.

2. **Install Node.js**: Download and install [Node.js](https://nodejs.org/) (which includes npm).

3. **Clone or Download the Repository**:

   - Clone the repository using Git: `git clone `, or

   - Download the ZIP file from the green "Code" button on the repository page.

4. **Open the Project**:

   - Open VSCode and navigate to the folder containing the project files.

5. **Install Dependencies**:

   - Open the terminal in VSCode using `` Ctrl + ` `` (or `` Cmd + ` `` on Mac), and run the command `npm install` (or `npm i`) to install the required packages.

6. **Run the Project**:

   - After installation, run `npm run dev` in the terminal. This will start the development server and provide a URL (usually `http://localhost:5173`).

7. **View the Project**:

   - Open your browser and navigate to the provided URL to see the project in action.