ENIGMATRIX digitises a university's admissions, examinations, finance, HR, scholarships (Mahapola), welfare, medical and student-union processes behind role-based access. On this group build I was a full-stack developer: I built the Mahapola scholarship and disciplinary data processes, and owned the frontend's deployment — a multi-stage Docker build that compiles the React SPA and serves it from nginx with SPA history fallback, for reproducible one-command deploys.
Featured
Student Welfare Management System
Full-Stack Developer (Team)
The React/Material-UI frontend for ENIGMATRIX — a role-based university-management platform for the University of the Visual & Performing Arts — where I built the Mahapola/disciplinary data flows and packaged the app as a multi-stage Docker + nginx image for one-command deployment.
Role & Context
Level 2 group software project (module IS 2901) mentored under the Faculty of IT (University of Moratuwa) and Loons Lab, delivered for a real client — the University of the Visual & Performing Arts. The frontend of the broader ENIGMATRIX university-management platform (~7 contributors, 40+ modules). My contributions: the Mahapola scholarship and disciplinary data processes, plus the frontend's containerization and deployment (multi-stage Docker + nginx).
Problem
The university's admissions, aptitude, examinations, finance, HR, scholarships (Mahapola), medical, welfare and student-union processes ran manually across disconnected tools. The frontend also had no consistent way to build and ship — large Create React App builds, dependency drift, and SPA deep links 404-ing when served by an ordinary web server. The deployment work closed that gap with a reproducible, container-based build-and-serve pipeline.
Approach & Architecture
Loading diagram…
Best Practices Followed
- Multi-stage Docker build: the Node build toolchain stays in the build stage; the final image ships only static assets on nginx:stable-alpine (small runtime, low attack surface)
- Reproducible installs: npm ci against a committed package-lock.json so every build resolves identical versions
- Pinned base images (node:13.12.0-alpine, nginx:stable-alpine) for deterministic builds
- Production build hardening: GENERATE_SOURCEMAP=false (no source disclosure, smaller output) and a raised Node heap to avoid OOM on the large CRA build
- SPA-correct serving: nginx try_files ... /index.html history fallback plus hashed, cache-friendly asset filenames
- Role-based access in the app it serves: JWT-based, fine-grained route guards (authRoles mapping pages to roles) backed by Keycloak OIDC
Challenges & Resolution
ChallengeThe large Create React App build exhausted Node's heap and emitted source maps that leaked internals.
FixRaised the heap with --max_old_space_size=4096 and disabled source maps via GENERATE_SOURCEMAP=false in the production build script.
ChallengeClient-side routes (React Router deep links) returned 404 when the static build was served by a plain web server on refresh.
FixAdded an nginx try_files $uri $uri/ /index.html fallback so unmatched paths return the SPA shell and routing resolves on the client.
Outcomes
- Shipped a single deployable container image that builds the SPA and serves it on port 80 with one docker build/run — no host Node setup
- Minimal runtime image (nginx:stable-alpine; build toolchain excluded via multi-stage)
- Serves a frontend spanning 40+ modules (admissions, examinations, finance, HR, Mahapola, welfare, student unions, medical, audit, ...) across ~1,000 source files
- My feature contribution: the Mahapola scholarship and disciplinary submission data processes
Tech Stack
ReactMaterial UIReduxNode.jsExpress.jsPostgreSQLREST APIDockerNginxKeycloakCamundaAzure
Concepts & Skills Learnt
Multi-stage Docker builds & image-size optimizationnginx static / SPA serving with history fallbackReproducible builds (npm ci + lockfile)Pinned / immutable base imagesProduction build hardening (source-map stripping)OAuth2 / OIDC (Keycloak)JWT authentication & Role-Based Access Control (RBAC)BPMN workflow integration (Camunda)Microservices / path-based API routingCreate React App / Webpack production buildsCloud VM deployment (Azure)Redux + Material UI (MATX admin template)