Client: Jobayer Academy

Project: Full-featured Learning Management System (LMS)

Tech Stack: Frappe (Backend), Next.js & Vue.js (Frontend)

 

 

Project Overview

Jobayer Academy required a custom-built LMS tailored for the Bangladeshi e-learning market. While Frappe LMS provided a foundational backend system, the client wanted a modern, fast, and fully branded frontend experience, along with several non-standard workflows like flexible course structures, progress tracking, and multilingual support (Bangla).

 

Key Challenges & Solutions

1. Multi-Frontend Architecture Integration (Next.js + Vue.js + Frappe)

• Challenge: Managing and syncing frontend components across Next.js and Vue.js, while still leveraging Frappe as the backend.

• Solution:

  • Exposed necessary Frappe data through custom REST APIs and Frappe’s whitelisted methods.

  • Used Next.js for the public-facing website (SEO-friendly, fast routing) and Vue.js for the interactive course dashboard (SPA feel).

  • Ensured smooth session handling and CSRF/token validation between the Frappe backend and both frontends.

2. Custom UI & Design System

• Challenge: The default Frappe UI was too rigid to match Jobayer Academy’s brand guidelines.

• Solution:

  • Created completely custom UIs using TailwindCSS (Next.js) and Vuetify (Vue.js).

  • Pulled data dynamically via API from Frappe into the new UIs.

  • Handled authentication and role-based routing in Next.js/Vue.js for tailored user experiences.

3. Course Structure Flexibility

• Challenge: The client wanted complex course structures (e.g., nested lessons, quizzes, downloadable files).

• Solution:

  • Extended Frappe’s Course DocType with custom child tables for lessons, resources, and assessments.

  • Built a course builder interface in Vue.js using dynamic forms and drag-and-drop features.

  • Integrated this with Frappe using real-time API calls and WebSocket updates for syncing.

4. Real-time Student Progress Tracking

• Challenge: Frappe LMS lacked detailed learning analytics.

• Solution:

  • Built a custom “Progress Tracker” DocType in Frappe.

  • Tracked interactions on the frontend (Next.js/Vue.js) and sent updates via API to Frappe.

  • Displayed analytics via Vue.js dashboards with charts and filters.

5. Bangla Language & Localization

• Challenge: Full Bangla support was essential – both for UI and dynamic content.

• Solution:

  • Used Frappe’s translation framework and added custom translations.

  • Created a language toggle feature in the frontend with fallback.

  • Handled Bangla date/time format using moment.js and locale packages.

6. Performance & SEO Optimization

• Challenge: LMS systems can be heavy; client also needed strong SEO.

• Solution:

  • Used Next.js static generation (SSG) for marketing pages, blog, and course previews.

  • Vue.js app was code-split and lazy-loaded for dashboard parts.

  • Implemented server-side caching and background syncing for non-critical tasks.

 

 

Key Results

• Delivered a modern, fast, mobile-friendly LMS platform with a clean and custom design.

• Achieved secure role-based access and session management across all platforms.

• Enabled instructors and students to track performance in real time.

• Fully localized UI and content in Bangla, increasing accessibility in local market.

 

 

Tech Stack Summary

 

 

Lessons Learned

• API-first development enabled seamless integration between Frappe and external UIs.

• Balancing two frontend frameworks required strong planning and component management.

• Early prototyping with the client helped reduce design change requests and development time.

• Frappe’s flexibility allowed for deep customization, but careful schema design was key to avoid conflicts with core updates.