A full-stack learning management system for a Nigerian tech-education platform — course catalog, in-browser lesson player, student dashboard, an admin CMS with owner and tutor roles, and a public certificate verifier. Built in vanilla HTML, CSS, and JavaScript on a Supabase backend.
Students browse courses across Web Development, Data Science, Cybersecurity, Cloud/DevOps, Mobile Development, and AI/ML — then drop into an in-browser lesson player and track progress from a personal dashboard. All on a single-page app with no framework, in the academy's fire-orange and navy brand.
The Ignitech community app brings the learning experience to mobile — where students keep up with courses, connect with the cohort, and stay engaged between lessons. It extends the same fire-orange and navy brand system from the web platform into a native-feeling mobile surface.
Ignitech Academy already had a working five-page platform — a single-page LMS, an admin CMS with owner and tutor roles, static about and contact pages, and a public certificate verifier. But every page hid its navigation links on small screens with nothing to replace them. On a phone, the nav simply disappeared, leaving no way to move around the site.
On top of that, certificates spilled onto two pages when saved as PDF, and the brand's bulb logo — implemented as a CSS background image — silently disappeared from printouts entirely.
We added a consistent hamburger-and-slide-in-drawer system across the LMS and static pages — respecting the signed-in and signed-out states on the main app, and using cross-page links on about and contact. The admin CMS, which already collapsed its own layout, got lighter tuning: full-width tappable header buttons, hidden labels on narrow screens, and an icon-only profile button. The certificate page got stacked action buttons and responsive text.
For the certificate PDF, we rewrote the print styles to force landscape, prevent content from breaking across pages, and fit everything onto one — using about 60% of the page with comfortable headroom. Then we fixed the Chrome quirk that drops CSS background images from printouts, so the bulb logo and watermark now render correctly, and reverted an over-aggressive font/margin compression so the print matches the on-screen design exactly.