A modern web application for BRAC University Computer Club members to access and download their certificates with ease.
- Search by ID: Direct access using unique recipient IDs
- Certificate Preview: View certificates before downloading
- Fast Retrieval: Instant certificate access
- Responsive Design: Works perfectly on all devices
- Modern UI: Elegant Roman-inspired design aesthetic
- Fast Performance: Instant certificate retrieval
- Accessibility: Screen reader friendly with proper ARIA labels
- Facebook Integration: Share directly to Facebook
- LinkedIn Sharing: Post to LinkedIn profiles
- Copy Link: Easy certificate link sharing
- Social Media Ready: Pre-formatted sharing URLs
- Certificate Overview: View all certificates in one place
- Statistics: Track total certificates and recipients
- Search & Filter: Find specific certificates quickly
- Bulk Actions: View and manage multiple certificates
- Contact Form: Direct support request submission
- FAQ Section: Common questions and answers
- Multiple Channels: Email, phone, and office support
- Issue Tracking: Structured support ticket system
- Node.js 18+
- npm or pnpm
# Clone the repository
git clone <repository-url>
cd bitbattles-certificate
# Install dependencies
npm install
# or
pnpm install
# Run development server
npm run dev
# or
pnpm devThe application now uses a local JSON database, so no external database setup is required.
- Next.js 14: React framework with App Router
- TypeScript: Type-safe development
- Tailwind CSS: Utility-first styling
- Radix UI: Accessible component primitives
- JSON Database: Local certificate data storage
- Type Safety: Full TypeScript interfaces
- IdSubmissionForm: ID-based certificate access
- CertificateStats: Statistics and metrics display
- ShareDialogue: Social media sharing functionality
- CopyButton: Certificate link copying
src/
├── app/ # Next.js App Router
│ ├── [recipientId]/ # Dynamic certificate pages
│ ├── admin/ # Admin dashboard
│ ├── contact/ # Support contact page
│ ├── api/certificate/ # Certificate API endpoint
│ └── layout.tsx # Root layout
├── components/ # Reusable UI components
│ ├── ui/ # Base UI components
│ ├── CertificateStats.tsx
│ └── ShareDialogue.tsx
├── lib/ # Utility functions
│ └── database.ts # JSON database operations
└── DB/ # Certificate data
└── Data_Base.json # Certificate database
- Primary:
#3a1e10(Dark Brown) - Secondary:
#a06937(Medium Brown) - Accent:
#efda9b(Light Gold) - Background:
#3a1e10with opacity variations
- Kragx: Custom font for main titles
- Cinzel: Serif font for headings
- Lora: Body text font
- Glass Morphism: Backdrop blur effects
- Gradient Buttons: Sophisticated animations
- Custom Scrollbars: Themed styling
- Responsive Grid: Mobile-first layout
- Purpose: Certificate lookup by recipient ID
- Input:
{ recipientId: string } - Output: Redirect to certificate page or error
- Mobile First: Optimized for mobile devices
- Tablet Support: Responsive grid layouts
- Desktop Experience: Full-featured interface
- Touch Friendly: Optimized for touch devices
npm run build
# or
pnpm buildnpm run start
# or
pnpm start- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
This project is licensed under the MIT License.
For support and questions:
- Email: support@bracucc.org
- Phone: +880 1234-567890
- Office: BRAC University, 66 Mohakhali, Dhaka 1212, Bangladesh
- ✅ Replaced MongoDB with local JSON database
- ✅ Implemented admin dashboard
- ✅ Created comprehensive contact page
- ✅ Enhanced UI with statistics display
- ✅ Improved social sharing features
- ✅ Added FAQ section
- ✅ Optimized performance and accessibility
- ✅ Simplified to ID-only access method