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

This is a submission for the Xano AI-Powered Backend Challenge: Full-Stack, AI-First Application.

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. Integrating all these tools seamlessly was a challenge, but it paid off somehow excitingly.

Live demo: https://simply-learn-xano.vercel.app/
— Test users: student@gmail.com / Student@123, teacher@gmail.com / Teacher@123.
Demo video: https://youtu.be/r6rAGLxCMT0
GitHub repo: https://github.com/ARYPROGRAMMER/Simply-Learn

Thanks to Xano for making this project possible with their powerful no-code backend platform. The Free Starter Plan Promo was what made this possible [Unlimited API Requests is what I needed]

I created this project over a week, with the final touches completed on this Saturday morning.

What I Built

Simply Learn is a comprehensive, AI-powered Learning Management System (LMS) designed to bridge the gap between educators and learners in the digital age. Built as a full-stack application, it empowers teachers to create, manage, and distribute high-quality video-based courses while providing students with an engaging, personalized learning experience enhanced by AI.

Key Features:

• Course Creation & Management: Teachers can build structured courses with modules and lessons, upload videos via MUX for secure streaming, 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 get access to an in-app AI tutor using Google Gemini 2.5 Flash, allowing 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 approach via Xano, while integrating cutting-edge AI for enhanced learning, all without the overhead of 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.

This project demonstrates how AI can accelerate backend development while human refinement ensures scalability, security, and a seamless user experience.

Architecture Overview:

Its a rather simple and easy to understand architecture and I like how this can scale largely

Content Structure:

This diagram shows the content hierarchy and Flow. Basically Teachers create content, students consume it (with AI for premium), and teachers can also view the same content.

How to Run Locally

To run Simply Learn UI locally on your machine:

1. Clone the repository:

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

1. Install dependencies:

   pnpm install

1. Start the development server:

   pnpm dev

1. Create .env.local with .env.example structure.

   cp .env.example .env.local

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

Note: The backend is powered by Xano, so no additional setup is needed for the database or APIs. Use the test credentials provided in the Demo section to explore the app. You can create the backend using xanoscript files and database schema using the image attached. You may directly use my backend url as well in limits obviously.

Key components:

• Frontend: Next.js 16 — modern routing, caching, and build improvements for faster UX. Enhanced with v0 for rapid UI prototyping, leveraging its seamless integrations with Vercel and shadcn/ui.
• Backend: Xano + XanoScript as the single source of truth for API logic, auth, and DB transformations (written & iterated via VS Code XanoScript extension).
• Video: MUX for upload, processing, and secure playback using signing keys / JWT-based signed URLs.
• AI: Google Gemini 2.5 Flash for chat-style tutoring (fast, cost-efficient model tier suitable for live chat and summarization).

Demo

Check out the live application here: Simply Learn Live Demo

To explore the app, use these test credentials:

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

Screenshots

• Landing Page:
  

• Student Dashboard:
  

• Teacher Dashboard:
  

• Course Preview:
  

• Lesson Page:
  

• AI Chat Preview:
  

• APIs:
  

• Xano DB Schema:
  

These screenshots were taken after countless tweaks to make the UI perfect, I have updated some things here and there after the screenshots so be sure to see the updated UI Here

Demo Video

Watch the full walkthrough: Demo Video on YouTube

In the Demo I showcase everything and also do a ground check if all this is really worth it? Be sure to watch it till the end

API Documentation

Explore the backend APIs via Swagger: API Docs

AutoGenerated via Xano Collection of API, saves a lot of time to debug and eradicates the need to a client like Postman, Insomnia etc.

The AI Prompt I Used

I leveraged Xano's built-in AI assistant within the VS Code extension to generate the initial XanoScript for each endpoint. The prompts were tailored to the specific functionality needed, ensuring they aligned with the app's requirements. Here are some of the prompts used:

1. Auth Signup: "Create a POST endpoint for user signup at /auth/signup. It should accept email, password, first_name, last_name, and optional role. Validate that the email is unique, set default role to 'student', tier to 'free', and return a JWT token upon successful creation."

2. Auth Login: "Build a POST endpoint for user login at /auth/login. Accept email and password, verify credentials, and return a JWT token if valid."

3. Courses List: "Generate a GET endpoint at /courses to list all courses with their modules and lessons. Include fields like title, slug, description, image_url, tier, and counts for modules/lessons."

4. Lesson Completion: "Create a POST endpoint at /progress/complete-lesson for authenticated users. Accept lesson_id, mark it as completed in user_progress table, and return success status."

