Back to app
E

Edavro

Next.js educational platform — code-verified technical documentation

v1.0.0Next.js 16React 19TypeScriptTailwind v4PWA

1. Introduction

Edavro is a mobile-first educational web app built with Next.js 16 App Router, TypeScript, Tailwind CSS 4, and React 19.2.

This documentation is generated from real source inspection: routes, stack versions, storage keys, and PWA behavior are aligned with actual code.

48

Pages

7

Layouts

6

Shared Components

100%

TypeScript

2. Key Features

App Router Architecture

Organized route groups: (root), (auth), (secure-paiges), and (public-paiges).

Authentication Journey

Signup, OTP verify, reset-password, create-new-password, and profile completion flows.

Course Lifecycle

Course discovery, details, enrollment, learning progress, and certification screens.

Payment Workflow

Card management, secure-payment selection, and passcode confirmation routes.

PWA Runtime

Custom service worker caching, install banner logic, and offline fallback route.

Dark Themed UI

Tokenized color system in globals.css with Tailwind v4 @theme variables.

Frontend-Only Data Layer

No centralized API client is committed yet; state is currently handled with localStorage, sessionStorage, and page-level logic.

Install Experience

Cross-platform install handling for Android/Desktop and manual iOS instructions.

3. Quick Start

Requirements

  • Node.js 18.17+
  • npm 9+ or pnpm 8+
  • Git

Installation

# 1. Install dependencies

npm install

# 2. Start development server

npm run dev

# 3. Open in browser

http://localhost:3000

Available Scripts

ScriptDescription
npm run devStart the Next.js dev server
npm run buildCreate the production build
npm run startServe the production build
npm run lintRun ESLint checks across the project

4. Folder Structure

edavro-next/
src/app/
src/components/
src/api/
public/
package.json

5. All Pages (49)

Core

RouteDescription
/App entry route
/homeLearner home dashboard
/coursesCourse browsing page
/search-barSearch and filtering
/wishlistWishlist management
/reviewsReviews and ratings
/pwaPWA showcase page
/splashPublic splash demo

Onboarding

RouteDescription
/onboardingOnboarding flow

Authentication

RouteDescription
/auth/signinEmail and password login form
/auth/signupRegistration form for new learners
/auth/reset-passwordReset password request page
/auth/create-new-passwordSet a new password after verification
/auth/otp-code-verifyOTP code verification screen
/auth/current-experience-levelSelect current learning experience
/auth/interestsChoose learning interests and topics
/auth/purposeLearning goal and purpose selection

My Courses

RouteDescription
/my-coursesEnrolled course dashboard
/my-courses/free-coursesBrowse free courses available now
/my-courses/recommendedRecommended courses based on interests
/my-courses/upcoming-sessionsLive session schedule and reminders
/my-courses/course-details/[id]Course details and curriculum overview
/my-courses/learning-progress/[id]Track course progress and completion
/my-courses/milestoneMilestones achieved after start courses
/my-courses/completed-coursesCourses completed and certificates earned
/my-courses/certificationCertificates earned after finishing courses

Payment

RouteDescription
/payment/add-new-cardAdd new payment card with validation
/payment/card/[id]Manage saved payment cards
/payment/passcodeSecure passcode input for payments
/payment/secure-payment/[id]Checkout experience for course purchases

Profile

RouteDescription
/profileUser profile overview and settings
/profile/complete-profileComplete profile details for learners
/profile/personal-infoEdit personal information and preferences
/profile/notificationNotification settings and alerts
/profile/notificationsNotification history and messages
/profile/reminderLearning reminder and scheduling settings
/profile/subscriptionSubscription plan and billing overview
/profile/privacy-policyPrivacy policy
/profile/terms-and-conditionsTerms and conditions

Support

RouteDescription
/support/supportSubmit support requests and messages
/support/faqFrequently asked questions and troubleshooting
/support/help-centerDetailed help and documentation articles
/support/messageContact support message page
/support/not-yetFeature-unavailable fallback with support actions
/support/languageLanguage selection and localization
/support/securitySecurity and privacy settings

Utility

RouteDescription
/documentationDeveloper documentation page
/offlineOffline fallback page for PWA
/not-found404 page for missing routes

6. Project Analysis

Routing

The app has 48 page routes, grouped by feature domains and visibility scopes using App Router route groups.

Layouts

There are 7 layout files providing shared wrappers for root, auth, onboarding, and secure sub-sections.

