https://github.com/javianng/networking-wallpaper-generator
This React-based lock screen generator is designed for networking events. Users can customize their profiles with multiple job titles, companies, and choose background colors via a color picker. The app captures HTML elements as JPEGs, ideal for personalized lock screens.
https://github.com/javianng/networking-wallpaper-generator
qrcode reactjs tailwindcss webapp
Last synced: over 1 year ago
JSON representation
This React-based lock screen generator is designed for networking events. Users can customize their profiles with multiple job titles, companies, and choose background colors via a color picker. The app captures HTML elements as JPEGs, ideal for personalized lock screens.
- Host: GitHub
- URL: https://github.com/javianng/networking-wallpaper-generator
- Owner: javianng
- Created: 2024-05-15T11:35:34.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-02-10T10:46:14.000Z (over 1 year ago)
- Last Synced: 2025-02-10T11:34:19.735Z (over 1 year ago)
- Topics: qrcode, reactjs, tailwindcss, webapp
- Language: TypeScript
- Homepage: https://networking-wallpaper-generator.vercel.app
- Size: 3.34 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Networking Lock Screen Generator
A web application that generates custom lock screen wallpapers for networking events, featuring QR codes and contact information.
## Features
- **Custom Lock Screen Generation**: Create personalized lock screens with your professional details
- **Multiple QR Code Support**: Add up to 2 QR codes (e.g., LinkedIn, GitHub, Portfolio)
- **Responsive Design**: Works on all devices
- **Multiple Phone Models**: Support for various phone dimensions including:
- iPhone 13
- iPhone 12
- Samsung S21
- Google Pixel 5
- **Company Logo Integration**: Upload and display your company logo
- **Real-time Preview**: See your changes instantly
- **Error Handling**: Robust error boundary implementation
- **Analytics**: Track usage and error patterns
- **Accessibility**: Screen reader friendly with ARIA labels
## Tech Stack
- **React**: A JavaScript library for building user interfaces
- **TypeScript**: A superset of JavaScript that adds static types
- **Next.js**: A React framework for server-side rendering and static site generation
- **Tailwind CSS**: A utility-first CSS framework
- **html-to-image**: A library for converting HTML to images
- **lucide-react**: An icon library for React
- **Radix UI**: Unstyled, accessible components for building high‑quality design systems
- **Vercel Analytics**: For tracking usage and performance
## Getting Started
1. Clone the repository:
```bash
git clone https://github.com/javianng/networking-wallpaper-generator.git
```
2. Install dependencies:
```bash
npm install
```
3. Run the development server:
```bash
npm run dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser
## Usage
1. Choose your design (1 or 2 QR codes)
2. Fill in your professional details
3. Upload your company logo (optional)
4. Add QR code URLs and labels
5. Select your phone model
6. Click "Generate Wallpaper" to download
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.
1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## Contact
If you have any questions or suggestions, feel free to:
- Open an issue
- Reach out on [LinkedIn](https://www.linkedin.com/in/javianngzh/)
- Visit the [GitHub repository](https://github.com/javianng/networking-wallpaper-generator)
## License
This project is licensed under the MIT License - see the LICENSE file for details.
---
Made with ❤️ by Javian Ng