Student learning
Role-targeted playlists, creative questions, announcements, quizzes, results, and account tools in a focused mobile experience.
Selected workCreative Chemistry
Full-stack product case study
Creative Chemistry
Expert.
A learning and operations platform that brings student learning, chemistry assessments, academic administration, and fee collection into one system.
Visit live productProject typeFull-stack web application
My roleSole designer & developer
Product surfacesStudent · Teacher · Payments
Live productahlc.top
Project overview
Built around the program’s real work—not a collection of disconnected screens.
Students need targeted lessons, announcements, creative questions, and dependable timed quizzes. Teachers need bilingual authoring, assessment controls, and results. Administrative staff need records, batch organization, payments, audit trails, and recoverable operations.
The result is one connected product with interfaces shaped around each person’s responsibilities.
Academic operations
A bilingual chemistry question bank, assessment assembly, student records, batches, attendance, reporting, and content publishing.
Payment operations
Student lookup, invoicing, fee collection, discounts, receipts, dues, exports, shift controls, and auditable migration workflows.
The problem
Too many tools.
Not enough continuity.
Spreadsheets, chat groups, video links, generic form tools, and paper payment records create gaps between learning and operations.
- 01 Students cannot reliably find all authorized material in one place.
- 02 Generic quiz tools struggle with bilingual chemistry, formulas, images, and grouped stems.
- 03 Teachers, administrators, and cashiers require distinct access boundaries.
- 04 Timed attempts and payment records must survive real-world errors and poor connectivity.
Core workflows
From learning to operations, every flow closes the loop.
01
A focused student experience
The dashboard is the front door to playlists, quizzes, creative questions, and announcements. Access is resolved from assigned roles so different academic groups can share the platform without seeing irrelevant content.
- Mobile-first learning surfaces
- Role-targeted content and channels
- Rich text, media, formulas, and video
02
A resilient timed quiz
The assessment lifecycle runs from configuration and question selection through timed attempt, automatic grading, attempt history, and staff review.
- Answers persist locally and sync with the server
- Expired attempts submit automatically
- Failed submissions queue and retry
- In-progress attempts can be safely resumed
03
Chemistry-specific authoring
The most feature-dense surface supports standalone MCQs and grouped questions with English and Bangla content, images, rich descriptions, answer previews, and a four-level syllabus hierarchy.
- Grade → paper → chapter → topic taxonomy
- AND/OR filters and bulk operations
- YAML-assisted input and media upload
- Consistent KaTeX rendering
04
An integrated payment operation
A dedicated, permission-gated workspace lets cashiers find a student, review history, select a fee, apply discounts, collect payment, and share a receipt. Existing monthly invoices are reused instead of duplicated.
- Invoices and payments modeled separately
- Monthly dues, history, and XLSX exports
- Amount masking and cashier shift windows
- Preview-and-commit legacy migration
Architecture
Separate at the surface.
Connected at the core.
The React application chooses its route bundle and navigation by hostname. Student and admin/payment frontends are built separately while every portal uses the same FastAPI service and PostgreSQL data model.
Studentahlc.top
Teacher / adminadmin.ahlc.top
Paymentspay.ahlc.top
→
Application APIFastAPI
→
Relational dataPostgreSQL
Media + backupsS3 / R2
Frontend
React 18, TypeScript, React Router, Tailwind CSS, Vite
Learning content
KaTeX, rich-text tokens, YouTube embeds, YAML parsing
Backend
Python, FastAPI, Pydantic, SQLAlchemy
Data & storage
PostgreSQL 16, S3-compatible object storage
Security
JWT, HTTP-only cookies, bcrypt, TOTP 2FA, Turnstile, CSP
Delivery
Docker Compose, Nginx, Caddy
Scale of implementation
A production system with real operational breadth.
Repository-derived figures—not usage or business-impact claims.
Engineering highlights
The strongest work happens between the screens.
Domain-driven portal separation
Students, teachers, and cashiers share one data model without sharing an unsuitable interface or permission set.
Connection-aware assessments
Local recovery, server synchronization, auto-submit, and retry queues reduce the risk of losing a timed attempt.
Bilingual chemistry authoring
English and Bangla fields, images, grouped stems, formulas, and hierarchical topics stay consistent from editor to student.
Financial integrity
Invoice/payment separation, duplicate-period protection, staged migration, and audit history keep operational records trustworthy.
Challenges & decisions
Keeping permissions flexible
Hard-coded course access would turn every new program into a code change. Reusable role categories, roles, and audience-combination modes add configuration, but let the system evolve without rebuilding its publishing and payment tools.
Protecting timed attempts
A browser-only countdown is easy to lose or manipulate. Server-side attempt state works with local answer persistence, synchronization, auto-submit, and a retry queue to remain dependable without complicating the student experience.
Migrating financial history safely
Historical records enter through staged preview, row validation, explicit conflict policies, and a final commit. It is slower than direct insertion by design—and far easier to trust and audit.
Outcome
Complete workflows—not just more screens.
AHLC demonstrates end-to-end product engineering across interface design, domain modeling, API development, authentication, reporting, migration, operations, and containerized delivery. Its strongest value is the way each workflow connects: from authoring a chemistry question to delivering and grading it, or from finding a student to recording and auditing a fee payment.
Explore the live product ↗