Ilmora — Madrasha Management

Bilingual React frontend for admissions, attendance, fees and madrasha administration.

CATEGORYEducation management

Live project ↗

Project facts

PROJECT TYPEMadrasha management frontend

MY ROLEFrontend Developer

COLLABORATIONFrontend implementation project

STATUSFrontend complete · interactive demo

CONTRIBUTION AREAS

Responsive public website
Bangla and English interfaces
Admissions and student workflows
Attendance and finance screens
Typed service and API boundaries

Overview

A completed React and TypeScript madrasha management frontend for administrators, teachers and accountants, with a responsive public website and interactive management workspace.

01 / Context

The problem

Madrasha staff need a connected interface for admissions, student records, attendance and finance, accessible in Bangla and English on desktop and mobile.

My role

Completed the public website and management frontend, including responsive screens, bilingual controls, validated forms and browser-persisted demo workflows.

Constraints

The deployed demo uses browser-local data and illustrative roles. Live Django APIs, payment gateways, SMS and biometric services are not connected; device synchronization is simulated.

02 / Engineering

Technical decisions

Use a typed service boundary so the demo and future API integration share frontend contracts.

Keep academic-session data separate and store monetary values in integer paisa.

Provide separate public and workspace language/theme preferences, responsive tables, CSV exports and printable reports.

Validation

Scope and architecture verified against the frontend README, route registry and project context. The live URL serves the Ilmora React SPA. The source includes Vitest domain tests and Playwright browser tests; these frontend suites were not rerun for this portfolio update.

03 / Delivery

What the project delivers

Delivered 58 management routes covering dashboard, admissions, students, attendance, fees, funds and administration, plus 12 public pages. The frontend supports multi-step admissions, student promotion, attendance marking, partial fee collection, receipts, donor records and audit filtering.

Lessons and next steps

The next delivery phase is implementing and validating the Django API contract, server authentication, permissions and file handling before switching the frontend into API mode.

Architecture overview

A React Router SPA separates public pages from a shared management shell. Typed domain services support session-scoped demo data and an API adapter for future Django integration. Uploads persist in IndexedDB.

This public summary omits private domain rules, data relationships, security policies, and operational details.

Technical focus

React 19, TypeScript, React Router 7 and Vite
TanStack Query and Zod with a typed service boundary
Academic-session records in browser storage; uploads in IndexedDB
Vitest and Playwright verification tooling

Ilmora bilingual madrasha management landing page

Project screenshots

Captured from the live Ilmora frontend using its browser-local demo data.

Ilmora public landing page — Public website — Bengali landing page and demo entry.

Ilmora administrator dashboard — Administrator demo dashboard — session statistics and institutional overview.

Ilmora student directory — Student directory — demo records, search and class filters.

Ilmora attendance marking — Student attendance — session-aware marking in the demo workspace.

Ilmora fee collection — Fee collection — student search and payment workflow in the demo.

Ilmora mobile landing page — Mobile preview — Bengali public website at 390px width.

Public architecture diagram

Ilmora — Madrasha Management — public architecture overview — Conceptual view of the implementation. Private domain rules and infrastructure are omitted.

Demo walkthrough

A short recording of Ilmora’s browser-local demo: landing, dashboard, students, attendance and fees.

Interested in work like this?

This public case study demonstrates engineering judgment without exposing internal business logic.

Let’s start a conversation ↗