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.
| 🌟 Stars | 🍴 Forks | 🐛 Issues | 🔔 Open PRs | 🔕 Closed PRs | ✅ Contributors |
|---|---|---|---|---|---|
 |
 |
 |
 |
 |
 |
- 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.
- 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.
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.
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.
- 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).
- Node.js and npm should be installed on your machine. You can download them from nodejs.org.
-
Clone the repository:
git clone https://github.com/VesperAkshay/qr-code-generator cd qr-code-generator -
Install Dependencies:
npm install
-
Start the development server:
npm start
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=""- Visit Firebase and navigate to the Firebase console.
- Click "Get started with Firebase" and create a new project.
- In the left sidebar under the "Build" section, select "Authentication." Enable Email/Password as a sign-in method.
- From the project overview, go to "Project settings."
- 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.
A: Yes, you are free to use the generated QR codes for both personal and commercial purposes.
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.
A: Yes, you are free to use the generated QR codes for both personal and commercial purposes.
For Queries and issue related question you can contact me on Discord
Discord Username: akshaypatell_
 |
|---|
| Akshay Patel Project Admin |
 |
Want to be part of the community? Check out our Code of Conduct
💝 Thank you to all the amazing contributors who have made this project possible! 💝
for this project!