Skip to content

Latest commit

 

History

History
222 lines (154 loc) · 8.58 KB

README.md

File metadata and controls

222 lines (154 loc) · 8.58 KB
Raw

image

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.

📈 GitHub Repository Stats

🌟 Stars 🍴 Forks 🐛 Issues 🔔 Open PRs 🔕 Closed PRs ✅ Contributors
GitHub stars forks issues pull requests Closed PRs Contributors

📌Table of Contents:

  1. Features
  2. Technologies Used
  3. Contributing
  4. Installation Guide
  5. Getting Started
  6. FAQ
  7. Contact
  8. 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.

High Voltage 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:

  1. Fork the repository.
  2. Create a new feature branch
  3. Commit your changes
  4. Push to the branch
  5. 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:

  1. Code Style: Follow the coding style used throughout the project. Clean, readable code with comments is always appreciated.
  2. Commits: Write meaningful commit messages.
  3. Pull Requests: Make sure PRs are focused, well-explained, and reference any issues they address.
  4. 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

  1. Clone the Repository:
git clone https://github.com/your-username/qr-code-customization-website.git
cd qr-code-customization-website
  1. Install Dependencies: Install all the required packages and dependencies using npm:
npm install
  1. 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

  1. Clone the repository:

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

  2. Install Dependencies:

    npm install

Running the Application

  1. Start the development server:

    npm start

Env template

Add Firebase API (from .env.sample)

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=""

Firebase setupimage

  1. Visit Firebase and navigate to the Firebase console.
  2. Click "Get started with Firebase" and create a new project.
  3. In the left sidebar under the "Build" section, select "Authentication." Enable Email/Password as a sign-in method.
  4. From the project overview, go to "Project settings."
  5. Scroll down and create a web app for the project. Register the app by following the provided instructions. All KEY values for .env will be available while creating the project app.

✍️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

My Discord (YOURUSERID)

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

Discord Username: akshaypatell_

👥 Team

Akshay Patel
Akshay Patel
Project Admin
LinkedIn

🪄Code of conduct

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

Support

Meet Our Wonderful Contributors

💝 Thank you to all the amazing contributors who have made this project possible! 💝


Don't forget to leave a star for this project!

Go to Top