Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/techysanoj/cmo-id-card-with-qr-code-generator
This React JS project creates customizable ID cards with embedded QR codes for healthcare professionals. It displays essential details like name, ID, phone number, Aadhar number, DOB, and address. The QR code facilitates easy access and verification of this information, making it ideal for doctors and medical staff.
https://github.com/techysanoj/cmo-id-card-with-qr-code-generator
Last synced: 15 days ago
JSON representation
This React JS project creates customizable ID cards with embedded QR codes for healthcare professionals. It displays essential details like name, ID, phone number, Aadhar number, DOB, and address. The QR code facilitates easy access and verification of this information, making it ideal for doctors and medical staff.
- Host: GitHub
- URL: https://github.com/techysanoj/cmo-id-card-with-qr-code-generator
- Owner: techysanoj
- Created: 2024-07-31T06:48:03.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-07-31T13:17:58.000Z (5 months ago)
- Last Synced: 2024-08-01T08:14:09.817Z (5 months ago)
- Language: JavaScript
- Homepage: https://id-card-with-qr-code-generator.vercel.app
- Size: 691 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ID Card with QR Code Generator
## Overview
This project is a web-based application developed using React JS for generating customizable ID cards with embedded QR codes. It’s designed for healthcare professionals, allowing the creation of ID cards with essential information such as name, ID, phone number, Aadhar number, date of birth (DOB), address and much more.
## Features
- **Customizable ID Cards**: Input and display personal details.
- **Embedded QR Codes**: QR codes are generated and included in the ID card for easy verification and access.
- **Professional Design**: Styled to present information clearly and professionally.## Installation
To get started with this project, follow these steps:
1. **Clone the repository**:
```bash
git clone https://github.com/yourusername/cmo-id-card-with-qr-code-generator.git
```2. **Navigate to the project directory**:
```bash
cd cmo-id-card-with-qr-code-generator
```3. **Install dependencies**:
```bash
npm install
```4. **Start the development server**:
```bash
npm start
```Open your browser and go to `http://localhost:3000` to view the application.
## Live Demo
You can check out the live demo of the project here: Live Demo## Usage
1. **Enter Details**: Fill in the form fields with the required information including name, ID, phone number, Aadhar number, DOB, and address.
2. **Generate QR Code**: Click the button to generate the QR code and view the ID card.
3. **Download/Print**: The generated ID card can be downloaded or printed for use.## Screenshots
### Homepage
![Homepage](homepage-1.png)
![Homepage](homepage-2.png)
The homepage where users can enter their details to generate the ID card.
### ID Card Preview
![ID Card Preview](id-card-front.png)
A preview of the generated ID card with the embedded QR code.
### Download Page
![Download Page](download-id-card.png)
The page where users can download or print the generated ID card.
## Technologies Used
- **React JS**: Front-end framework for building the user interface.
- **QR Code Generator Library**: Used to create QR codes (e.g., `qrcode.react`).## Contributing
Contributions are welcome! If you have suggestions or improvements, please open an issue or submit a pull request.
1. **Fork the repository**.
2. **Create a feature branch**:
```bash
git checkout -b feature/YourFeatureName
```
3. **Commit your changes**:
```bash
git commit -am 'Add new feature'
```
4. **Push to the branch**:
```bash
git push origin feature/YourFeatureName
```
5. **Open a pull request**.## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## Contact
For any questions or feedback, please reach out to [[email protected]](mailto:[email protected]).