Landing page & dashboard prototype / Project 14
Educata
Learning platform prototype · Landing page and role-based workspaces
Project focus
A frontend prototype spanning an interactive landing page and learning workspaces for students, teachers, and administrators. It demonstrates how discovery, enrollment, lesson progress, assignments, and certificates connect across different roles.
- Landing-page design
- Role-based UI
- Learning journeys
- Progress feedback
- Context
- Independent project · Frontend prototype
- Project status
- Frontend prototype
- Tools & technologies
- Next.js · React · TypeScript · Tailwind CSS · TanStack Query · Zustand · MSW
Try the interface
A little of the app,
right here.
An interactive mockup adapted from the project’s frontend. Explore the controls with sample data; reset to try the flow again.
STUDENT WORKSPACE
Interface design
1 of 3 lessons complete
Use size, weight, and contrast to make the next step clear.
Try a lesson or switch workspace roles.
Portfolio preview · sample changes reset on reload.
01 / The project
The experience
in context.
Educata explores a learning-management platform through two connected frontend implementations: a public landing and role-based prototype, and a course application with browsing, enrollment, lessons, assignments, and certificate views. The client currently uses a mock backend whose changes reset on reload. It is presented as a frontend prototype, with the production backend still to be completed.
The user flow
- 01Explore the landing page
- 02Try the lesson demo
- 03Choose a role
- 04Browse or manage courses
- 05Follow lesson progress
- 06Inspect assignments and certificates
02 / The making
What went
into it.
Explain the product through interaction
The landing page includes selectable lessons, completion toggles, a changing progress indicator, and a reset action. Role sections, certificate verification, and a waitlist form extend the page beyond a static feature list.
Different roles, a familiar workspace
Student, teacher, and administrator views expose different tasks within shared page structures. The course application adapts navigation to the signed-in role, keeping learning, teaching, and administration recognizable.
A visible path through a course
A module-and-lesson sidebar shows the current lesson, completed lessons, and course progress. Loading, unavailable-course, empty, and archived read-only states explain what the learner can do next.
Prototype behavior with clear boundaries
Mock records make the frontend flows explorable during development. They demonstrate interface behavior rather than a launched LMS; production persistence and the planned backend are outside the current portfolio claim.