5. MUX Signed Tokens: "Develop a POST endpoint at /mux/signed-tokens for generating signed playback tokens. Use MUX_TOKEN_ID and MUX_TOKEN_SECRET to create tokens for video playback."

These prompts were iterative; I refined them based on initial outputs to ensure proper error handling and data relationships. Using these prompts felt like magic at first, but refining them was key to getting solid endpoints.

The Issue was clear, formats of input, conditional logics, variables storing, function stack and response structure all was required to be taken care of. I handled most of the structuring and logic breakdown into simple components while I let the AI Assistant do the heavy lifting to generating a pretty good template for CRUD operations and External Connectors

How I Refined the AI-Generated Code

AI generated code was a fast starter but required improvements and hardening:

1. Validation: Explicit preconditions (required fields, email uniqueness, allowed roles).
2. Error Shapes: Consistent { error_type, message, field } objects that frontend can easily parse.
3. Security: Hashed passwords, JWT expirations (7 days by default), auth = "users" guards on private endpoints.
4. External API Robustness: Methodical parsing of MUX responses, retries where appropriate, secure storage for MUX keys.
5. Query Efficiency: Include necessary nested data (modules, lesson counts) server-side to reduce round trips.

Before/After Snippet (Auth/Signup):

AI-Generated [input and validations, just a part]:

db.add users {
  data = { email: $input.email, password: $input.password }
.
.
.
}

Refined:

db.get users { field_name = "email", field_value = $input.email } as $existingUser
precondition ($existingUser == null) {
  error_type = "inputerror"
  error = "An account with this email already exists."
}
db.add users {
  data = {
    created_at: "now"
    email: $input.email
    password: hash_password($input.password)
    first_name: $input.first_name
    last_name: $input.last_name
    tier: "free"
    role: $input.role ?? "student"
  }
} as $user
security.create_auth_token { table = "users", id = $user.id, expiration = 604800 } as $authToken
return { user: $user, token: $authToken.token }
.
.

This refinement came after hours of debugging, it somehow worked and made everything behind a middleware successfully. But yeah took some time figuring out

My Experience with Xano

Xano was a game-changer for this project. As someone coming from traditional backend development, I was initially skeptical about no-code tools, but Xano's AI-assisted scripting and visual builder made building a full backend incredibly fast—probably 100x faster than coding it from scratch in Node.js or goLang[Gin].

What I Found Most Helpful:

• Rapid Prototyping: The AI prompts generated functional scripts quickly, allowing me to focus on frontend and integrations.
• Built-in Features: Authentication, database, and API generation out-of-the-box saved weeks of work.
• Scalability: No DevOps worries; it handles production infrastructure seamlessly.
• VS Code Extension: Writing XanoScript in my editor felt natural and integrated well with my workflow.

Challenges:

• AutoFormatting: The Xanoscript in Xano API Section has some autoformatter which auto formats object accesses like user.role == $admin to user["role="].admin - This is the exact formatting it kept doing even when I kept changing and saving and publishing.
• Variable Declaring Syntax: Covered Below
• Learning Curve: XanoScript syntax took some getting used to, especially for complex logic. The documentation is good but could use more advanced examples. After trying so hard to wrap my head around it, it became an easy task, what a relief!
• Debugging: Error messages in the visual builder aren't always clear, so I had to rely on trial-and-error for refinements.
• External APIs: Integrating MUX required careful handling of API keys and responses, which felt a bit clunky at first.

Future Scope

I always look towards the future and positive side, there are several exciting features I plan to add to make Simply Learn even more robust:

• Likes/Dislikes: Allow users to like or dislike courses, with totals displayed on course cards and pages to help surface popular content.
• Views Tracking: Implement view counts for lessons and courses to highlight trending material.
• Payments Integration: Add Stripe for subscriptions and one-time purchases, including webhook handling for seamless fulfillment.
• OAuth Providers: Integrate Google and GitHub sign-in for easier user onboarding.
• Notes Editor: Introduce a Monaco-based editor for per-lesson notes, persisted per-user, to enhance the learning experience.

and many more.....
These enhancements will further elevate the platform's capabilities, building on the solid foundation laid with Xano and the other tools.

Overall, Xano empowered me to build a professional-grade backend without deep server knowledge. It's perfect for full-stack developers wanting to ship faster, and I'd definitely use it again for similar projects.

Contact me: arya.2023ug1104@iiitranchi.ac.in