Simply Learn - An AI-First LMS with Next.js 16 & Xano

Source: Dev.to

TL;DR

Simply Learn is a full‑stack Learning Management System built with Next.js 16 on the frontend and Xano on the backend. It streams lessons via MUX and offers an in‑app AI tutor powered by Google Gemini 2.5 Flash for premium users. The result: fast iteration, secure video delivery, and an AI‑assisted learning experience with minimal ops overhead.

Live demo:
Test users: student@gmail.com / Student@123, teacher@gmail.com / Teacher@123.

Demo video:
GitHub repo:

Thanks to Xano for making this project possible with their powerful no‑code backend platform.

What I Built

Simply Learn is an AI‑powered LMS that bridges the gap between educators and learners. It lets teachers create, manage, and distribute video‑based courses while giving students an engaging, personalized experience enhanced by AI.

Key Features

• Course Creation & Management – Teachers build structured courses with modules and lessons, upload videos via MUX, and set tiered pricing (free, pro, ultra).
• Student Learning Experience – Browse courses, enroll, watch lessons with secure playback, track progress, and complete lessons.
• AI‑Powered Tutoring – Ultra‑tier users access an in‑app AI tutor (Google Gemini 2.5 Flash) for real‑time Q&A based on course content.
• Authentication & Roles – Secure JWT‑based auth with distinct roles for students and teachers.
• Progress Tracking – Mark lessons complete and view detailed dashboards for both users and instructors.

Problem Solved

Traditional LMS platforms are often complex to set up and lack modern AI integrations. Simply Learn simplifies course creation with a no‑code backend (Xano) while integrating cutting‑edge AI for enhanced learning, all without managing servers or video infrastructure.

Core User Flows

• Teacher: Create course → Add modules → Upload lesson (video) → Publish.
• Student: Discover course → Enroll (free/pro/ultra) → Watch lesson (secure playback) → Mark complete → Ask AI tutor follow‑ups.

Architecture Overview

A simple, scalable architecture that cleanly separates the Next.js frontend, Xano backend, MUX video service, and Gemini AI tutor.

Content Structure

Teachers create content, students consume it (with AI for premium tiers), and teachers can also view the same content.

How to Run Locally

Clone the repository

git clone https://github.com/ARYPROGRAMMER/Simply-Learn.git
cd Simply-Learn

Install dependencies

pnpm install

Start the development server

pnpm dev

Set up environment variables

cp .env.example .env.local
# Edit .env.local with your own values (e.g., Xano API URL, MUX keys, Gemini API key)

Open your browser and navigate to http://localhost:3000.

Note: The backend is powered by Xano, so no additional database or API setup is required. Use the test credentials above to explore the app.

Key Components

• Frontend: Next.js 16 – modern routing, caching, and build improvements; UI built with shadcn/ui.
• Backend: Xano + XanoScript – single source of truth for API logic, auth, and DB transformations.
• Video: MUX – upload, processing, and secure playback using signed URLs/JWT.
• AI: Google Gemini 2.5 Flash – chat‑style tutoring, fast and cost‑efficient.

Demo

Live application:

Test credentials

• Student: student@gmail.com / Student@123
• Teacher: teacher@gmail.com / Teacher@123

Screenshots

Landing Page

Student Dashboard

Teacher Dashboard

Course Preview

Lesson Page