EOTC LMS — Next.js Frontend

Production-Ready Next.js Frontend Skeleton for the Ethiopian Orthodox Tewahedo Church Learning Management System.

This structure is highly detailed to ensure every single backend application (accounts, courses, virtual_gubae, etc.) is fully mapped into the Next.js ecosystem.

📁 Project Structure

lms-frontend/
├── .github/
│   ├── workflows/          # CI/CD Pipelines (e.g., build, lint, test)
│   └── pull_request_template.md
├── public/                 # Static assets (images, icons, fonts)
│   ├── icons/
│   └── images/
├── src/
│   ├── app/                # 🌐 NEXT.JS APP ROUTER
│   │   ├── (auth)/         # 🔐 Maps to backend `accounts`
│   │   │   ├── login/page.tsx
│   │   │   ├── register/page.tsx
│   │   │   ├── forgot-password/page.tsx
│   │   │   └── reset-password/page.tsx
│   │   │
│   │   ├── dashboard/      # 📚 Main LMS (Authenticated routes)
│   │   │   ├── layout.tsx  # Dashboard Shell (Sidebar + Topbar)
│   │   │   ├── page.tsx    # User's main dashboard view
│   │   │   │
│   │   │   ├── admissions/ # 📝 Maps to backend `admissions`
│   │   │   │   ├── apply/page.tsx
│   │   │   │   └── status/page.tsx
│   │   │   │
│   │   │   ├── courses/    # 🎓 Maps to backend `courses`, `assessments`, `assignments`
│   │   │   │   ├── page.tsx          # Course Catalog
│   │   │   │   ├── [courseId]/
│   │   │   │   │   ├── page.tsx      # Course Overview
│   │   │   │   │   ├── learn/page.tsx# Video Player / Learning UI
│   │   │   │   │   ├── assignments/page.tsx
│   │   │   │   │   └── assessments/page.tsx
│   │   │   │
│   │   │   ├── gubae/      # 🎥 Maps to backend `virtual_gubae`
│   │   │   │   ├── page.tsx          # Upcoming Gubae Sessions
│   │   │   │   └── [sessionId]/page.tsx # Live Session Room
│   │   │   │
│   │   │   ├── counseling/ # 🫂 Maps to backend `counseling`
│   │   │   │   ├── page.tsx          # Find a Counselor
│   │   │   │   └── appointments/page.tsx
│   │   │   │
│   │   │   ├── forums/     # 💬 Maps to backend `forums`
│   │   │   │   ├── page.tsx          # Forum Categories
│   │   │   │   └── [threadId]/page.tsx
│   │   │   │
│   │   │   ├── calendar/   # 🗓️ Maps to backend `liturgical_calendar`
│   │   │   │   └── page.tsx
│   │   │   │
│   │   │   ├── payments/   # 💳 Maps to backend `payments`
│   │   │   │   ├── checkout/page.tsx
│   │   │   │   └── history/page.tsx
│   │   │   │
│   │   │   ├── certificates/# 📜 Maps to backend `certificates`
│   │   │   │   └── page.tsx
│   │   │   │
│   │   │   └── ai/         # 🤖 Maps to backend `ai_assistant`
│   │   │       └── chat/page.tsx
│   │   │
│   │   ├── admin/          # ⚙️ Staff & Admin Operations
│   │   │   ├── layout.tsx
│   │   │   ├── page.tsx
│   │   │   ├── cohorts/    # 👥 Maps to backend `cohorts`
│   │   │   ├── moderation/ # 🛡️ Maps to backend `moderation`
│   │   │   └── sync-logs/  # 🔄 Maps to backend `sync`
│   │   │
│   │   ├── actions/        # ⚡ Server Actions (Mutations)
│   │   │   ├── auth.ts     # Login/Register actions
│   │   │   ├── course.ts   # Enroll, submit assignment
│   │   │   ├── gubae.ts    # Join/Leave session
│   │   │   ├── payment.ts  # Process transactions
│   │   │   └── ...
│   │   │
│   │   ├── api/            # 🔌 Route Handlers (Next.js API layer)
│   │   │   ├── auth/[...nextauth]/route.ts # If using NextAuth
│   │   │   └── webhooks/route.ts           # Stripe/Payment webhooks
│   │   │
│   │   ├── error.tsx       # Standard Next.js error boundaries
│   │   ├── global-error.tsx
│   │   ├── globals.css     # Tailwind + Shadcn CSS variables
│   │   ├── layout.tsx      # Root providers (Theme, i18n, QueryClient)
│   │   ├── loading.tsx
│   │   ├── not-found.tsx
│   │   ├── page.tsx        # Public Landing Page
│   │   ├── robots.ts
│   │   ├── sitemap.ts
│   │   └── sw.ts
│   │
│   ├── components/         # 🧱 REACT COMPONENTS
│   │   ├── auth/           # Login form, Register form, Social auth
│   │   ├── courses/        # CourseCard, VideoPlayer, ModuleList
│   │   ├── assessments/    # Quiz engine UI, Question types
│   │   ├── assignments/    # File upload UI, Grade display
│   │   ├── gubae/          # WebRTC video grid, Chat overlay, Hand raise UI
│   │   ├── counseling/     # Availability calendar, Session booking form
│   │   ├── forums/         # Thread list, Reply box, Upvote button
│   │   ├── calendar/       # Liturgical monthly view, Event cards
│   │   ├── ai/             # Chat interface, Markdown renderer
│   │   ├── payments/       # Pricing tables, Stripe elements wrapper
│   │   ├── dashboard/      # Progress charts, Upcoming deadlines widget
│   │   ├── layout/         # Sidebar, Navbar, Mobile Menu, Footer
│   │   ├── forms/          # Reusable react-hook-form wrappers (Input, Select)
│   │   ├── loaders/        # Spinners, Suspense fallbacks
│   │   ├── shared/         # Generic UI (EmptyState, Tooltips, Modals)
│   │   ├── skeletons/      # UI Skeletons for async data loading
│   │   ├── ui/             # Shadcn UI base primitives
│   │   ├── DashboardClient.tsx
│   │   └── theme-provider.tsx
│   │
│   ├── types/              # 🏷️ TYPESCRIPT DEFINITIONS (Matches Django Models)
│   │   ├── accounts.ts     # User profile, Roles
│   │   ├── admissions.ts   # Application status, forms
│   │   ├── courses.ts      # Course, Module, Lesson, Content
│   │   ├── assessments.ts  # Quiz, Question, Option, Result
│   │   ├── assignments.ts  # Submission, Grade, Feedback
│   │   ├── gubae.ts        # Session, Participant, Room state
│   │   ├── counseling.ts   # Counselor profile, Appointment
│   │   ├── forums.ts       # Post, Thread, Comment
│   │   ├── calendar.ts     # Fasting period, Feast day
│   │   ├── payments.ts     # Transaction, Subscription plan
│   │   └── sync.ts         # Offline sync status
│   │
│   ├── lib/                # 🛠️ UTILITIES & API CLIENTS
│   │   ├── axios.ts        # Client-side axios instance
│   │   ├── server-axios.ts # Server-side axios instance (auto-attaches session token)
│   │   ├── server-fetch.ts # Native fetch wrappers for React Server Components
│   │   ├── env.ts          # Zod schema for process.env validation
│   │   ├── utils.ts        # Tailwind cn() merge function
│   │   └── rtc.ts          # WebRTC utilities for virtual_gubae and audio apps
│   │
│   ├── stores/             # 🐻 ZUSTAND STATE MANAGEMENT
│   │   ├── authStore.ts    # User session data, JWT
│   │   ├── gubaeStore.ts   # Live session state (mic/cam toggle, participant list)
│   │   ├── notificationStore.ts # Centralized toast/notification state
│   │   ├── audioStore.ts   # Global audio player state (from `audio` app)
│   │   └── syncStore.ts    # Offline/Online sync status
│   │
│   ├── data/               # 📊 STATIC DATA
│   │   ├── constants.ts    # Enums matching backend (e.g., USER_ROLES, COURSE_STATUS)
│   │   └── mock/           # Mock data for Storybook or testing
│   │
│   ├── hooks/              # 🪝 CUSTOM HOOKS
│   │   ├── useAuth.ts      # Wraps authStore
│   │   ├── useWebRTC.ts    # Hook for virtual_gubae
│   │   ├── useDebounce.ts
│   │   └── useMediaQuery.ts
│   │
│   ├── i18n/               # 🌍 INTERNATIONALIZATION
│   │   └── request.ts      # Next-intl configuration
│   │
│   ├── messages/           # 📝 TRANSLATIONS
│   │   ├── en.json         # English strings
│   │   └── am.json         # Amharic strings (for EOTC)
│   │
│   ├── fonts/              # 🔤 LOCAL FONTS (e.g., custom Amharic fonts)
│   ├── styles/             # 🎨 GLOBAL SCSS (if needed beyond Tailwind)
│   │
│   ├── global.ts           # Global types/extensions
│   ├── instrumentation.ts  # Next.js instrumentation (Sentry setup)
│   ├── instrumentation-client.ts
│   └── proxy.ts            # Local dev proxy config (if avoiding CORS)
│
├── .env.example
├── components.json         # Shadcn config
├── docker-compose.yml      # Local dev container orchestration
├── Dockerfile              # Production Node.js multi-stage build
├── eslint.config.mjs
├── next.config.ts
├── postcss.config.mjs
├── sentry.edge.config.ts   # Sentry Edge config
├── sentry.server.config.ts # Sentry Server config
├── tailwind.config.js
└── tsconfig.json

