Generate unique, code-themed digital business cards instantly! Code Card provides a live preview mimicking a code editor, letting you create and share your contact information with a distinct developer flair.
Check out the live version here: card.andresmit.co.za
- Live Preview: See your business card update in real-time as you type, displayed in a stylish code editor format.
- Data Persistence via URL: Share your generated card easily – all data is encoded directly into the URL hash.
- QR Code Generation: Instantly create a QR code linking to your shareable card URL for quick scanning.
- PNG Download: Download your code-themed business card as a PNG image using
html2canvas. - Dark Mode: Built with a sleek, Dracula-inspired dark theme.
- Responsive Design: Works smoothly on desktop and mobile devices.
- Frontend: React.js
- Styling: CSS (with CSS Variables for theming)
- PNG Generation:
html2canvas - QR Code Generation:
qrcode.react
To run this project locally:
-
Clone the repository:
git clone https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git cd YOUR_REPO_NAME -
Install dependencies:
npm install
(Or
yarn installif you use Yarn) -
Run the development server:
npm start
(Or
yarn start) -
Open http://localhost:3000 (or the port specified) in your browser.
- Open the app.
- Fill in your details (Name, Title, Email, Website/Link) in the form on the left.
- Watch the "Live Preview" on the right update instantly, showing your card as a JSON-like structure in a code editor theme.
- Use the buttons:
- Download as PNG: Saves the preview area as an image file.
- Copy Shareable Link: Copies the current URL (with your encoded data) to your clipboard.
- Show/Hide QR Code: Generates a QR code for the shareable link.
- Different code editor themes (Monokai, Solarized, etc.)
- Multiple card templates/layouts (beyond JSON view)
- More field options (Phone, Social Links)
- Option to save/load card data locally or via a simple backend.
This project is licensed under the MIT License - see the LICENSE file for details.