QR Code Generator

A beautiful and user-friendly QR code generator built with React, Vite, and Node.js.

Features

• Generate QR codes from text or URLs
• Customize QR code colors
• Adjust QR code size
• Choose error correction level
• Download generated QR codes as PNG images
• Beautiful, responsive user interface with Tailwind CSS

Technologies Used

• Frontend:

  • React
  • Vite
  • Tailwind CSS
  • HeadlessUI

• Backend:

  • Node.js
  • Express
  • qrcode library

Project Structure

├── public/                  # Public assets
├── src/
│   ├── components/          # React components
│   │   ├── Alert.jsx        # Alert notifications
│   │   ├── DarkModeToggle.jsx # Dark mode toggle
│   │   ├── Footer.jsx       # Page footer
│   │   ├── Header.jsx       # Page header
│   │   ├── LoadingSpinner.jsx # Loading indicator
│   │   ├── QRCodeDisplay.jsx # QR code display component
│   │   └── QRCodeForm.jsx   # Form for QR code generation
│   ├── utils/               # Utility functions
│   ├── App.jsx              # Main application component
│   └── main.jsx             # Entry point
├── server.js                # Express server
├── server-package.json      # Backend dependencies
├── .gitignore               # Git ignore file
├── tailwind.config.js       # Tailwind CSS configuration
└── vite.config.js           # Vite configuration

Version Control

The project includes a comprehensive .gitignore file that excludes:

• Dependencies: Node modules and package manager files
• Build outputs: Distribution directories and local build files
• Environment variables: .env files with sensitive information
• Editor-specific files: Settings for various IDEs
• Temporary files: Logs, cache files, and backups
• OS-specific files: System-generated files

## Getting Started

### Prerequisites

- Node.js (v16 or higher)
- npm (v7 or higher)

### Installation

1. Clone the repository:

```bash
git clone https://github.com/PasinduOG/qr-code-generator.git
cd qr-code-generator

2. Install the dependencies:

npm install

3. Create a .env file in the root directory (optional):

# .env
PORT=5000

Note: The .env file is included in the .gitignore file and will not be committed to the repository.

Running the Application

You can run both the frontend and backend servers concurrently with a single command:

npm run start

Alternatively, you can run them separately:

• Frontend (Vite development server):

npm run dev

• Backend (Express server):

npm run server

The frontend will be available at http://localhost:5173 and the backend API at http://localhost:5000.

API Endpoints

Generate QR Code

POST /api/generate

Request Body:

{
  "text": "https://example.com",
  "color": "#000000",
  "bgColor": "#FFFFFF",
  "size": 300,
  "errorCorrectionLevel": "M"
}

Response:

{
  "qrCode": "data:image/png;base64,..."
}

Demo

Check out the live demo of the application:

Live Demo

Deployment

Frontend Deployment

The frontend can be built using:

npm run build

This will create a dist directory with the production build that can be deployed to any static hosting service like GitHub Pages, Netlify, or Vercel.

Backend Deployment

The backend is a Node.js Express application that can be deployed to any Node.js hosting service like Heroku, Railway, or Render.

Remember to set the environment variables on your hosting platform.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

The MIT License is a permissive free software license originating at the Massachusetts Institute of Technology. It puts only very limited restriction on reuse and has high compatibility with other licenses, making it ideal for open source projects.

Acknowledgements

• qrcode - QR code generation library
• Tailwind CSS - Utility-first CSS framework
• React - Frontend library
• Vite - Frontend build tool
• HeadlessUI - Unstyled, accessible UI components

Author

• PasinduOG - Full Stack Developer

Deployment to Heroku

This application is configured to be easily deployed to Heroku. Follow these steps to deploy your own instance:

Prerequisites

• Heroku CLI installed
• GitHub account
• Git installed on your local machine

Deployment Steps

1. Login to Heroku

   heroku login

2. Create a new Heroku app

   heroku create your-qr-code-app-name

3. Set environment variables (if needed)

   heroku config:set NODE_ENV=production

4. Deploy the application You can deploy directly from your local repository:

   git push heroku main

   Or connect your GitHub repository to Heroku for automatic deployments through the Heroku Dashboard.

5. Open the deployed application

   heroku open

Important Notes

• The application is configured to serve the React frontend from the Express backend in production
• Build process is automatically handled by the heroku-postbuild script
• The Procfile is already set up to start the server correctly on Heroku