🗺️ Backend → Frontend Mapping

Backend App	Frontend Route	Components Directory
`accounts`	`(auth)/*`	`components/auth/`
`admissions`	`dashboard/admissions/*`	`components/forms/`
`courses`	`dashboard/courses/*`	`components/courses/`
`assessments`	`dashboard/courses/[id]/assessments`	`components/assessments/`
`assignments`	`dashboard/courses/[id]/assignments`	`components/assignments/`
`virtual_gubae`	`dashboard/gubae/*`	`components/gubae/`
`counseling`	`dashboard/counseling/*`	`components/counseling/`
`forums`	`dashboard/forums/*`	`components/forums/`
`liturgical_calendar`	`dashboard/calendar/*`	`components/calendar/`
`payments`	`dashboard/payments/*`	`components/payments/`
`certificates`	`dashboard/certificates/*`	`components/dashboard/`
`ai_assistant`	`dashboard/ai/*`	`components/ai/`
`cohorts`	`admin/cohorts/*`	—
`moderation`	`admin/moderation/*`	—
`sync`	`admin/sync-logs/*`	—

🚀 Getting Started

Prerequisites

Node.js ≥ 18
npm, yarn, or pnpm

Installation

# Clone the repository
git clone <repository-url>
cd lms-frontend

# Install dependencies
npm install

