A noble non-profit organisation anchored in the education sector, Arisbe's vision is to reshape the conventional bounds of learning. THE GOAL To deliver a functional, intutuve Learning Management System (LMS) in 3 months.
The Design Magic
10+
Features
172
User Stories in Just 3Sprints!
01
sprint of end-to-end testing
Tech Specs
Feature Set
Email Automation
Donors Portal
Dashboard & Analytics
Admin Portal
Zoom Integration
Referral Module
Scholarship Portal
Automated Attendance
Automated Workshop Flow
Emails Module
Customisable Registration Form
Choosing the Right Tech Stack
The system needed to be:
Secure
Scalable
Maintainable
Given these core needs, our decision was clear:
ReactJS
Tailwind CSS
ReactJS, on its own, is a formidable tool for building interactive user interfaces. However, to truly harness the power of React we decided to incorporate the following libraries to our project:
Material UI
SWR
Tailwind
Material-UI (MUI)
What is it?
A popular React UI framework that offers a rich set of components and themes.
Why MUI for Arisbe?
Speed & Consistency: With predefined components, we could quickly assemble the UI, ensuring a consistent look throughout the platform.
Customisability: Despite being component-based, MUI allowed us to customise according to Arisbe’s branding and aesthetics.
Responsiveness: MUI’s components are designed to be mobile-friendly, ensuring that Arisbe's platform is accessible on any device.
SWR (Stale-While-Revalidate)
What is it?
A React hook library to fetch, cache, and update data in real-time.
Why SWR for Arisbe?
Efficient Data Handling: In the world of education, information updates are constant. SWR ensures Arisbe’s platform data remains fresh with minimal server requests.
Improved User Experience: With optimistic UI updates, users experience near-instantaneous data refreshes, enhancing overall user satisfaction.
Error & Loading Handling: SWR provides an elegant solution to handle loading states and possible errors, ensuring a seamless user experience..
Material-UI (MUI)
What is it?
A utility-first CSS framework for rapid UI development.
Why MUI for Arisbe?
Rapid Prototyping: Tailwind’s utility-first approach enabled our developers to prototype and iterate UI components at lightning speed.
Flexibility & Efficiency: Instead of battling with overriding styles, Tailwind gave us the ability to craft custom designs efficiently.
Performance: With its purge functionality, we ensured that Arisbe's platform remained lightweight, only loading the necessary styles.
Harmonizing MUI, Tailwind, and SWR
Design Synergy (MUI+Tailwind): MUI offered structured components, while Tailwind provided the flexibility to customize and refine these components to match Arisbe’s unique brand identity.
Data Handling (SWR): With the front-end visuals in place, SWR ensured that data presented was always fresh and accurate, enriching the user experience and ensuring educators and students always had the latest information at their fingertips.
.SVG){kind=icon}
.SVG){kind=icon}
.SVG){kind=icon}
