Paideia LMS - next generation LMS on top Bun, React Router v7, Mantine

[HananoshikaYomaru]

Hi, I am building a single binary Learning Management System. It bets heavily on Mantine and I want to express my gratitude for this projects and all developers of Mantine ❤️. I wish my project can be an example of some advanced usage of mantine components and hooks.

One usage that I'm really proud of is the complex quiz builder in the project. It is a complex form that supports more than 10 question types, see the video: https://mytwu-my.sharepoint.com/:v:/g/personal/manlung_yeung_twu_ca/EbX958kqg7RLk-WCXosJq_gBk2Pk0NE617fUH8jVpg7_AQ

I know I am not the best designer and frontend developer. The UI might looks bad for some of you. I really appreciate if you can provide reccomendations and even opening a PR.

More about me and the project

Myself is a Moodle Admin in a University. I found Moodle hard to use and very error prone. Its codebase also has a lot of tech debt causing feature implementation extremely slow. It is using PHP so its plugins are buggy and often not useful because its is hard for develop to build plugins on top of PHP.

Therefore, I start the project Paideia LMS around a Month ago. I have been building this alone (with AI), developing, researching, writing doc, making youtube videos...

The education industry landscape is changing, with a shift to AI, the old LMS like Moodle and Canvas fails to keep up. I have hope on this LMS to replace Moodle and Canvas because it is single binary but scalable, built on modern tech like typescript, bun, react, payload CMS. But by the effort of myself I can only do so much.

Hopefully anyone might find the project interested and willing to help out. Any contribution or discussion is welcome. Please star the project on github if you like it.

github: https://github.com/paideia-lms/Paideia

demo: https://demo.paideialms.com/

doc: https://docs.paideialms.com/en/getting-started/

youtube: https://www.youtube.com/@PaideiaLMS

Frontend tech stack

I explore different UI and frontend library. I wanted to make the frontend stack as simple as possible. I thought of using just jsx and HTMX but eventually I compromise on the user experience and ecosystem. I decided to go for React and Mantine. And the break down of frontend tech stack is as following:

Frontend tech stack

I explore different UI and frontend library. I wanted to make the frontend stack as simple as possible. I thought of using just jsx and HTMX but eventually I compromise on the user experience and ecosystem. I decided to go for React and Mantine. And the break down of frontend tech stack is as following:

Category	Technology	Purpose
Framework	React	Core UI framework
Framework	React Router	Routing and navigation
UI Library	Mantine Core	Base component library
UI Library	Mantine Hooks	React hooks for common patterns
Forms	Mantine Form	Form state management with useForm hook
Rich Text Editor	Mantine TipTap	Rich text editor built on TipTap
Charts	Mantine Charts	Data visualization components
Charts	Recharts	Chart library powering Mantine Charts
UI Components	Mantine Dates	Date picker and calendar components
UI Components	Mantine Dropzone	File upload with drag and drop
UI Components	Mantine Modals	Modal and dialog management
UI Components	Mantine Notifications	Toast notification system
UI Components	Mantine Code Highlight	Syntax highlighting for code blocks
Data Tables	Mantine DataTable	Advanced data table component
Context Menu	Mantine ContextMenu	Right-click context menus
Rich Text Editor	TipTap	Rich text editing engine (used by Mantine TipTap)
Icons	Tabler Icons React	Icon library
Code Editor	Monaco Editor React	VS Code-like code editor
Drawing Tools	Excalidraw	Whiteboard and diagramming
Diagrams	Mermaid	Markdown-based diagram generation
Drag & Drop	DnD Kit	Accessible drag and drop
Tree View	Headless Tree	File tree and hierarchical data structures
Flow Diagrams	XYFlow React	Node-based flow diagrams
Positioning	Floating UI DOM	Tooltip and popover positioning
Tooltips	Tippy.js	Tooltip library
URL State	nuqs	URL query string state management
Markdown	Remark	Markdown parsing and processing
Markdown	Rehype	HTML processing for markdown
Type Safety	TypeScript	Static type checking