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

What I Built ## How to Run Locally ## Key components: ## Screenshots ## Demo Video ## API Documentation ## The AI Prompt I Used ## How I Refined the AI-Generated Code ## Before/After Snippet (Auth/Signup): ## My Experience with Xano ## Future Scope Xano AI-Powered Backend Challenge: Full-Stack Submission This is a submission for the Xano AI-Powered Backend Challenge: Full-Stack, AI-First Application. 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: [email protected] / Student@123, [email protected] / 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. 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. 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. 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 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. To run Simply Learn UI locally on your machine: 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. Check out the live application here: Simply Learn Live Demo To explore the app, use these test credentials: 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 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 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. 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: 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." 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." 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." 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." 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 AI generated code was a fast starter but required improvements and hardening: AI-Generated [input and validations, just a part]: This refinement came after hours of debugging, it somehow worked and made everything behind a middleware successfully. But yeah took some time figuring out 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: 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: 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: [email protected] Templates let you quickly answer FAQs or store snippets for re-use. Wowwwwww... Magnificent as always Awesome work,dude 🙌🏻, Excited to see what's next! Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse COMMAND_BLOCK: git clone https://github.com/ARYPROGRAMMER/Simply-Learn.git cd Simply-Learn Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: git clone https://github.com/ARYPROGRAMMER/Simply-Learn.git cd Simply-Learn COMMAND_BLOCK: git clone https://github.com/ARYPROGRAMMER/Simply-Learn.git cd Simply-Learn CODE_BLOCK: pnpm install Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: pnpm install CODE_BLOCK: pnpm install CODE_BLOCK: pnpm dev Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: cp .env.example .env.local Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: cp .env.example .env.local CODE_BLOCK: cp .env.example .env.local CODE_BLOCK: db.add users { data = { email: $input.email, password: $input.password } . . . } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: db.add users { data = { email: $input.email, password: $input.password } . . . } CODE_BLOCK: db.add users { data = { email: $input.email, password: $input.password } . . . } CODE_BLOCK: 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 } . . Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: 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 } . . CODE_BLOCK: 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 } . . - 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. - 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. - Clone the repository: - Install dependencies: - Start the development server: - Create .env.local with .env.example structure. - Open your browser and navigate to http://localhost:3000. - 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). - Student Account: [email protected] / Student@123 - Teacher Account: [email protected] / Teacher@123 - Landing Page: - Student Dashboard: - Teacher Dashboard: - Course Preview: - Lesson Page: - AI Chat Preview: - Xano DB Schema: - 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." - 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." - 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." - 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." - 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." - Validation: Explicit preconditions (required fields, email uniqueness, allowed roles). - Error Shapes: Consistent { error_type, message, field } objects that frontend can easily parse. - Security: Hashed passwords, JWT expirations (7 days by default), auth = "users" guards on private endpoints. - External API Robustness: Methodical parsing of MUX responses, retries where appropriate, secure storage for MUX keys. - Query Efficiency: Include necessary nested data (modules, lesson counts) server-side to reduce round trips. - 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. - 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. - 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. - Joined Sep 7, 2025 - Joined Sep 7, 2025 - Joined Dec 13, 2025 - Joined Dec 13, 2025