State Persistence

Persistent state is primarily handled with localStorage and limited sessionStorage usage, not centralized context providers.

PWA Strategy

Custom public/sw.js is registered from src/components/pwa/ServiceWorkerRegister.tsx and pairs with /offline for fallback navigation.

This page intentionally avoids assumptions and only lists what is present in the current codebase.

7. User Flows

New User Onboarding

  1. /onboarding
  2. /auth/signup
  3. /auth/otp-code-verify
  4. /auth/current-experience-level
  5. /auth/interests
  6. /auth/purpose
  7. /home

Password Recovery

  1. /auth/signin
  2. /auth/reset-password
  3. /auth/otp-code-verify
  4. /auth/create-new-password
  5. /auth/signin

Course Purchase

  1. /courses
  2. /my-courses/course-details/[id]
  3. /payment/secure-payment/[id]
  4. /payment/passcode
  5. /my-courses/learning-progress/[id]

PWA Install

  1. /pwa
  2. beforeinstallprompt
  3. Install banner confirm
  4. Standalone launch

8. Fonts & Typography

Primary

Roboto

Used for body text, headings, and utility classes throughout the app.

var(--font-sans)

Source

Local Font Files

Loaded via src/app/fonts.css using @font-face declarations.

public/assets/fonts/*.woff2
Font tokens are defined in src/app/globals.css under @theme, and the Roboto faces are declared in src/app/fonts.css.

Font Sizes

UseSize
Page titletext-5xl / 48px
Section headertext-3xl / 32px
Bodytext-sm / 14px
Captiontext-xs / 12px

9. Customisation

Brand Colour

Change the primary brand colour in src/app/globals.css:

/* src/app/globals.css */
@theme {
--color-primary: #7B48FF; /* purple theme */
}

Adding a New Page

  1. Create src/app/your-page/page.tsx.
  2. Wrap content in a page-level container and style as needed.
  3. Add route-level handling in layout and navigation if required.
  4. If API data is required, add a new client in src/api/ first, because the folder is currently empty.
Replace mock data with real API calls by wiring a future API client into page components.

10. Data & State

Storage usage is key-based and page-driven. Prefixing is used mainly for auth, onboarding, and PWA keys.

localStorage

KeyTypePurpose
userJSON stringBasic logged-in user object
tokenstringAuth token used for sign-in state
userEmailstringSignup email used for OTP verification
resetEmailstringEmail for reset-password flow
user_levelstringSelected experience level
user_interestsJSON[]Selected learning interests
userDataJSONComplete profile form data
user_reminderJSONReminder settings for study notifications
edavro-pwa-dismissed"1"Install banner dismissal state
edavro-pwa-installed"1"Install completion state

sessionStorage

KeyTypePurpose
signupActiveLegalstringTracks active legal modal tab in signup page

Cookies / Server Session

No direct cookie write/read logic is currently implemented in client code. Session management is not centralized in this repository yet.

11. PWA Configuration

public/manifest.json

App metadata, icons, theme color, and shortcuts.

public/sw.js

Service worker cache rules for offline support.

src/app/offline/page.tsx

Offline fallback page when network is unavailable.

Service worker registration runs from src/components/pwa/ServiceWorkerRegister.tsx in src/app/layout.tsx, and install UX is handled by PwaBanner.tsx with localStorage keys edavro-pwa-dismissed and edavro-pwa-installed.

12. Credits & Libraries

Library / ResourceVersionUsed For
Next.js15.x/16App Router architecture
React19.xComponent rendering with use client
Tailwind CSSv4.0CSS-first configuration via @theme
@tailwindcss/postcss^4Tailwind v4 PostCSS integration
@tailwindcss/postcss^4Tailwind v4 PostCSS integration
Lucide React^1.7.0Additional icon set
SweetAlert2^11.26.24Modal alerts and confirmation flows
PropTypes^15.8.1Runtime prop validation in select components
ESLint^9Code quality checks with Next.js presets
eslint-config-next16.2.2Next.js linting rules

13. Support

If you have questions beyond this documentation, use the in-app support section.

Before reaching out, please:

  1. Read this documentation thoroughly.
  2. Check the browser console for errors.
  3. Confirm you are running npm run dev, not opening files directly.
  4. Ensure npm install completed without errors.
Tip: Missing NEXT_PUBLIC environment variables are the most common issue when integrating a real backend.

Edavro v1.0.0 — © 2026. All rights reserved.