A professional, feature-rich QR code generator built with modern web technologies. Create beautiful, customizable QR codes for your business and personal needs.
- Custom Content Types: URLs, text, contact information, WiFi credentials
- Advanced Styling: Custom colors, gradients, and design options
- Logo Integration: Add your company logo to QR codes
- Responsive Design: Works perfectly on desktop, tablet, and mobile
- High Quality: Adjustable error correction levels for optimal scanning
- Export Options: Download QR codes as PNG, SVG, or share directly
- PWA Support: Install as a progressive web app for offline access
- 🌟 Neon Mode: GitHub-inspired cyberpunk theme with animated gradients and glow effects
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/sobhanaz/tecsoqr.git
cd tecsoqr
# Install dependencies
npm install
# Start development server
npm run dev# Build the project
npm run build
# Preview production build
npm run preview- Frontend Framework: React 19.1.1 with TypeScript
- Build Tool: Vite 7.1.2
- UI Library: Chakra UI with custom theme
- QR Generation: qrcode.react library
- Icons: React Icons
- Image Export: html-to-image
- PWA: Vite PWA plugin
tecsoqr/
├── src/
│ ├── components/ # React components
│ │ ├── ContentTabs.tsx # Tab navigation
│ │ ├── QRForm.tsx # QR customization form
│ │ ├── QRPreview.tsx # QR code preview
│ │ └── Navbar.tsx # Navigation header
│ ├── App.tsx # Main application component
│ ├── main.tsx # Application entry point
│ ├── theme.ts # Chakra UI theme configuration
│ └── index.css # Global styles
├── public/ # Static assets
├── package.json # Dependencies and scripts
└── vite.config.ts # Vite configuration
The application uses Chakra UI with a custom theme. To modify the styling:
- Edit
src/theme.tsfor theme customization - Modify
src/index.cssfor global styles - Update component-specific styles in individual component files
TECSOQR features a stunning GitHub-inspired neon theme that transforms the interface into a cyberpunk experience:
- Click the ⚡ bolt icon in the navbar to toggle Neon Mode
- Your preference is automatically saved in localStorage
- Works seamlessly with both light and dark color modes
- Animated Hero Section: Floating badges with neon glow effects
- Gradient Text: Dynamic color transitions on headings
- Neon Cards: Glassmorphic containers with animated borders
- GitHub-style Elements: Star buttons, gradient backgrounds, and subtle grid overlay
- Responsive Glow: Hover effects and interactive animations
- Accessibility Maintained: All neon effects preserve readability and contrast
- CSS-in-JS with Emotion for dynamic styling
- Chakra UI theme variants for consistent neon styling
- React Context for global neon state management
- CSS custom properties for optimal performance
This application is a Progressive Web App (PWA) with:
- Offline functionality
- Install to home screen
- Automatic updates
- Manifest file for app-like experience
The project is configured for automatic deployment to GitHub Pages:
npm run build
# Deploys to https://sobhanaz.github.io/tecsoqr/For deployment to Cloudflare Pages:
npm run build
# Deploy dist folder to Cloudflare PagesWe welcome contributions! Please feel free to submit pull requests, create issues, or suggest new features.
- Follow TypeScript best practices
- Use Chakra UI components for consistency
- Maintain responsive design principles
- Write meaningful commit messages
- Test across different devices and browsers
This project is developed and maintained by TECSO Team - an innovative IT company based in Iran, specializing in delivering cutting-edge smart technology solutions.
TECSO Team combines expertise in software development, cybersecurity, and user-centric design to address modern challenges. Our mission is to bridge technological gaps, enhance economic growth, and provide seamless, scalable solutions for local and international markets.
- 🌐 TECSO Team Website
- 📧 Contact: info@tecso.team
Built with ❤️ by TECSO Team
Empowering businesses through innovative technology solutions