Welcome to the QR Code Customization Website project! This web application allows users to generate and customize QR codes with various options, including text input, color, pattern, frame, and more.
- 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 contributions from the open-source community! If you'd like to contribute:
- Fork the repository.
- Create a new feature branch (git checkout -b feature/your-feature).
- Commit your changes (git commit -m 'Add some feature').
- Push to the branch (git push origin feature/your-feature).
- Open a Pull Request.
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=""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_
Want to be part of the community? Check out our Code of Conduct
for this project!