🎓

Eleqbal Form

Digital student data collection system for Eleqbal School with OTP auth, bilingual UI, and dark mode

Overview

Eleqbal Form is a comprehensive digital system designed specifically for collecting and managing student data at Eleqbal School. The system features secure OTP authentication sent to the student's email, ensuring data privacy. Bilingual forms support Arabic and English to facilitate completion for all students. The admin dashboard enables student data management, statistics viewing, and data export. Dark mode provides a comfortable experience in all conditions.

Features

  • Secure OTP authentication sent via email with limited validity ensuring access security
  • Bilingual forms supporting Arabic and English with instant switching making completion easy for everyone
  • Comprehensive admin dashboard for managing student data, viewing statistics, and tracking status
  • Complete student data management with search, filtering, editing, and deletion capabilities
  • Comfortable dark mode that activates automatically based on system settings with manual toggle option
  • Data export to PDF and Excel formats facilitating printing, archiving, and reporting

How It Works

The system relies on Next.js with Prisma for database management. OTP authentication is generated and sent to email upon registration and verified upon input. Bilingual forms adapt automatically based on user selection with full bidirectional text support. The dashboard displays data with filters and export capabilities.

Challenges

The biggest challenge was implementing a secure and reliable OTP system that works consistently across different email providers. Designing bilingual forms that maintain design consistency in both RTL and LTR directions required extreme care. Ensuring the security of sensitive student data while providing a user-friendly interface was a difficult balance.

Technologies Used

Next.jsReactTypeScriptTailwind CSSPrismaNextAuthshadcn/uiRadix UIFramer MotionZustandRechartsReact Hook FormZoddnd-kitSonnerEmbla CarouselLucideNodemailerWeb Push APIVercelGitNode.jsBunnext-intlnext-themesReact QuerySharpcmdkdate-fnsTanStack TableMDX EditorReact MarkdownjsPDFESLint