An optimized, glassmorphic admissions portal and CRM engineered with Next.js 14 and Tailwind CSS. Built to streamline candidate registrations, host student photographs, and sync form submissions to cloud spreadsheets.
Explore Programs • Online Registration • Helpline Support
Tip
No-apps-script Database: Google Sheet synchronization is powered by SheetDB.io, eliminating Apps Script quota limitations, slow response times, and cross-origin (CORS) security warnings.
- ✨ Interactive Dark & Light Theme: Complete theme control with zero layout flashes on page load. State is cached in local storage.
- 📅 Responsive Calendar Date-Picker: A zero-dependency custom-engineered date picker in
RegisterFormsupporting leap-year checks, click-away selectors, and automated typing inputs. - ☁️ Edge Image Hosting: Direct file streams route through ImgBB Client-Side APIs with 3MB upload limits to save server bandwidth.
- 📧 Automated Inquiry Routing: All contact requests and registration profiles are instantly dispatched to the academy inbox via Web3Forms.
| Component | File Path | Description |
|---|---|---|
| Header | Header.jsx |
Global navigation bar with route-specific navigation filtering and theme toggler. |
| Courses catalog | Courses.jsx |
Exhaustive eligibility lists, syllabus guidelines, and course parameters. |
| Skills Directory | Skills.jsx |
Animated tab lists showcasing creative arts, freelancing, and development courses. |
| Registration CRM | RegisterForm.jsx |
Unified registration form featuring direct photo upload triggers and custom date-picker. |
| Contact Center | ContactForm.jsx |
Direct email dispatcher and pre-formatted WhatsApp callouts. |
Create a .env.local file in the project root containing your API credentials:
# 📧 Web3Forms email configuration
NEXT_PUBLIC_WEB3FORMS_KEY="your-web3forms-access-token"
# ☁️ ImgBB API token for candidate photos
NEXT_PUBLIC_IMGBB_KEY="your-imgbb-api-key"
# 📊 SheetDB.io API endpoint linked to your Google Sheet
NEXT_PUBLIC_SHEETS_URL="https://sheetdb.io/api/v1/your-sheetdb-id"Important
Your Google Sheet must contain the following exact headers in the first row (case sensitive):
Submitted At, Full Name, Father's Name, CNIC, Date of Birth, Email, WhatsApp, Current Address, Permanent Address, Qualification, Course, Digital Sub-Course, Photo Link
Pull dependencies from the package registry:
npm installLaunch Next.js hot-reloaded development server:
npm run devOpen http://localhost:3000 to view the portal.
Compile optimized static and dynamic server-side assets:
npm run build
npm run start