# Copy environment variables
cp .env.example .env.local

Development

npm run dev

Open http://localhost:3000 to view the app.

Build for Production

npm run build
npm start

Docker

docker-compose up --build

🧰 Tech Stack

Layer	Technology
Framework	Next.js (App Router)
Language	TypeScript
UI Components	Shadcn UI
Styling	Tailwind CSS
State Management	Zustand
Forms	React Hook Form + Zod
API Client	Axios
Real-time	WebRTC (Virtual Gubae)
i18n	next-intl (English + Amharic)
Monitoring	Sentry
CI/CD	GitHub Actions

📂 Key Directories Explained

`src/app/actions/`

Server Actions for mutations (form submissions, enrollments, payments). These call the Django REST API from the server side.

`src/lib/`

Shared utilities — configured Axios instances for both client and server, environment validation with Zod, and WebRTC helpers.

`src/stores/`

Zustand stores for client-side state that doesn't belong in the URL or server (e.g., auth tokens, mic/camera toggles, audio player state).

`src/types/`

TypeScript interfaces and types that mirror Django model serializers, ensuring type safety across the full stack.

`src/components/ui/`

Shadcn UI primitives — auto-generated via npx shadcn@latest add <component>. Do not manually edit these.

🌍 Internationalization

The app supports English and Amharic via next-intl. Translation files live in src/messages/.

📜 License

This project is proprietary to the Ethiopian Orthodox Tewahedo Church.

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
.agents		.agents
public		public
src		src
.gitignore		.gitignore
.npmrc		.npmrc
CLAUDE.md		CLAUDE.md
GLMDLE_Complete_Collection.json		GLMDLE_Complete_Collection.json
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

EOTC LMS — Next.js Frontend

📁 Project Structure

🗺️ Backend → Frontend Mapping

🚀 Getting Started

Prerequisites

Installation

Development

Build for Production

Docker

🧰 Tech Stack

📂 Key Directories Explained

`src/app/actions/`

`src/lib/`

`src/stores/`

`src/types/`

`src/components/ui/`

🌍 Internationalization

📜 License

About

Uh oh!

Releases

Packages

Uh oh!

Contributors

Uh oh!

Languages

Uh oh!

Folders and files

Latest commit

History

Repository files navigation

EOTC LMS — Next.js Frontend

📁 Project Structure

🗺️ Backend → Frontend Mapping

🚀 Getting Started

Prerequisites

Installation

Development

Build for Production

Docker

🧰 Tech Stack

📂 Key Directories Explained

src/app/actions/

src/lib/

src/stores/

src/types/

src/components/ui/

🌍 Internationalization

📜 License

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

`src/app/actions/`

`src/lib/`

`src/stores/`

`src/types/`

`src/components/ui/`

Packages