QR Code Generator

Welcome to the QR Code Generator Website project! This web application allows users to generate and customize QR codes with various options, including text input, color, pattern, frame, and more.

📌Table of Contents:

Features
Technologies Used
Contributing
Installation Guide
Getting Started
FAQ
Contact
Code of Conduct

Features

User Authentication: Securely register and log in with email or Google authentication powered by Firebase. .
Dashboard: A user-friendly dashboard to navigate to different pages. From the dashboard, users can manage their QR code history, access the QR Code Generator, and view their profile details.
QR Code Generator: A dynamic page for generating customizable QR codes with options for:
- Input content like text, URLs, or other media for their QR codes.
- Customize the pattern, frame, foreground and background colors, and even add logos to personalize the QR code design.
- Selecting different QR code categories like vCard, text, website, social profiles, PDFs, images, ID cards, etc.
- Real-time display feature shows the QR code as it's being customized, allowing users to make adjustments instantly before downloading.
- Limiting QR code generation to 10 codes per day.
Profile Page: Displays their account information, including their name, email, and associated authentication methods. The page also features a secure logout option.

Technologies Used

Front-end: HTML, CSS, JavaScript, Bootstrap for a responsive design.
Back-end: Node.js, Express for server-side logic.
Database: Firebase for authentication and user data storage.
QR Code Generation: QR Code API (e.g., QRCode.js, or other libraries).
Hosting: Deployed on platforms such as Firebase Hosting or Heroku.

✨Contributing

We welcome all the contributions from the open-source community! If you'd like to contribute follow these steps:

Fork the repository.
Create a new feature branch
Commit your changes
Push to the branch
Open a Pull Request.

We welcome all contributions to improve QR Code Generator! If you'd like to contribute, please follow the Contributing.md to get details on how to get started.

To maintain quality and consistency, please adhere to the following guidelines:

Code Style: Follow the coding style used throughout the project. Clean, readable code with comments is always appreciated.
Commits: Write meaningful commit messages.
Pull Requests: Make sure PRs are focused, well-explained, and reference any issues they address.
Testing: Ensure that your changes are well-tested locally and don’t break existing functionality.

Installation Guide ⚡️

PrePrerequisites

Before installing the project locally, ensure you have the following installed:

Node.js: JavaScript runtime for back-end development.
Git: Version control system for cloning the repository.
Firebase CLI: For managing Firebase services.
Any Web Browser: For accessing the website.

Steps to Install

Clone the Repository:

git clone https://github.com/your-username/qr-code-customization-website.git
cd qr-code-customization-website

Install Dependencies: Install all the required packages and dependencies using npm:

npm install

Configure Firebase:

Create a Firebase project and enable authentication and database services.
Add Firebase credentials to your project (Firebase config keys).

⚡️Getting Started

Prerequisites

Node.js and npm should be installed on your machine. You can download them from nodejs.org.

Installation

Clone the repository:

git clone https://github.com/VesperAkshay/qr-code-generator
cd qr-code-generator

Install Dependencies:
```
npm install
```

Running the Application

Start the development server:
```
npm start
```

Env template

Add Firebase API

REACT_APP_FIREBASE_API_KEY=""
REACT_APP_FIREBASE_AUTH_DOMAIN=""
REACT_APP_FIREBASE_PROJECT_ID=""
REACT_APP_FIREBASE_STORAGE_BUCKET=""
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
REACT_APP_FIREBASE_APP_ID=""
REACT_APP_FIREBASE_MEASUREMENT_ID=""

✍️FAQ

Q: Can I use the generated QR codes for commercial purposes?

A: Yes, you are free to use the generated QR codes for both personal and commercial purposes.

Q: How do I add a logo to my QR code?

A: During the customization process, click on the Add Logo button and upload your image file. The logo will be placed in the center of the QR code.

Q: What formats can I download the QR codes in?

A: Yes, you are free to use the generated QR codes for both personal and commercial purposes.

⚡Contact

For Queries and issue related question you can contact me on Discord

Discord Username: akshaypatell_

👥 Team


Akshay Patel _{Project Admin}

🪄Code of conduct

Want to be part of the community? Check out our Code of Conduct

Support

Don't forget to leave a star

for this project!

Go to Top

leharikasri/qr-code-generator