HonorInk is a modern web application for generating beautiful, custom course completion certificates. Built with React, Vite, and TailwindCSS, it offers a fast, responsive, and accessible user experience.
Note: This project is for educational purposes only.
- 🎓 Generate professional certificates for Udemy, LinkedIn, and Coursera
- 📝 Customizable certificate fields (name, course, date, instructor, etc.)
- 📥 Download certificates as high-quality PDFs or PNG images
- 👀 Preview certificates before downloading
- ✅ Form validation with user-friendly error messages
- ⚡ Blazing-fast UI with Vite and React
- 🌈 Responsive, modern design with TailwindCSS
- 🧩 Modular component structure
- 🔍 Accessible and keyboard-friendly navigation
- 🛠️ Easy to extend for other certificate styles
- 🎨 Consistent styling across all certificate templates
- React - UI framework
- Vite - Build tool and dev server
- TailwindCSS - CSS framework
- shadcn/ui - Component library (Radix UI + Tailwind)
- html2pdf.js - PDF generation
- html2canvas - Image export
- React Router - Client-side routing
- Lucide React - Icon library
-
Clone the repository
git clone https://github.com/yourusername/honorink.git cd honorink -
Install dependencies
npm install
-
Start the development server
npm run dev
-
Open the app Visit http://localhost:5173 in your browser.
src/
├── components/ # React components
│ ├── CertificateForm.jsx # Reusable form component
│ ├── CourseraCertificate.jsx # Coursera certificate template
│ ├── Home.jsx # Landing page
│ ├── LinkedInCertificate.jsx # LinkedIn certificate template
│ ├── Navbar.jsx # Navigation component
│ ├── NotFound.jsx # 404 page
│ └── UdemyCertificate.jsx # Udemy certificate template
├── hooks/ # Custom React hooks
├── lib/ # Utilities and helpers
├── App.jsx # Main app component
├── App.css # Global styles
├── index.css # CSS imports
└── main.jsx # Entry point
public/ # Static assets
├── favicon.ico
├── linkedin_background.png
├── linkedin_learning.png
├── linkedin_stamp.png
└── udemy_logo.png
- Select a certificate platform from the home page
- Fill in the certificate details in the form
- Preview the generated certificate
- Edit details if needed or download as PDF/PNG
- Semantic HTML and ARIA labels
- Keyboard navigation support
- High-contrast, readable color scheme
- Screen reader friendly
- Installable on desktop and mobile
- Offline support (coming soon)
Run tests with:
npm run test- Fork the repository
- Create a feature branch (
git checkout -b feature/YourFeature) - Commit your changes (
git commit -m 'feat: add YourFeature') - Push to the branch (
git push origin feature/YourFeature) - Open a Pull Request
- All data is processed client-side. No data is stored or transmitted to any servers.
- Optimized PDF and image generation
- Minimal bundle size with code splitting
- Efficient rendering with React
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- PDF generation fails:
- Ensure all form fields are filled correctly
- Check browser console for errors
- Certificate preview not showing:
- Clear browser cache
- Refresh the page
This project is licensed under the MIT License.
This project is intended for educational purposes only. Users are responsible for ensuring their use of this tool complies with relevant policies and regulations.