About the client
Teaching French, without the platform getting in the way.
Fleentia is a French-language education business founded by Feriel Belbachir, a DELF/DALF-certified examiner-corrector who has taught FLE (Français Langue Étrangère) since 2014 and designed pedagogical materials for TV5Monde. The business serves two audiences: students preparing for French proficiency exams (DELF, DALF, TCF) or international mobility programs (Campus France, Canadian immigration), and teachers who need course materials, workshops, and training resources.
Before Fleentia, this kind of FLE tutoring typically runs on a mix of generic scheduling tools, PDF handouts, and manual student tracking — workable at small scale, but not something that can carry a growing student base or a resource library across course levels, exam types, and two distinct user roles.
The challenge
One brand, two very different users.
Students and teachers need the platform to do different jobs — and showing both audiences the same generic dashboard undersells what each one actually needs.
Constraints
Students need a self-serve way to find the right course or exam-prep track for their level, follow structured lessons, and track progress toward a specific certification (DELF, DALF, or TCF) or mobility goal. Teachers need a completely different surface: class and course management, teaching resources, and professional-development content like webinars and training courses — not a cut-down version of the student experience.
A single generic "logged-in dashboard" pattern would have forced both audiences through the same information architecture, burying exam-specific content for students and administrative tools for teachers behind the same navigation. The platform needed role-aware routing and content from day one, not a bolted-on permissions layer added later.
Project objectives
What the platform had to deliver.
Business objectives
- Give Fleentia a branded platform independent of third-party course marketplaces
- Support two distinct funnels: exam-prep students and mobility-track students
- Build a foundation the teacher-facing side of the business could grow into
Technical objectives
- Role-based routing and access for student vs. teacher portals
- A content structure that scales across course levels and exam types
- Fast, SEO-indexable marketing pages alongside authenticated app views
UX objectives
- Get a new visitor to the correct portal in one decision, not several
- Make exam-prep content (DELF/DALF/TCF) easy to scan by level and format
- Keep the teaching-brand voice — warm, personal, French-first — throughout
What Pairix did
Design and build, end to end.
Strategy & product
- Mapped the two user roles to two separate portal structures
- Defined the information architecture for courses, exam prep, and resources
- Planned the content model for course levels and exam-track categories
UX / UI design
- Designed the role-selection entry point on the homepage
- Designed the student portal: courses, exam prep, resources, tips, mobility guide
- Designed the teacher portal: courses, tips, webinars
- Built a consistent component system carried across marketing and app views
Engineering
- Built the site on Next.js with the App Router for mixed static/dynamic rendering
- Implemented authentication with role-based signup (student / teacher)
- Built the newsletter subscription flow with role-aware targeting
- Implemented image optimization and responsive layout across the site
Launch & SEO
- Implemented on-page SEO metadata, Open Graph, and Twitter Card tags
- Structured URLs by portal and content type for clarity and crawlability
- Set up localized (French-language) metadata and locale tagging
UX & product design
Route by role, not by feature.
The homepage's central decision is a single fork: 'I'm a student' or 'I'm a teacher.' Everything downstream follows from that choice.
Key decision
Instead of one dashboard with tabs for different user types, Fleentia routes students and teachers into separate portal spaces immediately after signup, each with its own navigation: students see courses, exam preparation, resources, tips, and the international mobility guide; teachers see their own courses, tips, and webinars. This keeps each portal's navigation short and relevant instead of forcing either audience to filter out content meant for the other.
The marketing site carries the same split down to the footer — course links, exam-prep links, and the mobility guide are grouped separately from teacher-facing training and webinar links — so the site's structure teaches the two-audience model before a visitor even logs in.
UI design
A warm, editorial system for a personal brand.
Approach
Fleentia is built around a founder-led teaching brand, so the interface leans warm and editorial rather than corporate-SaaS: large expressive headline type, generous whitespace, and a course/resource card system that reads more like a curated magazine than a software dashboard. Components — course cards, portal-selection cards, and numbered feature blocks — are reused consistently between the marketing site and the authenticated portals so the brand feels continuous across the whole experience.
Technical architecture
Static where it can be, dynamic where it must be.
Marketing and content pages are built for fast loads and indexability. Authenticated portal views handle the role-specific application logic.
Visitor / CDN
Requests are served through Next.js's built-in edge and CDN-friendly caching for static and public content.
Next.js application (App Router)
Handles routing for the public marketing site, the student portal, and the teacher portal from a single codebase.
Authentication & role routing
Signup captures the user's role (student or teacher) and routes the session into the corresponding portal.
Content & course data
Courses, exam-prep tracks, resources, and tips are structured as content entities scoped to a portal and category.
Newsletter & contact
Subscription and contact forms capture role and intent, feeding role-targeted communication.
Technology stack
What the platform runs on.
Frontend
Rendering
Auth & access
SEO & discovery
Security
Access scoped to role, by default.
Authentication separates account creation by role at signup, so a student account and a teacher account are provisioned differently rather than sharing one undifferentiated user type with permissions layered on top. Public marketing routes and authenticated portal routes are kept distinct, and forms (signup, newsletter, contact) validate input before it reaches application logic.
Performance & SEO
Fast marketing pages, indexable by design.
Course, resource, and marketing pages use Next.js's image optimization pipeline and are structured for static generation where content doesn't depend on a logged-in session, keeping the public site fast for organic visitors arriving from search. Every page carries dedicated metadata — title, description, Open Graph image, and locale — rather than reusing one shared tag set across the site, which matters for a content library that spans course levels, exam types, and two portals.
Technical challenges
The problems worth explaining.
Two decisions shaped the rest of the build.
Splitting one platform into two coherent experiences
The problem
Students and teachers needed genuinely different navigation, content, and tools — but the platform still had to feel like one product, not two disconnected apps bolted together.
What we did
Role was captured at signup and used to route users into separate portal layouts (student-portal and teacher-portal route groups), each with its own navigation, while sharing the same design system and component library.
Separating routes by role keeps each portal's information architecture short and relevant, without duplicating the underlying UI components or forking the codebase.
Result
Students and teachers each land in a portal scoped to what they actually need, with the shared visual language keeping the brand consistent across both.
Structuring exam-prep content without flattening it
The problem
DELF, DALF, and TCF are different exams with different levels and formats. A flat list of 'courses' would have made it hard for a student to find the right track for their specific exam and level.
What we did
Exam preparation was modeled as its own content section, separate from general courses, and paired with a dedicated international mobility guide for Campus France and Canada-track students.
Treating exam prep as a first-class content category — not a filtered view of the course catalog — matches how students actually think about their goal: 'I need to pass the DALF C1,' not 'show me all courses.'
Result
Exam-prep and mobility content have dedicated, indexable sections that can grow independently of the general course catalog.
FAQ
Common questions about this project.
Pairix designed and developed Fleentia's web platform: a public marketing site plus two authenticated portals — one for students and one for teachers — built on Next.js.
Building an education or SaaS platform?
We design and build role-aware web platforms end to end — from product strategy to production code.
Start your project