# 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
- Start the development server
npm run dev
<<<<<<< HEAD
- Open the app Visit http://localhost:5173 in your browser. =======
- Open the app Visit http://localhost:5173 in your browser.
e501412cee8a8d731fef59835af1ee644c96d280
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)
- 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 ======= ├── 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
e501412cee8a8d731fef59835af1ee644c96d280
- 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
e501412cee8a8d731fef59835af1ee644c96d280
- All data is processed client-side. No data is stored or transmitted to any servers.
<<<<<<< HEAD
- Optimized PDF and image generation
- Minimal bundle size with code splitting
- Efficient rendering with React =======
- Optimized for fast load times and minimal bundle size
- Efficient rendering and code splitting
e501412cee8a8d731fef59835af1ee644c96d280
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
<<<<<<< HEAD
- PDF generation fails:
- Ensure all form fields are filled correctly =======
- 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
e501412cee8a8d731fef59835af1ee644c96d280
This project is licensed under the MIT License.
<<<<<<< HEAD
This project is intended for educational purposes only. Users are responsible for ensuring their use of this tool complies with relevant policies and regulations.
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
This application runs entirely on the client side. No data is stored or transmitted to any servers.
- Optimized PDF generation
- Minimal bundle size
- Efficient rendering
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
Common issues and solutions:
-
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.
e501412cee8a8d731fef59835af1ee644c96d280