Navuchai: an LMS with educational PDF search, courses, and visual material cropping

Navuchai: an LMS with educational PDF search, courses, and visual material cropping превью

Industry:

EdTech & corporate learning

Services provided:

Full-stack development
UX/UI design
API integration

Technology stack:

React
TypeScript
Vite
MUI
MobX
react-pdf
pdf-lib
React Router
Tailwind CSS

Timeline:

From a fragmented PDF catalog to a unified platform with admin and user roles

Project highlights

Organizations with large archives of learning materials need one access point: users quickly find the right PDF, admins assemble courses from modules and lessons, and configure access and navigation. The team built the Navuchai frontend — a React platform with two Courses flows: for users, search and viewing; for admins, managing courses, modules, and lessons. A key focus is the visual lesson editor with PDF cropping in print coordinates (PDF points), so the backend can split topics correctly without manual markup.

Challenge

Digital learning often stalls at the gap between a rich PDF archive and end-user convenience. Typical needs: So the platform required:

  • Fast material search by tags and a tree structure (class, subject, book)
  • Separate UI for student/teacher and administrator
  • In-browser PDF viewing without downloading the full document
  • A lesson builder with visual page cropping and coordinates sent to the split/cropped API
  • Course access control and configurable navigation menus per organization
  • Stable lesson saving without page reloads or losing editor context

Our approach

The platform is designed as one product with clear role separation and a shared API layer. We delivered:

Two material search modes

Tag search (autocomplete with suggestions) and tree navigation via topics — with class, subject, and book selects synced to the hierarchy API.

User-facing material list

A compact PDF list in one panel, pagination, class/subject/book metadata, and a built-in viewer with zoom and rotate.

Admin courses workspace

Grid, list, and table course views, expand modules and submodules, create lessons, attach tests — one screen with display-mode switching.

Visual PDF cropping in the lesson editor

react-pdf preview, page-boundary sliders in PDF points (0–842), legacy coordinate migration, and split/cropped submit on lesson save with a table of contents.

Roles and organization settings

Sidebar items filtered by roles and organization navigation settings; a dedicated course access-control section.

Updated shell UX

Modern side navigation, consistent design tokens, and a unified visual language for user and admin screens.

Impact

The platform became a single digital workspace: from finding a textbook fragment in minutes to assembling a course and precisely splitting PDFs on the server. Key capabilities:

  • Tag search and class → subject → book tree search in one UI.
  • Paginated material list and in-page PDF viewing.
  • Admin: courses, modules, lessons, tests, and an editor with visual page cropping.
  • Correct Y-coordinate handoff in PDF points to the backend for split/cropped.
  • Configurable navigation and course access control by organization.
  • Built with Vite, TypeScript, MobX, and a shared API layer for all sections.

The path from educational PDF to a ready course lesson is shorter: users find material via search; admins assemble structure and set page bounds visually.

Navuchai: an LMS with educational PDF search, courses, and visual material cropping влияние — изображение 1

Measurable results

Navuchai: an LMS with educational PDF search, courses, and visual material cropping измеримые результаты — изображение 1

What we learned

EdTech products win when PDF and topic-hierarchy complexity is hidden behind familiar search and filter patterns. Trust in material splitting comes from one coordinate system (PDF points), predictable save without reload, and user/admin flows in one app.

Need an LMS or educational materials catalog?

We design learning platforms that combine content search, course management, and PDF workflows in one interface. Get in touch to discuss your project!

Let'sCollaborate!

г. Минск, ул. Попова, 24А, пом 406 флагг. Минск, ул. Попова, 24А, пом 406

Общество с ограниченной ответственностью «НИКПА-СТРОЙ»

УНП 193184561

© 2026 WEB24Все права защищены