https://github.com/omkarspace/honorink
HonorInk is an educational web application built with React 18 and Vite that enables users to create custom course completion certificates in PDF format. The application features an intuitive interface for customizing certificate details including name, course information, completion date, and skills covered,
https://github.com/omkarspace/honorink
certificate-generator customizable-certificates educational-projects html2pdfjs linkedin-learning open-source pdf-export pdf-generation react-router-dom reactjs tailwind-css udemy
Last synced: about 2 months ago
JSON representation
HonorInk is an educational web application built with React 18 and Vite that enables users to create custom course completion certificates in PDF format. The application features an intuitive interface for customizing certificate details including name, course information, completion date, and skills covered,
- Host: GitHub
- URL: https://github.com/omkarspace/honorink
- Owner: omkarspace
- Created: 2024-11-14T16:50:04.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-20T14:34:08.000Z (over 1 year ago)
- Last Synced: 2025-01-28T03:42:34.273Z (over 1 year ago)
- Topics: certificate-generator, customizable-certificates, educational-projects, html2pdfjs, linkedin-learning, open-source, pdf-export, pdf-generation, react-router-dom, reactjs, tailwind-css, udemy
- Language: JavaScript
- Homepage: https://honorink.netlify.app/
- Size: 645 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
```markdown
# HonorInk – Certificate Generator
<<<<<<< HEAD
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.
## 🚀 Features
- 🎓 Generate professional certificates for Udemy, LinkedIn Learning, 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
=======
HonorInk is a modern web application for generating beautiful, custom course completion certificates in PDF format. Built with React, Vite, and TailwindCSS, it offers a fast, responsive, and accessible user experience.
> **Note:** This project is for educational purposes only.
---
## 🚀 Features
- 🎓 Generate professional certificates for Udemy, LinkedIn, and more
- 📝 Customizable certificate fields (name, course, date, etc.)
- 📥 Download certificates as high-quality PDFs
>>>>>>> e501412cee8a8d731fef59835af1ee644c96d280
- ⚡ 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
<<<<<<< HEAD
- 🎨 Consistent styling across all certificate templates
## 🛠️ Tech Stack
- [React](https://react.dev/) - UI framework
- [Vite](https://vitejs.dev/) - Build tool and dev server
- [TailwindCSS](https://tailwindcss.com/) - CSS framework
- [shadcn/ui](https://ui.shadcn.com/) - Component library (Radix UI + Tailwind)
- [html2pdf.js](https://github.com/eKoopmans/html2pdf.js) - PDF generation
- [html2canvas](https://html2canvas.hertzen.com/) - Image export
- [React Router](https://reactrouter.com/) - Client-side routing
- [Lucide React](https://lucide.dev/) - Icon library
=======
---
## 🛠️ Tech Stack
- [React](https://react.dev/)
- [Vite](https://vitejs.dev/)
- [TailwindCSS](https://tailwindcss.com/)
- [html2pdf.js](https://github.com/eKoopmans/html2pdf.js)
- [React Router](https://reactrouter.com/)
---
>>>>>>> e501412cee8a8d731fef59835af1ee644c96d280
## 📦 Installation & Setup
1. **Clone the repository**
```bash
git clone https://github.com/yourusername/honorink.git
<<<<<<< HEAD
cd honorink
```
=======
cd honorink/HonorInk
```
>>>>>>> e501412cee8a8d731fef59835af1ee644c96d280
2. **Install dependencies**
```bash
npm install
```
<<<<<<< HEAD
=======
>>>>>>> e501412cee8a8d731fef59835af1ee644c96d280
3. **Start the development server**
```bash
npm run dev
```
<<<<<<< HEAD
4. **Open the app**
Visit [http://localhost:5173](http://localhost:5174) in your browser.
=======
4. **Open the app**
Visit [http://localhost:5173](http://localhost:5173) in your browser.
---
>>>>>>> e501412cee8a8d731fef59835af1ee644c96d280
## 🗂️ Project Structure
```
src/
<<<<<<< HEAD
├── 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
├── 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
└── coursera assets (to be added)
```
## 💡 Usage
1. Select a certificate platform from the home page
2. Fill in the certificate details in the form
3. Preview the generated certificate
4. Edit details if needed or download as PDF/PNG
=======
├── components/ # Reusable React components
├── context/ # Global state management (React Context)
├── assets/ # Images and static assets
├── styles/ # Global styles
├── utils/ # Utility functions (e.g., PDF generator)
├── App.jsx # Main app component
├── main.jsx # Entry point
```
---
## 💡 Usage
1. Fill in the certificate details in the form
2. Preview the generated certificate
3. Download as PDF
---
>>>>>>> e501412cee8a8d731fef59835af1ee644c96d280
## ♿ Accessibility
- Semantic HTML and ARIA labels
- Keyboard navigation support
- High-contrast, readable color scheme
<<<<<<< HEAD
- Screen reader friendly
=======
---
## 📱 PWA Support
- Installable on desktop and mobile
- Offline support (coming soon)
---
>>>>>>> e501412cee8a8d731fef59835af1ee644c96d280
## 🧪 Testing
- Run tests with:
```bash
npm run test
```
<<<<<<< HEAD
=======
---
>>>>>>> e501412cee8a8d731fef59835af1ee644c96d280
## 🤝 Contributing
1. Fork the repository
2. Create a feature branch (`git checkout -b feature/YourFeature`)
3. Commit your changes (`git commit -m 'feat: add YourFeature'`)
4. Push to the branch (`git push origin feature/YourFeature`)
5. Open a Pull Request
<<<<<<< HEAD
=======
---
>>>>>>> e501412cee8a8d731fef59835af1ee644c96d280
## 🛡️ Security & Privacy
- All data is processed client-side. No data is stored or transmitted to any servers.
<<<<<<< HEAD
## 🏎️ Performance
- Optimized PDF and image generation
- Minimal bundle size with code splitting
- Efficient rendering with React
=======
---
## 🏎️ Performance
- Optimized for fast load times and minimal bundle size
- Efficient rendering and code splitting
---
>>>>>>> e501412cee8a8d731fef59835af1ee644c96d280
## 🌐 Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
<<<<<<< HEAD
## 🐞 Troubleshooting
- **PDF generation fails:**
- Ensure all form fields are filled correctly
=======
---
## 🐞 Troubleshooting
- **PDF generation fails:**
- Ensure all form fields are filled
>>>>>>> e501412cee8a8d731fef59835af1ee644c96d280
- Check browser console for errors
- **Certificate preview not showing:**
- Clear browser cache
- Refresh the page
<<<<<<< HEAD
=======
---
>>>>>>> e501412cee8a8d731fef59835af1ee644c96d280
## 📄 License
This project is licensed under the MIT License.
<<<<<<< HEAD
## ⚠️ Disclaimer
This project is intended for educational purposes only. Users are responsible for ensuring their use of this tool complies with relevant policies and regulations.
=======
---
## ⚠️ Disclaimer
This project is intended for educational purposes only. Users are responsible for ensuring their use of this tool complies with relevant policies and regulations.
│ └── pdfGenerator.js
├── styles/
└── App.jsx
```
## Usage
1. Fill in the certificate details in the form
2. Preview the generated certificate
3. Download as PDF
## Contributing
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
## Development
```bash
# Run development server
npm run dev
# Build for production
npm run build
# Run tests
npm run test
```
## Security
This application runs entirely on the client side. No data is stored or transmitted to any servers.
## Performance
- Optimized PDF generation
- Minimal bundle size
- Efficient rendering
## Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
## Troubleshooting
Common issues and solutions:
1. PDF generation fails
- Ensure all form fields are filled correctly
- Check browser console for errors
2. Certificate preview not showing
- Clear browser cache
- Refresh the page
## License
This project is licensed under the MIT License.
## Disclaimer
This project is intended for educational purposes only. Users are responsible for ensuring their use of this tool complies with relevant policies and regulations.
>>>>>>> e501412cee8a8d731fef59835af1ee644c96d280
```