{"@attributes":{"version":"2.0"},"channel":{"title":"DEV Community: Arya Pratap Singh","description":"The latest articles on DEV Community by Arya Pratap Singh (@aryprogrammer).","link":"https:\/\/dev.to\/aryprogrammer","image":{"url":"https:\/\/media2.dev.to\/dynamic\/image\/width=90,height=90,fit=cover,gravity=auto,format=auto\/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1185069%2Fd34ac50c-9594-4119-8c2c-1ed155cca49d.jpeg","title":"DEV Community: Arya Pratap Singh","link":"https:\/\/dev.to\/aryprogrammer"},"language":"en","item":[{"title":"Simply Learn - An AI-First LMS with Next.js 16 & Xano","pubDate":"Sat, 13 Dec 2025 06:40:19 +0000","link":"https:\/\/dev.to\/aryprogrammer\/simply-learn-an-ai-first-lms-with-nextjs-16-xano-2i9h","guid":"https:\/\/dev.to\/aryprogrammer\/simply-learn-an-ai-first-lms-with-nextjs-16-xano-2i9h","description":"<p><em>This is a submission for the <a href=\"https:\/\/dev.to\/challenges\/xano-2025-11-20\">Xano AI-Powered Backend Challenge<\/a>: Full-Stack, AI-First Application.<\/em><\/p>\n\n<p><strong>For Detailed Demo and my thoughts while Building:<\/strong><br>\n\n\n  <iframe src=\"https:\/\/www.youtube.com\/embed\/r6rAGLxCMT0\">\n  <\/iframe>\n\n\n<\/p>\n\n\n\n\n<h2>\n  \n  \n  TL;DR\n<\/h2>\n\n<p>Simply Learn is a full-stack Learning Management System built with <strong>Next.js 16<\/strong> on the frontend and <strong>Xano<\/strong> on the backend. It streams lessons via <strong>MUX<\/strong> and offers an in-app AI tutor powered by <strong>Google Gemini 2.5 Flash<\/strong> 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.<\/p>\n\n<p><strong>Live demo:<\/strong> <a href=\"https:\/\/simply-learn-xano.vercel.app\/\" rel=\"noopener noreferrer\">Deployed on Vercel<\/a> <br>\n\u2014 Test users: <code>student@gmail.com \/ Student@123<\/code>, <code>teacher@gmail.com \/ Teacher@123<\/code>.<br>\n<strong>Xano APIs Swagger Docs:<\/strong> <a href=\"https:\/\/xr83-nvl3-j8b3.n7e.xano.io\/api:CPmqNnhk\" rel=\"noopener noreferrer\">API Docs<\/a><br>\n<strong>Demo video:<\/strong> <a href=\"https:\/\/youtu.be\/r6rAGLxCMT0\" rel=\"noopener noreferrer\">Demo Video<\/a><br>\n<strong>GitHub repo:<\/strong> <a href=\"https:\/\/github.com\/ARYPROGRAMMER\/Simply-Learn\" rel=\"noopener noreferrer\">GitHub Repo<\/a><\/p>\n\n<p>Thanks to <a href=\"https:\/\/www.xano.com\/\" rel=\"noopener noreferrer\">Xano<\/a> 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]<\/p>\n\n<p>I created this project over a week, with the final touches completed on this Saturday morning. The Purpose is to explain how useful and good products can be created easily and can be scaled to larger extents with Xano. As a note, I believe \"Simply Learn\" using Xano is already ready to serve a million users. During development <a href=\"https:\/\/docs.xano.com\/building\/logic\/apis\" rel=\"noopener noreferrer\">Xano Docs<\/a> provided me the way and to simply put, I enjoyed the experience. They also have video tutorials do check it out <a href=\"https:\/\/www.youtube.com\/@nocodebackend\" rel=\"noopener noreferrer\">here<\/a><\/p>\n\n\n<h2>\n  \n  \n  What I Built\n<\/h2>\n\n<p>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.<\/p>\n\n<p><strong>Key Features:<\/strong><\/p>\n\n<ul>\n<li>\n<strong>Course Creation &amp; Management:<\/strong> Teachers can build structured courses with modules and lessons, upload videos via MUX for secure streaming, and set tiered pricing (free, pro, ultra).<\/li>\n<li>\n<strong>Student Learning Experience:<\/strong> Browse courses, enroll, watch lessons with secure playback, track progress, and complete lessons.<\/li>\n<li>\n<strong>AI-Powered Tutoring:<\/strong> Ultra-tier users get access to an in-app AI tutor using Google Gemini 2.5 Flash, allowing real-time Q&amp;A based on course content.<\/li>\n<li>\n<strong>Authentication &amp; Roles:<\/strong> Secure JWT-based auth with distinct roles for students and teachers.<\/li>\n<li>\n<strong>Progress Tracking:<\/strong> Mark lessons complete and view detailed dashboards for both users and instructors.<\/li>\n<\/ul>\n\n<p><strong>Problem Solved:<\/strong> 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.<\/p>\n\n<p>Core user flows:<\/p>\n\n<ul>\n<li>\n<strong>Teacher:<\/strong> Create course \u2192 Add modules \u2192 Upload lesson (video) \u2192 Publish.<\/li>\n<li>\n<strong>Student:<\/strong> Discover course \u2192 Enroll (free\/pro\/ultra) \u2192 Watch lesson (secure playback) \u2192 Mark complete \u2192 Ask AI tutor follow-ups.<\/li>\n<\/ul>\n\n<p>This project demonstrates how AI can accelerate backend development while human refinement ensures scalability, security, and a seamless user experience.<\/p>\n\n<p><strong>Architecture Overview:<\/strong><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuuudayye7e8smjowsxc8.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuuudayye7e8smjowsxc8.png\" alt=\"Architecture\"><\/a><\/p>\n\n<p>Its a rather simple and easy to understand architecture and I like how this can scale largely<\/p>\n\n<p><strong>Content Structure:<\/strong><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxy9hmqgzf9s0rijcnz1o.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxy9hmqgzf9s0rijcnz1o.png\" alt=\"Content Flow\"><\/a><\/p>\n\n<p>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.<\/p>\n\n\n<h2>\n  \n  \n  How to Run Locally\n<\/h2>\n\n<p>To run Simply Learn <strong>UI<\/strong> locally on your machine:<\/p>\n\n<ol>\n<li>\n<strong>Clone the repository:<\/strong>\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>   git clone https:\/\/github.com\/ARYPROGRAMMER\/Simply-Learn.git\n   <span class=\"nb\">cd <\/span>Simply-Learn\n<\/code><\/pre>\n\n<\/div>\n\n\n<ol>\n<li>\n<strong>Install dependencies:<\/strong>\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>   pnpm <span class=\"nb\">install<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n<ol>\n<li>\n<strong>Start the development server:<\/strong>\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>   pnpm dev\n<\/code><\/pre>\n\n<\/div>\n\n\n<ol>\n<li>Create .env.local with .env.example structure.\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>   <span class=\"nb\">cp<\/span> .env.example .env.local\n<\/code><\/pre>\n\n<\/div>\n\n\n<ol>\n<li>\n<strong>Open your browser<\/strong> and navigate to <code>http:\/\/localhost:3000<\/code>.<\/li>\n<\/ol>\n\n<p><strong>Note:<\/strong> 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.<\/p>\n\n\n<h2>\n  \n  \n  Key components:\n<\/h2>\n\n<ul>\n<li>\n<strong>Frontend:<\/strong> Next.js 16 \u2014 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.<\/li>\n<li>\n<strong>Backend:<\/strong> Xano + XanoScript as the single source of truth for API logic, auth, and DB transformations (written &amp; iterated via VS Code XanoScript extension).<\/li>\n<li>\n<strong>Video:<\/strong> MUX for upload, processing, and secure playback using signing keys \/ JWT-based signed URLs.<\/li>\n<li>\n<strong>AI:<\/strong> Google Gemini 2.5 Flash for chat-style tutoring (fast, cost-efficient model tier suitable for live chat and summarization).<\/li>\n<\/ul>\n\n\n<h2>\n  \n  \n  Demo\n<\/h2>\n\n<p><strong>Check out the live application here:<\/strong> <a href=\"https:\/\/simply-learn-xano.vercel.app\/\" rel=\"noopener noreferrer\">Simply Learn Live Demo<\/a><\/p>\n\n<p>To explore the app, use these test credentials:<\/p>\n\n<ul>\n<li>\n<strong>Student Account:<\/strong> <code>student@gmail.com<\/code> \/ <code>Student@123<\/code>\n<\/li>\n<li>\n<strong>Teacher Account:<\/strong> <code>teacher@gmail.com<\/code> \/ <code>Teacher@123<\/code>\n<\/li>\n<\/ul>\n<h3>\n  \n  \n  Screenshots\n<\/h3>\n\n<ul>\n<li><p>Landing Page:<br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc97p4y30f5i8iiieywbg.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc97p4y30f5i8iiieywbg.png\" alt=\"Landing\"><\/a><\/p><\/li>\n<li><p>Student Dashboard: <br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fex5va1bu05a1v0zumkqh.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fex5va1bu05a1v0zumkqh.png\" alt=\"Student\"><\/a><\/p><\/li>\n<li><p>Teacher Dashboard: <br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqslntw8wlx0htta26g0t.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqslntw8wlx0htta26g0t.png\" alt=\"Teacher\"><\/a><\/p><\/li>\n<li><p>Course Preview: <br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwxvkgk3dpcn2fhy6ifu6.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwxvkgk3dpcn2fhy6ifu6.png\" alt=\"Course\"><\/a><\/p><\/li>\n<li><p>Lesson Page: <br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbs1s729tfkarr5w57k50.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbs1s729tfkarr5w57k50.png\" alt=\"Lesson\"><\/a><\/p><\/li>\n<li><p>AI Chat Preview: <br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg5n57q6yznksbm1yw3n4.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fg5n57q6yznksbm1yw3n4.png\" alt=\"AI Chat\"><\/a><\/p><\/li>\n<li><p>APIs: <br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw8k25oglw1m6p89nr584.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw8k25oglw1m6p89nr584.png\" alt=\"Xano APIs\"><\/a><\/p><\/li>\n<li><p>Xano DB Schema: <br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjzk90muts2j2dms47tlz.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fjzk90muts2j2dms47tlz.png\" alt=\"Xano DB Schema\"><\/a><\/p><\/li>\n<\/ul>\n\n<p>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 <a href=\"https:\/\/simply-learn-xano.vercel.app\/\" rel=\"noopener noreferrer\">Here<\/a> <\/p>\n<h3>\n  \n  \n  Demo Video\n<\/h3>\n\n<p><strong>Watch the full walkthrough:<\/strong> <a href=\"https:\/\/youtu.be\/r6rAGLxCMT0\" rel=\"noopener noreferrer\">Demo Video on YouTube<\/a><\/p>\n\n<p>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<\/p>\n<h3>\n  \n  \n  API Documentation\n<\/h3>\n\n<p><strong>Explore the backend APIs via Swagger:<\/strong> <a href=\"https:\/\/xr83-nvl3-j8b3.n7e.xano.io\/api:CPmqNnhk\" rel=\"noopener noreferrer\">API Docs<\/a><\/p>\n\n<p>AutoGenerated via Xano Collection of API, saves a lot of time to debug and eradicates the need to a client like Postman, Insomnia etc.<\/p>\n\n\n<h2>\n  \n  \n  The AI Prompt I Used\n<\/h2>\n\n<p>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:<\/p>\n\n<ol>\n<li><p><strong>Auth Signup:<\/strong> \"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.\"<\/p><\/li>\n<li><p><strong>Auth Login:<\/strong> \"Build a POST endpoint for user login at \/auth\/login. Accept email and password, verify credentials, and return a JWT token if valid.\"<\/p><\/li>\n<li><p><strong>Courses List:<\/strong> \"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.\"<\/p><\/li>\n<li><p><strong>Lesson Completion:<\/strong> \"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.\"<\/p><\/li>\n<li><p><strong>MUX Signed Tokens:<\/strong> \"Develop a POST endpoint at \/mux\/sign_playback for generating signed playback tokens. Use MUX_TOKEN_ID and MUX_TOKEN_SECRET to create tokens for video playback.\"<\/p><\/li>\n<\/ol>\n\n<p>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. <\/p>\n\n<p>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<\/p>\n\n\n<h2>\n  \n  \n  How I Refined the AI-Generated Code\n<\/h2>\n\n<p>AI generated code was a fast starter but required improvements and hardening:<\/p>\n\n<ol>\n<li>\n<strong>Validation:<\/strong> Explicit preconditions (required fields, email uniqueness, allowed roles).<\/li>\n<li>\n<strong>Error Shapes:<\/strong> Consistent <code>{ error_type, message, field }<\/code> objects that frontend can easily parse.<\/li>\n<li>\n<strong>Security:<\/strong> Hashed passwords, JWT expirations (7 days by default), <code>auth = \"users\"<\/code> guards on private endpoints.<\/li>\n<li>\n<strong>External API Robustness:<\/strong> Methodical parsing of MUX responses, retries where appropriate, secure storage for MUX keys.<\/li>\n<li>\n<strong>Query Efficiency:<\/strong> Include necessary nested data (modules, lesson counts) server-side to reduce round trips.<\/li>\n<\/ol>\n<h3>\n  \n  \n  Before\/After Snippet (Auth\/Signup):\n<\/h3>\n\n<p><strong>AI-Generated [input and validations, just a part]:<\/strong><br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>db.add users {\n  data = { email: $input.email, password: $input.password }\n.\n.\n.\n}\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p><strong>Refined:<\/strong><br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>db.get users { field_name = \"email\", field_value = $input.email } as $existingUser\nprecondition ($existingUser == null) {\n  error_type = \"inputerror\"\n  error = \"An account with this email already exists.\"\n}\ndb.add users {\n  data = {\n    created_at: \"now\"\n    email: $input.email\n    password: hash_password($input.password)\n    first_name: $input.first_name\n    last_name: $input.last_name\n    tier: \"free\"\n    role: $input.role ?? \"student\"\n  }\n} as $user\nsecurity.create_auth_token { table = \"users\", id = $user.id, expiration = 604800 } as $authToken\nreturn { user: $user, token: $authToken.token }\n.\n.\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>This refinement came after hours of debugging, it somehow worked and made everything behind a middleware successfully. But yeah took some time figuring out<\/p>\n\n\n\n\n<h2>\n  \n  \n  My Experience with Xano\n<\/h2>\n\n<p>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\u2014probably 100x faster than coding it from scratch in Node.js or goLang[Gin].<\/p>\n\n<p><strong>What I Found Most Helpful:<\/strong><\/p>\n\n<ul>\n<li>\n<strong>Rapid Prototyping:<\/strong> The AI prompts generated functional scripts quickly, allowing me to focus on frontend and integrations.<\/li>\n<li>\n<strong>Built-in Features:<\/strong> Authentication, database, and API generation out-of-the-box saved weeks of work.<\/li>\n<li>\n<strong>Scalability:<\/strong> No DevOps worries; it handles production infrastructure seamlessly.<\/li>\n<li>\n<strong>VS Code Extension:<\/strong> Writing XanoScript in my editor felt natural and integrated well with my workflow.<\/li>\n<\/ul>\n\n<p><strong>Challenges:<\/strong><\/p>\n\n<ul>\n<li>\n<strong>AutoFormatting:<\/strong> The Xanoscript in Xano API Section has some autoformatter which auto formats object accesses like <code>user.role == $admin<\/code> to <code>user[\"role=\"].admin<\/code> - This is the exact formatting it kept doing even when I kept changing and saving and publishing.<\/li>\n<li>\n<strong>Variable Declaring Syntax<\/strong>: Covered Below<\/li>\n<li>\n<strong>Learning Curve:<\/strong> 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!<\/li>\n<li>\n<strong>Debugging:<\/strong> Error messages in the visual builder aren't always clear, so I had to rely on trial-and-error for refinements.<\/li>\n<li>\n<strong>External APIs:<\/strong> Integrating MUX required careful handling of API keys and responses, which felt a bit clunky at first.<\/li>\n<\/ul>\n\n<p>Moreover If there's a way to create staging, production, development environment and seamlessly migrate and switch between them - then it would have saved me hours of debugging. I think there's the manual way of doing it but would've preferred if such PROJECT-&gt;ENVIRONMENTS thing existed.<\/p>\n\n<h2>\n  \n  \n  Future Scope\n<\/h2>\n\n<p>I always look towards the future and positive side, there are several exciting features I plan to add to make <strong>Simply Learn<\/strong> even more robust:<\/p>\n\n<ul>\n<li>\n<strong>Likes\/Dislikes:<\/strong> Allow users to like or dislike courses, with totals displayed on course cards and pages to help surface popular content.<\/li>\n<li>\n<strong>Views Tracking:<\/strong> Implement view counts for lessons and courses to highlight trending material.<\/li>\n<li>\n<strong>Payments Integration:<\/strong> Add Stripe for subscriptions and one-time purchases, including webhook handling for seamless fulfillment.<\/li>\n<li>\n<strong>OAuth Providers:<\/strong> Integrate Google and GitHub sign-in for easier user onboarding.<\/li>\n<li>\n<strong>Notes Editor:<\/strong> Introduce a Monaco-based editor for per-lesson notes, persisted per-user, to enhance the learning experience.<\/li>\n<\/ul>\n\n<p>and many more.....<br>\nThese enhancements will further elevate the platform's capabilities, building on the solid foundation laid with Xano and the other tools.<\/p>\n\n<p>Overall, <strong>Xano<\/strong> 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.<\/p>\n\n<p>Contact me: <a href=\"mailto:arya.2023ug1104@iiitranchi.ac.in\">arya.2023ug1104@iiitranchi.ac.in<\/a><\/p>\n\n","category":["devchallenge","xanochallenge","ai","backend"]},{"title":"But what is \u201ccontextual search\u201d \u2014 case study of KENDO-RAG and how it beats Google for private data","pubDate":"Sun, 28 Sep 2025 11:04:43 +0000","link":"https:\/\/dev.to\/aryprogrammer\/but-what-is-contextual-search-case-study-of-kendo-rag-and-how-it-beats-google-for-private-data-2f4a","guid":"https:\/\/dev.to\/aryprogrammer\/but-what-is-contextual-search-case-study-of-kendo-rag-and-how-it-beats-google-for-private-data-2f4a","description":"<p>Picture this (even tough you don't want to, but pls lets focus): You're frantically digging through your notes at 2 AM before a big presentation, typing variations of \"quarterly revenue projections methodology\" into your company's search bar. Nothing. You try \"Q4 forecast approach.\" Still nothing. Meanwhile, the document you need literally contains the phrase \"how we calculate expected earnings for the final quarter.\"<\/p>\n\n<p>Welcome to the keyword search hellscape we've all accepted as normal. For most it is normal.<\/p>\n\n<p>Here's the uncomfortable truth: <strong>Most of the world's knowledge isn't on the public web\u2014it's hiding behind login walls<\/strong>, scattered across internal wikis, personal notes, and company docs that Google can't even see\/index, let alone search intelligently. We're living in an age where I can ask ChatGPT to explain quantum mechanics in the style of a pirate, but I can't find last month's meeting notes without remembering the exact phrase someone used.<\/p>\n\n<p>Something's fundamentally broken here.<\/p>\n\n<h2>\n  \n  \n  The \"lost knowledge\" problem (and why it's getting worse)\n<\/h2>\n\n<p>Let's do some math. The average knowledge worker deals with:<\/p>\n\n<ul>\n<li>Roughly 2,500+ documents per year across different platforms<\/li>\n<li>An average of 9+ different apps for work (thanks, SaaS sprawl)<\/li>\n<li>Search success rates that hover around 30% for internal systems<\/li>\n<\/ul>\n\n<p>When you compare this to Google's ~85% success rate for web searches, the gap becomes painfully obvious. <strong>We've accepted that finding information in our own systems should be harder than finding information on the entire internet.<\/strong> That's... weird?<\/p>\n\n<p>The real cost isn't just time\u2014it's the compound effect of lost institutional knowledge. Every failed search is a small fracture in your team's collective intelligence.<\/p>\n\n<h2>\n  \n  \n  How contextual search actually works (without the marketing fluff)\n<\/h2>\n\n<p>Traditional search thinks like this: \"Find documents containing these exact words\"<br>\nContextual search thinks like this: \"Find documents that mean what I'm asking about\"<\/p>\n\n<p>The magic happens through <strong>vector embeddings<\/strong>\u2014mathematical representations that capture semantic meaning. Think of them as coordinates in a high-dimensional space where similar concepts cluster together, even if they use completely different words.<\/p>\n\n<p>Here's the process that makes it work:<\/p>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl9ilzgt8li1yt2rebkb8.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fl9ilzgt8li1yt2rebkb8.png\" alt=\"RAG Pipeline Diagram\" width=\"800\" height=\"1414\"><\/a><\/p>\n<h3>\n  \n  \n  The chunking strategy that actually matters\n<\/h3>\n\n<p>Here's where most implementations fail: the chunking strategy. You can't just throw entire documents at an embedding model\u2014they have token limits and context windows to consider.<\/p>\n\n<p><strong>Too small chunks (&lt; 150 tokens)<\/strong>: You lose context. A chunk might reference \"the admin password\" without mentioning it's specifically for the <em>testing<\/em> environment.<\/p>\n\n<p><strong>Too large chunks (&gt; 800 tokens)<\/strong>: Everything becomes relevant to everything. Your search for \"API rate limits\" returns chunks about database performance because they happened to be in the same document section.<\/p>\n\n<p><strong>The sweet spot<\/strong>: Progress RAG handles this automatically, optimizing chunk sizes between 300-600 tokens with intelligent overlap to preserve context while maintaining search precision.<\/p>\n<h2>\n  \n  \n  Real things from a working implementation\n<\/h2>\n\n<p>I recently built EduBox, a contextual search system for students to query their lecture notes and academic materials using Progress\/Kendo RAG. <\/p>\n\n<p>The technical implementation used:<\/p>\n\n<ul>\n<li>\n<strong>Frontend<\/strong>: Next.js + TypeScript with real-time sync via Convex<\/li>\n<li>\n<strong>RAG System<\/strong>: Progress Agentic RAG for document processing, knowledge base creation, and semantic search<\/li>\n<li>\n<strong>LLM Integration<\/strong>: Multi-agent orchestration with tool calling via CopilotKit<\/li>\n<li>\n<strong>File Processing<\/strong>: Automatic indexing of PDFs, docs, images, and even chat logs<\/li>\n<\/ul>\n\n<p>Yes, it's slower than keyword search. Vector similarity calculations aren't instantaneous. But when the alternative is spending 15 minutes digging through folders only to come up empty-handed, 1.4 seconds feels pretty snappy.<\/p>\n\n<p>The qualitative change was even more significant: Students stopped asking \"Where did I put that thing about eigenvalues?\" and started asking \"What did the professor explain about eigenvalues in relation to machine learning applications?\"<\/p>\n<h2>\n  \n  \n  The developer's reality: Progress RAG makes it straightforward\n<\/h2>\n\n<p>Building contextual search used to be complex\u2014vector databases, embedding models, chunking strategies. Progress RAG abstracts away the complexity while keeping the power:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Progress RAG implementation in EduBox<\/span>\n<span class=\"kd\">class<\/span> <span class=\"nc\">NucliaRAGService<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nf\">constructor<\/span><span class=\"p\">(<\/span><span class=\"nx\">apiKey<\/span><span class=\"p\">,<\/span> <span class=\"nx\">syncUrl<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">apiKey<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">apiKey<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">syncUrl<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">syncUrl<\/span><span class=\"p\">;<\/span>\n    <span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">defaultKB<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NUCLIA_DEFAULT_KB<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ Create or get user's knowledge base<\/span>\n  <span class=\"k\">async<\/span> <span class=\"nf\">createKnowledgeBase<\/span><span class=\"p\">(<\/span><span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userData<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">syncUrl<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/api\/sync`<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">method<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">POST<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">headers<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"dl\">'<\/span><span class=\"s1\">Content-Type<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">application\/json<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"dl\">'<\/span><span class=\"s1\">Authorization<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`Bearer <\/span><span class=\"p\">${<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">apiKey<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span>\n      <span class=\"p\">},<\/span>\n      <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">({<\/span>\n        <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">userContext<\/span><span class=\"p\">:<\/span> <span class=\"nx\">userData<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">action<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">create_kb<\/span><span class=\"dl\">'<\/span>\n      <span class=\"p\">})<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ Upload and process documents<\/span>\n  <span class=\"k\">async<\/span> <span class=\"nf\">uploadDocument<\/span><span class=\"p\">(<\/span><span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">file<\/span><span class=\"p\">,<\/span> <span class=\"nx\">metadata<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">formData<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">FormData<\/span><span class=\"p\">();<\/span>\n    <span class=\"nx\">formData<\/span><span class=\"p\">.<\/span><span class=\"nf\">append<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">file<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">file<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">formData<\/span><span class=\"p\">.<\/span><span class=\"nf\">append<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">userId<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userId<\/span><span class=\"p\">);<\/span>\n    <span class=\"nx\">formData<\/span><span class=\"p\">.<\/span><span class=\"nf\">append<\/span><span class=\"p\">(<\/span><span class=\"dl\">'<\/span><span class=\"s1\">metadata<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">(<\/span><span class=\"nx\">metadata<\/span><span class=\"p\">));<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">syncUrl<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/api\/upload`<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">method<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">POST<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">headers<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"dl\">'<\/span><span class=\"s1\">Authorization<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`Bearer <\/span><span class=\"p\">${<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">apiKey<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span>\n      <span class=\"p\">},<\/span>\n      <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"nx\">formData<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ Semantic search and answer generation<\/span>\n  <span class=\"k\">async<\/span> <span class=\"nf\">queryKnowledgeBase<\/span><span class=\"p\">(<\/span><span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">query<\/span><span class=\"p\">,<\/span> <span class=\"nx\">options<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{})<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">response<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">syncUrl<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/api\/query`<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">method<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">POST<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">headers<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"dl\">'<\/span><span class=\"s1\">Content-Type<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">application\/json<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"dl\">'<\/span><span class=\"s1\">Authorization<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`Bearer <\/span><span class=\"p\">${<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">apiKey<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span>\n      <span class=\"p\">},<\/span>\n      <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">({<\/span>\n        <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">query<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">maxResults<\/span><span class=\"p\">:<\/span> <span class=\"nx\">options<\/span><span class=\"p\">.<\/span><span class=\"nx\">maxResults<\/span> <span class=\"o\">||<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">includeContext<\/span><span class=\"p\">:<\/span> <span class=\"nx\">options<\/span><span class=\"p\">.<\/span><span class=\"nx\">includeContext<\/span> <span class=\"o\">||<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">generateAnswer<\/span><span class=\"p\">:<\/span> <span class=\"nx\">options<\/span><span class=\"p\">.<\/span><span class=\"nx\">generateAnswer<\/span> <span class=\"o\">||<\/span> <span class=\"kc\">true<\/span>\n      <span class=\"p\">})<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"kd\">const<\/span> <span class=\"nx\">result<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">response<\/span><span class=\"p\">.<\/span><span class=\"nf\">json<\/span><span class=\"p\">();<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">answer<\/span><span class=\"p\">:<\/span> <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">generative_answer<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">sources<\/span><span class=\"p\">:<\/span> <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">resources<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">(<\/span><span class=\"nx\">resource<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">({<\/span>\n        <span class=\"na\">filename<\/span><span class=\"p\">:<\/span> <span class=\"nx\">resource<\/span><span class=\"p\">.<\/span><span class=\"nx\">title<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">confidence<\/span><span class=\"p\">:<\/span> <span class=\"nx\">resource<\/span><span class=\"p\">.<\/span><span class=\"nx\">score<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">snippet<\/span><span class=\"p\">:<\/span> <span class=\"nx\">resource<\/span><span class=\"p\">.<\/span><span class=\"nx\">text<\/span><span class=\"p\">.<\/span><span class=\"nf\">slice<\/span><span class=\"p\">(<\/span><span class=\"mi\">0<\/span><span class=\"p\">,<\/span> <span class=\"mi\">200<\/span><span class=\"p\">),<\/span>\n        <span class=\"na\">url<\/span><span class=\"p\">:<\/span> <span class=\"nx\">resource<\/span><span class=\"p\">.<\/span><span class=\"nx\">origin<\/span><span class=\"p\">?.<\/span><span class=\"nx\">url<\/span>\n      <span class=\"p\">})),<\/span>\n      <span class=\"na\">confidence<\/span><span class=\"p\">:<\/span> <span class=\"nx\">result<\/span><span class=\"p\">.<\/span><span class=\"nx\">min_score<\/span>\n    <span class=\"p\">};<\/span>\n  <span class=\"p\">}<\/span>\n\n  <span class=\"c1\">\/\/ Sync user context for personalized RAG<\/span>\n  <span class=\"k\">async<\/span> <span class=\"nf\">syncUserContext<\/span><span class=\"p\">(<\/span><span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">userContext<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">fetch<\/span><span class=\"p\">(<\/span><span class=\"s2\">`<\/span><span class=\"p\">${<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">syncUrl<\/span><span class=\"p\">}<\/span><span class=\"s2\">\/api\/sync`<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">method<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">PUT<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">headers<\/span><span class=\"p\">:<\/span> <span class=\"p\">{<\/span>\n        <span class=\"dl\">'<\/span><span class=\"s1\">Content-Type<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">application\/json<\/span><span class=\"dl\">'<\/span><span class=\"p\">,<\/span>\n        <span class=\"dl\">'<\/span><span class=\"s1\">Authorization<\/span><span class=\"dl\">'<\/span><span class=\"p\">:<\/span> <span class=\"s2\">`Bearer <\/span><span class=\"p\">${<\/span><span class=\"k\">this<\/span><span class=\"p\">.<\/span><span class=\"nx\">apiKey<\/span><span class=\"p\">}<\/span><span class=\"s2\">`<\/span>\n      <span class=\"p\">},<\/span>\n      <span class=\"na\">body<\/span><span class=\"p\">:<\/span> <span class=\"nx\">JSON<\/span><span class=\"p\">.<\/span><span class=\"nf\">stringify<\/span><span class=\"p\">({<\/span>\n        <span class=\"nx\">userId<\/span><span class=\"p\">,<\/span>\n        <span class=\"nx\">userContext<\/span><span class=\"p\">,<\/span>\n        <span class=\"na\">action<\/span><span class=\"p\">:<\/span> <span class=\"dl\">'<\/span><span class=\"s1\">sync_context<\/span><span class=\"dl\">'<\/span>\n      <span class=\"p\">})<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">}<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"c1\">\/\/ Usage in React component<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">useContextualSearch<\/span> <span class=\"o\">=<\/span> <span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n  <span class=\"kd\">const<\/span> <span class=\"nx\">ragService<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">NucliaRAGService<\/span><span class=\"p\">(<\/span>\n    <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_NUCLIA_API_KEY<\/span><span class=\"p\">,<\/span>\n    <span class=\"nx\">process<\/span><span class=\"p\">.<\/span><span class=\"nx\">env<\/span><span class=\"p\">.<\/span><span class=\"nx\">NEXT_PUBLIC_NUCLIA_SYNC_URL<\/span>\n  <span class=\"p\">);<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">search<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">query<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">userId<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">getCurrentUserId<\/span><span class=\"p\">();<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">results<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">ragService<\/span><span class=\"p\">.<\/span><span class=\"nf\">queryKnowledgeBase<\/span><span class=\"p\">(<\/span><span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">query<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"na\">maxResults<\/span><span class=\"p\">:<\/span> <span class=\"mi\">5<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">includeContext<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">generateAnswer<\/span><span class=\"p\">:<\/span> <span class=\"kc\">true<\/span>\n    <span class=\"p\">});<\/span>\n\n    <span class=\"k\">return<\/span> <span class=\"nx\">results<\/span><span class=\"p\">;<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"kd\">const<\/span> <span class=\"nx\">uploadFile<\/span> <span class=\"o\">=<\/span> <span class=\"k\">async <\/span><span class=\"p\">(<\/span><span class=\"nx\">file<\/span><span class=\"p\">,<\/span> <span class=\"nx\">metadata<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{})<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">userId<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nf\">getCurrentUserId<\/span><span class=\"p\">();<\/span>\n    <span class=\"k\">return<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">ragService<\/span><span class=\"p\">.<\/span><span class=\"nf\">uploadDocument<\/span><span class=\"p\">(<\/span><span class=\"nx\">userId<\/span><span class=\"p\">,<\/span> <span class=\"nx\">file<\/span><span class=\"p\">,<\/span> <span class=\"p\">{<\/span>\n      <span class=\"p\">...<\/span><span class=\"nx\">metadata<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">uploadedAt<\/span><span class=\"p\">:<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">().<\/span><span class=\"nf\">toISOString<\/span><span class=\"p\">(),<\/span>\n      <span class=\"na\">filename<\/span><span class=\"p\">:<\/span> <span class=\"nx\">file<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"p\">,<\/span>\n      <span class=\"na\">type<\/span><span class=\"p\">:<\/span> <span class=\"nx\">file<\/span><span class=\"p\">.<\/span><span class=\"nx\">type<\/span>\n    <span class=\"p\">});<\/span>\n  <span class=\"p\">};<\/span>\n\n  <span class=\"k\">return<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">search<\/span><span class=\"p\">,<\/span> <span class=\"nx\">uploadFile<\/span> <span class=\"p\">};<\/span>\n<span class=\"p\">};<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p><strong>What Progress RAG handles for you<\/strong>:<\/p>\n\n<ul>\n<li>Automatic document chunking with optimal strategies<\/li>\n<li>Vector embedding generation and storage using multiple models<\/li>\n<li>Knowledge base isolation per user with secure access<\/li>\n<li>Real-time document indexing and processing<\/li>\n<li>Source attribution and confidence scoring<\/li>\n<li>Multi-format support (PDFs, docs, images, text, code files)<\/li>\n<li>Advanced filtering and metadata handling<\/li>\n<\/ul>\n\n<p>The beauty is in what you <em>don't<\/em> have to manage: embedding models, vector databases, chunking algorithms, or scaling concerns. Progress RAG provides a RAG-as-a-Service platform that handles the complexity while giving you full customization over retrieval strategies and LLM integration.<\/p>\n\n<h2>\n  \n  \n  The privacy advantage (your competitive moat)\n<\/h2>\n\n<p>Google dominates the public web, but your competitive advantages live in private repositories. Your processes, architectural decisions, lessons learned from production incidents, and institutional knowledge that took years to accumulate\u2014none of that is searchable by your competitors.<\/p>\n\n<p>When you implement contextual search internally, you're not just solving a productivity problem. You're creating an <strong>unfair advantage<\/strong>. Your team can instantly access collective knowledge that would take months for a competitor to rebuild.<\/p>\n\n<p>New hires can ask \"How do we handle race conditions in the payment processor?\" and get answers synthesized from:<\/p>\n\n<ul>\n<li>The original architectural decision document<\/li>\n<li>A post-mortem from when the bug was discovered<\/li>\n<li>Code comments from the fix<\/li>\n<li>A Slack thread discussing edge cases<\/li>\n<\/ul>\n\n<p>This isn't just about finding documents\u2014it's about preserving and leveraging institutional memory.<\/p>\n\n<h2>\n  \n  \n  Beyond the obvious: Where contextual search gets interesting\n<\/h2>\n\n<p><strong>Code archaeology<\/strong>: \"What were the original assumptions behind this module?\" Feed your git history, PR discussions, and architecture docs into your knowledge base, and suddenly your codebase has a memory that explains <em>why<\/em>, not just <em>what<\/em>.<\/p>\n\n<p><strong>Decision lineage<\/strong>: \"Why did we choose microservices over a monolith?\" Instead of tribal knowledge, you get a trail connecting the original requirements, trade-off analyses, implementation challenges, and retrospective insights.<\/p>\n\n<p><strong>Academic research<\/strong>: Students can upload lecture notes, research papers, and assignment materials, then ask complex questions like \"How does the concept of eigenvalues from linear algebra relate to the principal component analysis we covered in machine learning?\" Progress RAG finds connections across different courses and materials.<\/p>\n\n<p><strong>Onboarding acceleration<\/strong>: New engineers asking \"How does our deployment process work?\" get answers that weave together infrastructure docs, runbooks, and real war stories from production incidents.<\/p>\n\n<h2>\n  \n  \n  The implementation reality: What I learned building EduBox\n<\/h2>\n\n<p>In building EduBox with Progress RAG, I discovered some crucial patterns:<\/p>\n\n<p><strong>User context isolation<\/strong>: Each user gets their own knowledge base hash in Progress RAG. This isn't just about privacy\u2014it's about relevance. My calculus notes shouldn't pollute your search for computer science concepts.<\/p>\n\n<p><strong>Incremental processing<\/strong>: Progress RAG indexes documents immediately upon upload. Students expect to ask questions about notes they just uploaded, not wait for overnight batch processing.<\/p>\n\n<p><strong>Multi-modal support<\/strong>: The system handles PDFs, Word docs, images with text, code files, and even chat logs. Progress RAG automatically adapts its processing pipeline based on content type.<\/p>\n\n<p><strong>Source attribution that builds trust<\/strong>: Every answer includes specific source snippets with confidence scores. Students can verify the AI's reasoning and dive deeper into the original materials when needed.<\/p>\n\n<p><strong>Cost efficiency<\/strong>: With Progress RAG's pricing model, processing 1000 documents costs roughly $2-5 depending on size and complexity. For a student or small team, that's negligible compared to the productivity gains.<\/p>\n\n<h2>\n  \n  \n  Why this matters more than another productivity tool\n<\/h2>\n\n<p>We're in a weird transitional moment. We have AI that can reason about complex problems, but most organizations can't even find their own documentation effectively. <strong>Contextual search isn't just about better search\u2014it's about unlocking the collective intelligence that already exists in your organization.<\/strong><\/p>\n\n<p>Every company is sitting on a goldmine of knowledge that's effectively inaccessible. Meeting transcripts with crucial decisions, design documents explaining architectural choices, customer feedback that shaped product direction\u2014it's all there, but locked away by the limitations of keyword search.<\/p>\n\n<p>The teams that figure this out first will have a compound advantage. Better decisions because they can access historical context. Faster onboarding because new team members can learn from everything that came before. Less repeated work because they can find previous solutions.<\/p>\n\n<p>Google will always own the public web. But for <em>your<\/em> docs, <em>your<\/em> code, <em>your<\/em> institutional knowledge\u2014contextual search wins. And it keeps that competitive advantage exactly where it should be: behind your login wall.<\/p>\n\n\n\n\n<p><em>I built <a href=\"https:\/\/edubox-ai.vercel.app\/\" rel=\"noopener noreferrer\">EduBox<\/a> as a working example of this concept\u2014students can upload lecture notes, assignments, and academic materials, then ask natural language questions to get contextual answers with source citations. The <a href=\"https:\/\/github.com\/ARYPROGRAMMER\/EduBox\" rel=\"noopener noreferrer\">implementation details<\/a> show how Progress RAG simplified what could have been a complex architecture into clean, maintainable code.<\/em><\/p>\n\n<p><em>What's the biggest knowledge discovery problem in your organization? I'm curious about other patterns people are encountering as more teams adopt contextual search.<\/em><\/p>\n\n","category":["ai","webdev","tutorial","rag"]},{"title":"EduBox - AI Student Hub","pubDate":"Mon, 22 Sep 2025 05:27:22 +0000","link":"https:\/\/dev.to\/aryprogrammer\/edubox-ai-student-hub-21il","guid":"https:\/\/dev.to\/aryprogrammer\/edubox-ai-student-hub-21il","description":"<p><em>This is a submission for the <a href=\"https:\/\/dev.to\/challenges\/kendoreact-2025-09-10\">KendoReact Free Components Challenge<\/a>.<\/em><\/p>\n\n<p><strong>TLDR;<\/strong> for working professionals<\/p>\n\n<p>Life gets messy: deadlines change, tasks pile up, and campus life adds variables you didn\u2019t plan for. EduBox is about balance \u2014 keeping things manageable so you can do more, worry less. Whether you're a freshman overwhelmed by schedule, or a senior juggling multiple commitments, EduBox helps you stay on top without burning out.<\/p>\n\n<h2>\n  \n  \n  What I Built\n<\/h2>\n\n<p>I built EduBox because I was tired of juggling a million different apps and tools as a student. You know how it is - notes scattered across Google Drive, assignments tracked in some random spreadsheet, campus events you only hear about by chance, and that constant anxiety about missing deadlines. So I created this intelligent student hub that brings everything together in one place. <\/p>\n\n<p>EduBox uses AI to help students stay organized and on top of their academic life. It has smart file management with semantic search (so you can actually find your notes when you need them), an intelligent planner that learns your patterns and helps you avoid those last-minute cram sessions, a campus life hub to keep you connected with clubs and events, and even an AI assistant that can answer questions about your own materials and can CREATE new assignments\/study sessions etc - thx to tool calling. It's like having a personal academic organizer that actually understands what you're studying. AI Content Generation, Markdown Fast Editor (thx Kendo), Study Assistant, Huge Context Storage, Data Import\/Export feature and your profile management space.<\/p>\n\n<p><strong>Tech Stack (High Level):<\/strong><\/p>\n\n<ul>\n<li>Frontend: Next.js + TypeScript, styled with Tailwind for a responsive, accessible UI.<\/li>\n<li>Authentication: Clerk for secure user sign-in and profiles.<\/li>\n<li>Sync\/Storage: Convex for real-time sync and simple serverless data operations.<\/li>\n<li>AI &amp; Agents: Multi-agent orchestration built with CopilotKit, LLMs hosted via Vertex\/ Gemini using Tools, and Kendo RAG (retrieval-augmented generation) to ground model answers in user notes and documents.<\/li>\n<li>UI\/UX components: KendoUI - powered widgets to speed up development. <\/li>\n<li>Deployment: Frontend - Vercel setup, Backend - Render, Both having environment-driven configuration for keys and providers.<\/li>\n<\/ul>\n\n<p>Need More? See the application - it definitely has more, I kept working at it endlessly :)<\/p>\n\n<h2>\n  \n  \n  Demo\n<\/h2>\n\n<p>The Demo is crazy, I had a feeling it would go wrong [but it didn't, glad]: <a href=\"https:\/\/www.youtube.com\/watch?v=td5qevnAoec\" rel=\"noopener noreferrer\">Demo Video on Youtube<\/a><\/p>\n\n<p>The application is live on vercel: <a href=\"https:\/\/edubox-ai.vercel.app\/\" rel=\"noopener noreferrer\">Website<\/a><\/p>\n\n<p>And the source code: <a href=\"https:\/\/github.com\/ARYPROGRAMMER\/EduBox\" rel=\"noopener noreferrer\">Source Code<\/a><\/p>\n\n<p><strong>Note<\/strong> : Some features might have stopped working on the deployment due to currently being on trial plan. Try to use your .env and local environment in that case.<\/p>\n\n<h2>\n  \n  \n  Screenshots [Some were taken During Development]\n<\/h2>\n\n<h3>\n  \n  \n  Landing Page\n<\/h3>\n\n<p><em>Beautiful landing page with threejs component<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0cejxnhd5jra9fdzctmx.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0cejxnhd5jra9fdzctmx.png\" alt=\"Landing Page\" width=\"800\" height=\"420\"><\/a><\/p>\n\n<h3>\n  \n  \n  Dashboard &amp; Overview\n<\/h3>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F97yqvt3vx6myvwqd16iz.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F97yqvt3vx6myvwqd16iz.png\" alt=\"Dashboard Overview\" width=\"800\" height=\"412\"><\/a><\/p>\n\n<p><em>Academic progress tracking and analytics<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwoanmvimw69l4lappkak.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwoanmvimw69l4lappkak.png\" alt=\"Analytics Dashboard\" width=\"800\" height=\"414\"><\/a><\/p>\n\n<p><em>User profile and settings<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fweuhey51fqted3so9m2q.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fweuhey51fqted3so9m2q.png\" alt=\"Profile Page\" width=\"800\" height=\"434\"><\/a><\/p>\n\n<h3>\n  \n  \n  AI Assistant &amp; Chat\n<\/h3>\n\n<p><em>AI assistant home interface<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb0wwmk4hvmlsd0n36uve.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb0wwmk4hvmlsd0n36uve.png\" alt=\"AI Chat Home\" width=\"800\" height=\"415\"><\/a><\/p>\n\n<p><em>Conversation with AI assistant having Tools<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Filmr0v5g1hlo06h7ngjg.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Filmr0v5g1hlo06h7ngjg.png\" alt=\"AI Chat Session\" width=\"800\" height=\"435\"><\/a><\/p>\n\n<p><em>AI-powered study assistance<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fia0bhfgfahpnm52n4n58.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fia0bhfgfahpnm52n4n58.png\" alt=\"AI Study Assistant\" width=\"800\" height=\"438\"><\/a><\/p>\n\n<p><em>AI content generation feature<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F20ljcyrh4877ipzfbdn9.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F20ljcyrh4877ipzfbdn9.png\" alt=\"Content Generation\" width=\"800\" height=\"436\"><\/a><\/p>\n\n<h3>\n  \n  \n  Search &amp; RAG\n<\/h3>\n\n<p><em>Retrieval-augmented generation Usage<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8lzlh00pnea9m0g75t7u.jpeg\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8lzlh00pnea9m0g75t7u.jpeg\" alt=\"RAG Demo\" width=\"800\" height=\"440\"><\/a><\/p>\n\n<p><em>Knowledge base and document processing in NucliaDB<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F95in7dnj05pczznibbc3.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F95in7dnj05pczznibbc3.png\" alt=\"RAG Database\" width=\"800\" height=\"334\"><\/a><\/p>\n\n<h3>\n  \n  \n  Planner &amp; Scheduling\n<\/h3>\n\n<p><em>Intelligent planning and schedule management<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3zgdtoos5rqv83pypxrr.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3zgdtoos5rqv83pypxrr.png\" alt=\"Planner Hub\" width=\"800\" height=\"457\"><\/a><\/p>\n\n<h3>\n  \n  \n  File Management\n<\/h3>\n\n<p><em>File organization and management interface<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuifqpu9b8flguaqegxyc.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fuifqpu9b8flguaqegxyc.png\" alt=\"File Hub 1\" width=\"800\" height=\"438\"><\/a><\/p>\n\n<p><em>Advanced file operations and search<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpdq3jsawe8uzerr3dzyu.jpeg\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpdq3jsawe8uzerr3dzyu.jpeg\" alt=\"File Hub 2\" width=\"800\" height=\"403\"><\/a><\/p>\n\n<p><em>Data import and export functionality<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F92r1rx6qqm4pmx5wn61g.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F92r1rx6qqm4pmx5wn61g.png\" alt=\"Import\/Expor\" width=\"800\" height=\"416\"><\/a><\/p>\n\n<h3>\n  \n  \n  Backend Service\n<\/h3>\n\n<p><em>Nuclia Document synchronization service<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyqvb0dt47zqo31ulbnhg.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyqvb0dt47zqo31ulbnhg.png\" alt=\"Backend Sync\" width=\"800\" height=\"589\"><\/a><\/p>\n\n<p><em>Convex Real-time database management<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs5wfudr8pxm1awpfv0gn.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fs5wfudr8pxm1awpfv0gn.png\" alt=\"Convex Database\" width=\"800\" height=\"410\"><\/a><\/p>\n\n<p><em>Schematic Billing and feature gating system<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frtila4hceyjujc1g6ixt.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frtila4hceyjujc1g6ixt.png\" alt=\"Schematic Billing\" width=\"800\" height=\"492\"><\/a><\/p>\n\n<h3>\n  \n  \n  Additional Features\n<\/h3>\n\n<p><em>Premium feature access control Component<\/em><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffxc9zzm3lh4zqdjubzwh.jpeg\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffxc9zzm3lh4zqdjubzwh.jpeg\" alt=\"Locked Feature\" width=\"800\" height=\"411\"><\/a><\/p>\n\n<h2>\n  \n  \n  KendoReact Components Used\n<\/h2>\n\n<p>I really went all-in with KendoReact components for EduBox! Here's what I used:<\/p>\n\n<ul>\n<li>\n<strong>KendoReact Buttons<\/strong> - These gave all my UI buttons that professional, polished look with smooth ripple effects<\/li>\n<li>\n<strong>KendoReact Indicators<\/strong> - Perfect loaders that I sprinkled throughout the app for those \"please wait\" moments<\/li>\n<li>\n<strong>KendoReact PDF<\/strong> - Made it super easy to export analytics reports as PDFs<\/li>\n<li>\n<strong>KendoReact Progress Bars<\/strong> - Great for showing upload progress in the file management section<\/li>\n<li>\n<strong>KendoReact Ripple<\/strong> - Added those satisfying ripple effects to buttons, switches, dropdowns - makes everything feel more interactive<\/li>\n<li>\n<strong>KendoReact ScrollView<\/strong> - Made by Landing Page more beautiful by allowing me to add an endless scrolling screenshots section<\/li>\n<li>\n<strong>KendoReact Sortable<\/strong> - Implemented drag-and-drop functionality for organizing files<\/li>\n<li>\n<strong>KendoReact Taskboard<\/strong> - Built the entire planner interface around this<\/li>\n<li>\n<strong>KendoReact Upload<\/strong> - Handles all the file uploads<\/li>\n<li>\n<strong>KendoReact Editor<\/strong> - Rich text editing capabilities for when students need to format their notes<\/li>\n<li>\n<strong>Kendo Theme Default<\/strong> - Makes the component color scheme shifting too easy in both themes<\/li>\n<\/ul>\n\n<p>These components saved me so much time and made the UI look way more professional than if I'd built everything from scratch.<\/p>\n\n<h2>\n  \n  \n  Coded Smarter using Kendo AI Coding Assistant\n<\/h2>\n\n<p>Oh man, Kendo AI Assistant was a game-changer for building EduBox! I used it as my AI coding assistant many times in the entire development process. It wasn't just about writing code - it became my coding buddy that helped me think through problems and implement solutions.<\/p>\n\n<p>Here's how it helped me:<\/p>\n\n<ul>\n<li>\n<strong>Component Creation is Pure Insane<\/strong>: It can literally create a very very complex component within seconds. I was stuck on something - I had an idea that I can go the Highway and create the react component with a somewhat complex logic to create a UX that I imagined. Instead I asked Kendo AI and to my surprise the answer was simply called \"Sortable\". It is a component which I wanted to created, Kendo already has it but This AI Assistant made the Integration too easy. Saved me multiple times. It helped me build complex components and created TypeScript interfaces<\/li>\n<li>\n<strong>Debugging Partner<\/strong>: When I was stuck on integration issues in the frontend components and pages with various AI services and data fetching, it helped me identify and fix problems<\/li>\n<li>\n<strong>Architecture Advice<\/strong>: It gave me great suggestions for organizing the existing component structure and how to integrate all these different services with kendo components<\/li>\n<\/ul>\n\n<p>The AI assistant was especially helpful for:<\/p>\n\n<ul>\n<li>Making complex components and handling proper data methods<\/li>\n<li>Modifying existing components to add UX <\/li>\n<li>Setting up the multi-service architecture <\/li>\n<li>Creating responsive UI components with proper TypeScript typing<\/li>\n<li>Optimizing component performance<\/li>\n<\/ul>\n\n<p>Without Kendo AI Assistant, this project would have taken way longer and probably had a lot more bugs. Quick Challenge - Find as many Bugs you can and raise <a href=\"https:\/\/github.com\/ARYPROGRAMMER\/EduBox\/issues\" rel=\"noopener noreferrer\">issues<\/a><\/p>\n\n<h2>\n  \n  \n  Progress\/Kendo NucliaDB RAG Integration\n<\/h2>\n\n<p>I integrated Nuclia RAG as the brains behind EduBox's search capabilities, and it completely transformed how students can interact with their academic materials. Instead of just keyword searching, students can now ask natural questions and get intelligent answers based on their own documents. You ask about your photos, your chats , your assignments, files, contents, schedule, dining, events - literally anything. You will get an answer + You will get the source + Everything is constantly updated via their sync APIS + Insane retrieval speed. Man, Kudos to them for creating such a useful service, though the live version might not be having it for more time - its on trial usage for now<\/p>\n\n<p>The integration has two main parts:<\/p>\n\n<p><strong>Backend Service<\/strong>: I built a custom Node.js service that handles all the document processing. It automatically creates personalized knowledge bases for each user, runs background processing for file uploads, and provides clean API endpoints for the frontend to use. It SYNCS your userContext to the NucliaDB which is operated <strong>on<\/strong> by them to vectorize find similarities etc etc., and we can query using their widgets and response generation is via ChatGpt + Azure model in my case - there are lots of options on their website. Super duper cool and easy.<\/p>\n\n<p><strong>Frontend Integration<\/strong>: Their is a nuclia popup rag component which is basically a search component (more of a widget) provided by Nuclia itself that queries Nuclia to search across all a user's documents semantically. When you upload a PDF or document, it gets indexed immediately so you can search it right away. The AI can pull relevant information from your materials to give contextually appropriate answers. The frontend triggers the backend request when hash of userContext changes. The backend then does the syncing via Nuclia API.<\/p>\n\n<p>What makes this special is that students can ask questions like \"What are the key points from my calculus notes?\" or \"Find information about the assignment due next week\" and actually get accurate, helpful responses based on their own uploaded materials. It's like having an AI tutor that knows everything you've studied or wanted to :|<\/p>\n\n<p>The whole setup ensures privacy too - each user gets their own Hash in the Nuclia KB, so their academic materials stay personal and secure.<\/p>\n\n<h2>\n  \n  \n  What's next for EduBox \u2014 AI Student Hub\n<\/h2>\n\n<ul>\n<li>Improved onboarding and initial setup flow so new users quickly import notes from softwares like obsidian\/notion\/joplin, and see value.<\/li>\n<li>Connectors like Google Calendar, iCal, Canvas\/Blackboard for two-way sync and grade\/task ingestion. Zoom and Gmeet Integration, Youtube API Integration and GDrive store Integration. <\/li>\n<li>Mobile-first polish (PWA or native clients) and accessibility improvements.<\/li>\n<li>Plugin\/connector system so third parties can add data sources or custom agent behaviors. Obviously less challenging and can be done now too but requires architectural changes to create maybe a gateway and interdependencies.<\/li>\n<\/ul>\n\n<h2>\n  \n  \n  Additional Info:\n<\/h2>\n\n<h3>\n  \n  \n  Architectural Diagram [Very High Level]\n<\/h3>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3hqsyz86j4mf0r8xo2az.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3hqsyz86j4mf0r8xo2az.png\" alt=\" \" width=\"800\" height=\"167\"><\/a><\/p>\n\n<h3>\n  \n  \n  Project Structure [Pretty Simple]\n<\/h3>\n\n\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>EduBox\/\n\u251c\u2500\u2500 frontend\/                \n\u2502   \u251c\u2500\u2500 app\/                  <span class=\"c\"># App Router pages and API routes<\/span>\n\u2502   \u251c\u2500\u2500 components\/           \n\u2502   \u2502   \u251c\u2500\u2500 schematic\/       <span class=\"c\"># Schematic billing components<\/span>\n\u2502   \u2502   \u2514\u2500\u2500 ui\/              \n\u2502   \u251c\u2500\u2500 convex\/              <span class=\"c\"># Convex database schema and functions<\/span>\n\u2502   \u251c\u2500\u2500 lib\/                 <span class=\"c\"># Utility libraries<\/span>\n\u2502   \u251c\u2500\u2500 hooks\/               <span class=\"c\"># Custom React hooks<\/span>\n\u2502   \u2514\u2500\u2500 types\/               <span class=\"c\"># TypeScript type definitions<\/span>\n\u251c\u2500\u2500 backend\/\n\u2502   \u2514\u2500\u2500 nuclia-sync\/         <span class=\"c\"># Nuclia document sync service<\/span>\n\u2514\u2500\u2500 README.md\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h4>\n  \n  \n  The Project also uses Schematic - which internally has stripe management to provide plan based usage. It has LIMITED-FREE\/Starter\/Pro Plans. Currently all users are defaulted to LIMITED-FREE plan to access all features. This is a working payment gateway solution which is efficiently managed by schematic.\n<\/h4>\n\n<p>Try asking:<\/p>\n\n<p>\u201cWhat\u2019s due tomorrow?\u201d<\/p>\n\n<p>\u201cFind me my biology notes from last week.\u201d<\/p>\n\n<p>\u201cDo I have time to hit the gym before physics class?\u201d<\/p>\n\n<p><em>For Setup Details REFER README.md of GitHub<\/em><\/p>\n\n<p>Very happy to create such an <strong>useful<\/strong> and <strong>working<\/strong> product. It was so easy to read the <strong>documentation of Kendo<\/strong> and think about creating a full fledged application. I would recommend everyone to test the application at least once, I found my joy creating this. <\/p>\n\n<p>Do checkout <strong>Kendo Docs<\/strong> for more details and <strong>Nuclia RAG DB<\/strong>. Incase of Issues you can always ask <strong>Kendo AI Assistant<\/strong><\/p>\n\n<p><a href=\"https:\/\/www.telerik.com\/kendo-react-ui\/components\/introduction\" rel=\"noopener noreferrer\">Kendo UI<\/a><br>\n<a href=\"https:\/\/docs.rag.progress.cloud\/docs\/\" rel=\"noopener noreferrer\">Progress\/Kendo RAG<\/a><\/p>\n\n<p>That's it for now, Looking forward to crazy new possibilities with this - Now that I can manage my life better.<\/p>\n\n<p>For queries\/suggestions\/doubts or maybe a bit chit-chat<br>\n<strong>Contact Me<\/strong>: <a href=\"mailto:arya.2023ug1104@iiitranchi.ac.in\">arya.2023ug1104@iiitranchi.ac.in<\/a><\/p>\n\n","category":["kendoreactchallenge","react","webdev","devchallenge"]},{"title":"FestFund: Private Contributions & Public Recognition - A Zero-Knowledge Fundraising Solution","pubDate":"Sun, 07 Sep 2025 01:51:59 +0000","link":"https:\/\/dev.to\/aryprogrammer\/festfund-private-contributions-public-recognition-a-zero-knowledge-fundraising-solution-g79","guid":"https:\/\/dev.to\/aryprogrammer\/festfund-private-contributions-public-recognition-a-zero-knowledge-fundraising-solution-g79","description":"<p><em>This is a submission for the <a href=\"https:\/\/dev.to\/challenges\/midnight-2025-08-20\">Midnight Network \"Privacy First\" Challenge<\/a> - Protect That Data prompt.<\/em><\/p>\n\n<p><strong>Quick Links:<\/strong><br><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu1f1s2hftxqc7g49daki.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fu1f1s2hftxqc7g49daki.png\" alt=\"Midnight Network\" width=\"88\" height=\"20\"><\/a> <a href=\"https:\/\/festfund.vercel.app\/\" rel=\"noopener noreferrer\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbfewtc40fvz2pqrttp1w.png\" alt=\"Live Demo\" width=\"186\" height=\"20\"><\/a> <a href=\"https:\/\/www.youtube.com\/watch?v=4dsZVYmTkkY\" rel=\"noopener noreferrer\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa111tbxb3t7v95bbwl0y.png\" alt=\"Demo - YouTube\" width=\"100\" height=\"20\"><\/a> <a href=\"https:\/\/vimeo.com\/1116483249?share=copy\" rel=\"noopener noreferrer\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffsla981f596oafws9z6v.png\" alt=\"Demo-Vimeo\" width=\"88\" height=\"20\"><\/a> <a href=\"https:\/\/github.com\/ARYPROGRAMMER\/FestFund\" rel=\"noopener noreferrer\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Freqk8v8agj40hb2bnyu7.png\" alt=\"GitHub - Repository\" width=\"116\" height=\"20\"><\/a>  <\/p>\n\n\n\n<p><strong>Tech Stack:<\/strong><br><br>\n<a href=\"https:\/\/nextjs.org\/\" rel=\"noopener noreferrer\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fcza5mgqmfxscr6802ef0.png\" alt=\"Next.js\" width=\"67\" height=\"20\"><\/a> <a href=\"https:\/\/www.typescriptlang.org\/\" rel=\"noopener noreferrer\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffn0dza4wa7zzqoa2hq3b.png\" alt=\"TypeScript\" width=\"87\" height=\"20\"><\/a> <a href=\"https:\/\/nodejs.org\/\" rel=\"noopener noreferrer\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7twgbpszxoadhnj6prcq.png\" alt=\"Node.js\" width=\"69\" height=\"20\"><\/a> <a href=\"https:\/\/www.mongodb.com\/\" rel=\"noopener noreferrer\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2ppliic4ghla13j84zr8.png\" alt=\"MongoDB\" width=\"81\" height=\"20\"><\/a> <a href=\"https:\/\/docs.soliditylang.org\/\" rel=\"noopener noreferrer\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr3jvway8z283sltjrudb.png\" alt=\"Solidity\" width=\"69\" height=\"20\"><\/a> <a href=\"https:\/\/vercel.com\/\" rel=\"noopener noreferrer\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7abpzkd8v6lzl6r9alf0.png\" alt=\"Vercel\" width=\"63\" height=\"20\"><\/a>  <\/p>\n\n<p><strong>Note: Terms Donor and Contributor have been used interchangebly and mean the same 'THE VALUE ADDITION PARTY WHICH GENERATES A ZKP.<\/strong><\/p>\n<h2>\n  \n  \n  What I Built\n<\/h2>\n\n<p>FestFund solves fundraising's one of the hardest paradox: the choice between donor privacy and transparent recognition. Using Midnight Network's ZK infrastructure, I built a platform where donation amounts\/transactions\/wallet addresses\/names are other important parameters remain completely private while maintaining verifiable public leaderboards and milestone tracking. <\/p>\n\n<p><strong>The Innovation Proposed:<\/strong> Cryptographically proving fundraising progress without exposing individual contribution amounts - making privacy and transparency work together, and making sure the figures (not shown) are valid (using commitments generated).<\/p>\n<h2>\n  \n  \n  Demo\n<\/h2>\n\n<p><strong>\ud83c\udf10 Live Frontend:<\/strong> <a href=\"https:\/\/festfund.vercel.app\/\" rel=\"noopener noreferrer\">https:\/\/festfund.vercel.app\/<\/a><\/p>\n\n<blockquote>\n<p><strong>\ud83d\udccb Note:<\/strong> The live demo showcases the complete UI\/UX but smart contract features run locally via Hardhat to keep the project cost-free. Full blockchain functionality available in local development setup. Use hardhat blockchain to create wallets. Hence the deployed service [vercel frontend and koyeb backend] is ought to NOT work due to contracts not being deployed on real blockchain. It just serves as a high level skeleton for now - you have to run it locally for full experience.<\/p>\n<\/blockquote>\n\n<p><strong>\ud83c\udfa5 Demo Videos (Both videos are same, kindly ignore my Voice speed sometimes and errors midway were resolved in few minutes but the part is cut to save time):<\/strong><\/p>\n\n<ul>\n<li>\n<a href=\"https:\/\/www.youtube.com\/watch?v=4dsZVYmTkkY\" rel=\"noopener noreferrer\">YouTube Demo<\/a> - <\/li>\n<li><a href=\"https:\/\/vimeo.com\/1116483249?share=copy\" rel=\"noopener noreferrer\">Vimeo Technical Deep Dive<\/a><\/li>\n<\/ul>\n\n<p><strong>\ud83d\udcc2 GitHub Repository:<\/strong> <a href=\"https:\/\/github.com\/ARYPROGRAMMER\/FestFund\" rel=\"noopener noreferrer\">ARYPROGRAMMER\/FestFund<\/a><\/p>\n<h2>\n  \n  \n  How I Used what I like about Midnight's Technology\n<\/h2>\n\n<p><strong>Performance:<\/strong> Midnight Network reduced ZK proof generation from 418ms to 1ms - a 418x improvement.<\/p>\n\n<p><strong>Core Integration:<\/strong><\/p>\n\n<ul>\n<li>\n<strong>Midnight Testnet-02 RPC:<\/strong> Live ZK operations via <code>https:\/\/rpc.testnet-02.midnight.network<\/code>\n<\/li>\n<li>\n<strong>Official SDK:<\/strong> <code>@midnight-ntwrk\/zswap<\/code> package for cryptographic primitives<\/li>\n<li>\n<strong>Dual Architecture:<\/strong> Automatic fallback between Midnight Network and self-hosted mode<\/li>\n<\/ul>\n<h2>\n  \n  \n  <strong>High Level Architecture Diagram<\/strong>\n<\/h2>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F18nezrorwrbxghq553xl.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F18nezrorwrbxghq553xl.png\" alt=\"Architecture Diagram High Level\" width=\"800\" height=\"587\"><\/a><\/p>\n\n<p><strong>Snippet for Implementation:<\/strong><br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight javascript\"><code><span class=\"c1\">\/\/ Real Midnight Network integration<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">zkProof<\/span> <span class=\"o\">=<\/span> <span class=\"k\">new<\/span> <span class=\"nc\">ZKProofIntegration<\/span><span class=\"p\">();<\/span>\n<span class=\"k\">await<\/span> <span class=\"nx\">zkProof<\/span><span class=\"p\">.<\/span><span class=\"nf\">initialize<\/span><span class=\"p\">(<\/span><span class=\"dl\">\"<\/span><span class=\"s2\">midnight-network<\/span><span class=\"dl\">\"<\/span><span class=\"p\">);<\/span>\n\n<span class=\"c1\">\/\/ Generate private commitment (1ms with Midnight vs 418ms self-hosted)<\/span>\n<span class=\"kd\">const<\/span> <span class=\"nx\">commitment<\/span> <span class=\"o\">=<\/span> <span class=\"k\">await<\/span> <span class=\"nx\">zkProof<\/span><span class=\"p\">.<\/span><span class=\"nf\">generateDonationCommitment<\/span><span class=\"p\">(<\/span>\n  <span class=\"nx\">amount<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">donorSecret<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">eventId<\/span><span class=\"p\">,<\/span>\n  <span class=\"nx\">minimumAmount<\/span>\n<span class=\"p\">);<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Midnight's pre-optimized circuits and production infrastructure eliminated complex setup while providing enterprise-grade reliability and comprehensive documentation. Mine was using powersoftau (8) and it had the latency of 430ms (max) for same zkp. Midnight had 3 ms (max-rare) + is more secure as per my tests.<\/p>\n\n<p><strong>Screenshots of the Platform and Making \/ Debugging:<\/strong><\/p>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxlt3yy8w4v3pevljgyzu.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fxlt3yy8w4v3pevljgyzu.png\" alt=\"Architecture Diagram\" width=\"800\" height=\"400\"><\/a><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7omo0gnuu9x54xlhpz6j.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7omo0gnuu9x54xlhpz6j.png\" alt=\"Database\" width=\"800\" height=\"510\"><\/a><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7uj4rtnbjkl5lds4q242.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7uj4rtnbjkl5lds4q242.png\" alt=\"Campaign Details\" width=\"800\" height=\"555\"><\/a><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3oqgac7ouwjztm0q1z66.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3oqgac7ouwjztm0q1z66.png\" alt=\"Midnight ZKP Gen\" width=\"590\" height=\"166\"><\/a><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feoik6i0h3qrymicgtwmt.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Feoik6i0h3qrymicgtwmt.png\" alt=\"Self ZKP Making\" width=\"800\" height=\"329\"><\/a><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fodqrxx39gi0n651bdcbj.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fodqrxx39gi0n651bdcbj.png\" alt=\"Restriction on Deploying for Now\" width=\"800\" height=\"408\"><\/a><\/p>\n<h2>\n  \n  \n  Data Protection as a Core Feature\n<\/h2>\n\n<p>Privacy forms FestFund's foundational architecture through hardest encryption algorithms, guarantees:<\/p>\n\n<p><strong>\ud83d\udd12 Zero-Knowledge Privacy:<\/strong><\/p>\n\n<ul>\n<li>Individual donation amounts cryptographically hidden using ZK commitments.<\/li>\n<li>Platform administrators cannot access raw donation data.<\/li>\n<li>Nullifier protection prevents double-spending without revealing amounts (Controversial, in this case its allowed once per wallet address).<\/li>\n<\/ul>\n\n<p><strong>\ud83c\udfc6 Transparent Accountability:<\/strong><\/p>\n\n<ul>\n<li>Public leaderboards show donor rankings without exposing amounts (Donor given a choice for this parameter while contributing).<\/li>\n<li>Milestone progress verifiable through cryptographic proofs.<\/li>\n<li>Campaign organizers receive aggregate data while preserving individual privacy.<\/li>\n<\/ul>\n\n<p><strong>Real-World Impact:<\/strong><\/p>\n\n<ul>\n<li>Enables private donations for sensitive causes (political, medical, controversial).<\/li>\n<li>Maintains donor recognition through transparent rankings.<\/li>\n<li>Ensures regulatory compliance via mathematically provable privacy.<\/li>\n<\/ul>\n<h2>\n  \n  \n  Set Up Instructions \/ Tutorial\n<\/h2>\n\n<p><strong>Prerequisites:<\/strong><\/p>\n\n<ul>\n<li>Node.js 18+, MongoDB, MetaMask wallet \/ Hardhat<\/li>\n<\/ul>\n\n<p><strong>Quick Start:<\/strong><br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"c\"># Clone repository<\/span>\ngit clone https:\/\/github.com\/ARYPROGRAMMER\/FestFund.git\n<span class=\"nb\">cd <\/span>FestFund\n\n<span class=\"c\"># Hardhat (new terminal, root dir, precompiled in github)<\/span>\nnpx hardhat node\nnpm run deploy \n\n<span class=\"c\"># Backend setup<\/span>\n<span class=\"nb\">cd <\/span>backend <span class=\"o\">&amp;&amp;<\/span> npm <span class=\"nb\">install<\/span> <span class=\"o\">&amp;&amp;<\/span> npm start\n<span class=\"c\"># \u2705 Backend: http:\/\/localhost:3001<\/span>\n\n<span class=\"c\"># Frontend setup (new terminal)<\/span>\n<span class=\"nb\">cd<\/span> ..\/frontend <span class=\"o\">&amp;&amp;<\/span> npm <span class=\"nb\">install<\/span> <span class=\"o\">&amp;&amp;<\/span> npm run dev\n<span class=\"c\"># \u2705 Frontend: http:\/\/localhost:3000<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p><strong>Environment Configuration [DEV]:<\/strong><br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"c\"># Backend .env can be ignored , backend can take from root<\/span>\n\nroot .env:\n\n<span class=\"nv\">NODE_ENV<\/span><span class=\"o\">=<\/span>development\n<span class=\"nv\">APP_URL<\/span><span class=\"o\">=<\/span>http:\/\/localhost:3000\n<span class=\"nv\">USE_MOCK_MODE<\/span><span class=\"o\">=<\/span><span class=\"nb\">true\n<\/span><span class=\"nv\">PORT<\/span><span class=\"o\">=<\/span>3001\n<span class=\"nv\">BACKEND_URL<\/span><span class=\"o\">=<\/span>http:\/\/localhost:3001\n<span class=\"nv\">CORS_ORIGIN<\/span><span class=\"o\">=<\/span>http:\/\/localhost:3000,http:\/\/localhost:3001\n<span class=\"nv\">NEXT_PUBLIC_BACKEND_URL<\/span><span class=\"o\">=<\/span>http:\/\/localhost:3001\n<span class=\"nv\">NEXT_PUBLIC_APP_NAME<\/span><span class=\"o\">=<\/span>FestFund\n<span class=\"nv\">NEXT_PUBLIC_APP_DESCRIPTION<\/span><span class=\"o\">=<\/span>Privacy-First Donation Platform\n<span class=\"nv\">NEXT_PUBLIC_USE_MOCK_WALLET<\/span><span class=\"o\">=<\/span><span class=\"nb\">true\n<\/span><span class=\"nv\">NEXT_PUBLIC_ENABLE_ANALYTICS<\/span><span class=\"o\">=<\/span><span class=\"nb\">false\n<\/span><span class=\"nv\">NEXT_PUBLIC_ENABLE_NOTIFICATIONS<\/span><span class=\"o\">=<\/span><span class=\"nb\">true\n<\/span><span class=\"nv\">NEXT_PUBLIC_DEFAULT_THEME<\/span><span class=\"o\">=<\/span>light\n<span class=\"nv\">MONGODB_URI<\/span><span class=\"o\">=<\/span>&amp;appName<span class=\"o\">=<\/span>\n<span class=\"nv\">JWT_SECRET<\/span><span class=\"o\">=<\/span>your-super-secret-jwt-key-change-for-production\n<span class=\"nv\">BCRYPT_SALT_ROUNDS<\/span><span class=\"o\">=<\/span>12\n<span class=\"nv\">GEMINI_API_KEY<\/span><span class=\"o\">=<\/span>\n<span class=\"nv\">NEXT_PUBLIC_BLOCKCHAIN_RPC<\/span><span class=\"o\">=<\/span>http:\/\/localhost:8545\n<span class=\"nv\">NEXT_PUBLIC_CHAIN_ID<\/span><span class=\"o\">=<\/span>31337\n<span class=\"nv\">PRIVATE_KEY<\/span><span class=\"o\">=<\/span>7c60d2cd7f18a7891ae8b169f2fdf082d44206acf9c331e81113343537b81fd0\n<span class=\"nv\">NEXT_PUBLIC_FUND_MANAGER_ADDRESS<\/span><span class=\"o\">=<\/span>0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0\n<span class=\"nv\">NEXT_PUBLIC_VERIFIER_ADDRESS<\/span><span class=\"o\">=<\/span>0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512\n<span class=\"nv\">NEXT_PUBLIC_MOCK_ERC20_ADDRESS<\/span><span class=\"o\">=<\/span>0x5FbDB2315678afecb367f032d93F642f64180aa3\n<span class=\"nv\">ZK_MODE<\/span><span class=\"o\">=<\/span>midnight-network\n<span class=\"nv\">NEXT_PUBLIC_ZK_MODE<\/span><span class=\"o\">=<\/span>midnight-network\n<span class=\"nv\">ZK_CIRCUIT_PATH<\/span><span class=\"o\">=<\/span>.\/zk\/circuits\n<span class=\"nv\">ZK_PROVING_KEY_PATH<\/span><span class=\"o\">=<\/span>.\/zk\/build\/proving_key.zkey\n<span class=\"nv\">ZK_VERIFICATION_KEY_PATH<\/span><span class=\"o\">=<\/span>.\/zk\/build\/verification_key.json\n<span class=\"nv\">ZK_CIRCUIT_WASM_PATH<\/span><span class=\"o\">=<\/span>.\/zk\/build\/donation_commitment_v1.wasm\n<span class=\"nv\">VERIFIER_CONTRACT_PATH<\/span><span class=\"o\">=<\/span>.\/contracts\/Verifier.sol\n<span class=\"nv\">MIDNIGHT_RPC_URL<\/span><span class=\"o\">=<\/span>https:\/\/rpc.testnet-02.midnight.network\n<span class=\"nv\">MIDNIGHT_INDEXER_URL<\/span><span class=\"o\">=<\/span>https:\/\/indexer.testnet-02.midnight.network\/api\/v1\/graphql\n<span class=\"nv\">MIDNIGHT_INDEXER_WS_URL<\/span><span class=\"o\">=<\/span>wss:\/\/indexer.testnet-02.midnight.network\/api\/v1\/graphql\/ws\n<span class=\"nv\">MIDNIGHT_NETWORK_ID<\/span><span class=\"o\">=<\/span>TestNet\n<span class=\"nv\">MIDNIGHT_WALLET_SEED<\/span><span class=\"o\">=<\/span>your_64_character_hex_seed_here_or_mnemonic_phrase\n<span class=\"nv\">NEXT_PUBLIC_MIDNIGHT_RPC_URL<\/span><span class=\"o\">=<\/span>https:\/\/rpc.testnet-02.midnight.network\n<span class=\"nv\">NEXT_PUBLIC_MIDNIGHT_NETWORK_ID<\/span><span class=\"o\">=<\/span>TestNet\n<span class=\"nv\">NEXT_PUBLIC_MIDNIGHT_EXPLORER_URL<\/span><span class=\"o\">=<\/span>https:\/\/polkadot.js.org\/apps\/?rpc<span class=\"o\">=<\/span>wss%3A%2F%2Frpc.testnet-02.midnight.network\n<span class=\"nv\">ENABLE_LOGGING<\/span><span class=\"o\">=<\/span><span class=\"nb\">true<\/span>\n\n<span class=\"c\"># My Frontend .env.local<\/span>\n<span class=\"nv\">NEXT_PUBLIC_BACKEND_URL<\/span><span class=\"o\">=<\/span>http:\/\/localhost:3001\n<span class=\"nv\">NEXT_PUBLIC_APP_NAME<\/span><span class=\"o\">=<\/span>FestFund\n<span class=\"nv\">NEXT_PUBLIC_APP_DESCRIPTION<\/span><span class=\"o\">=<\/span>Privacy-First Donation Platform with Zero-Knowledge Proofs\n<span class=\"nv\">NEXT_PUBLIC_CHAIN_ID<\/span><span class=\"o\">=<\/span>31337\n<span class=\"nv\">NEXT_PUBLIC_ENABLE_ANALYTICS<\/span><span class=\"o\">=<\/span><span class=\"nb\">false\n<\/span><span class=\"nv\">NEXT_PUBLIC_ENABLE_NOTIFICATIONS<\/span><span class=\"o\">=<\/span><span class=\"nb\">true\n<\/span><span class=\"nv\">NEXT_PUBLIC_BLOCKCHAIN_RPC<\/span><span class=\"o\">=<\/span>http:\/\/localhost:8545\n<span class=\"nv\">NEXT_PUBLIC_FUND_MANAGER_ADDRESS<\/span><span class=\"o\">=<\/span>0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0\n<span class=\"nv\">NEXT_PUBLIC_VERIFIER_ADDRESS<\/span><span class=\"o\">=<\/span>0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512\n<span class=\"nv\">NEXT_PUBLIC_MOCK_TOKEN_ADDRESS<\/span><span class=\"o\">=<\/span>0x5FbDB2315678afecb367f032d93F642f64180aa3\n<span class=\"nv\">NODE_ENV<\/span><span class=\"o\">=<\/span>development\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p><strong>Testing ZK Integration:<\/strong><\/p>\n\n<ol>\n<li>Create campaign \u2192 Make private donation \u2192 Observe 1ms ZK proof generation<\/li>\n<li>Check leaderboard \u2192 See rankings without amount exposure<\/li>\n<li>Verify milestone achievements are cryptographically proven<\/li>\n<\/ol>\n\n<p><strong>Architecture:<\/strong> Next.js frontend, Express.js API, MongoDB persistence, Circom circuits with Midnight Network integration, Hardhat smart contracts.<\/p>\n\n\n\n\n<p><em>Built with \ud83d\udc9c for the Midnight Network community - Arya Singh<\/em><\/p>\n\n<p>More details \/ queries, email - <a href=\"mailto:arya.2023ug1104@iiitranchi.ac.in\">arya.2023ug1104@iiitranchi.ac.in<\/a><\/p>\n\n","category":["devchallenge","midnightchallenge","web3","webdev"]},{"title":"Learn Coding with CopilotKit: A Revolutionary Approach to Mastering Programming","pubDate":"Mon, 06 Jan 2025 12:13:11 +0000","link":"https:\/\/dev.to\/aryprogrammer\/learn-coding-with-copilotkit-a-revolutionary-approach-to-mastering-programming-3nlh","guid":"https:\/\/dev.to\/aryprogrammer\/learn-coding-with-copilotkit-a-revolutionary-approach-to-mastering-programming-3nlh","description":"<p>Learning to code can be an intimidating journey, especially when preparing for competitive programming or coding interviews. Questions like \u201cWhere do I start?\u201d or \u201cHow do I make sense of complex data structures and algorithms?\u201d often plague learners.  <\/p>\n\n<p>This is where <strong>Learn Coding with CopilotKit<\/strong> steps in. By leveraging cutting-edge tools like <strong>CopilotKit<\/strong>, <strong>CoAgents<\/strong>, and <strong>LangGraphs<\/strong>, I\u2019ve built an interactive platform designed to simplify coding education, making it intuitive, engaging, and visual.  <\/p>\n\n\n\n\n<h2>\n  \n  \n  <strong>What is Learn Coding with CopilotKit?<\/strong>\n<\/h2>\n\n<p><strong>Learn Coding with CopilotKit<\/strong> is an AI-powered platform aimed at transforming the way people approach coding. It bridges the gap between theoretical knowledge and practical problem-solving by providing:  <\/p>\n\n<ul>\n<li>AI-assisted solutions to coding challenges.\n<\/li>\n<li>Accurate solution via retry mechanism levaraging LangGraphs.\n<\/li>\n<li>A built-in code editor to write, run, and debug your code\u2014all in one place.\n<\/li>\n<\/ul>\n\n<p>The platform is perfect for beginners learning to code, students preparing for technical interviews, and competitive programmers looking to sharpen their skills.  <\/p>\n\n\n\n\n<h2>\n  \n  \n  <strong>Key Features<\/strong>\n<\/h2>\n\n<h3>\n  \n  \n  <strong>1. AI-Powered Problem Solving<\/strong>\n<\/h3>\n\n<p>At the heart of the platform lies <strong>CopilotKit<\/strong> and its <strong>CoAgents<\/strong>, which act as personal coding mentors. Users can input problems, and the AI provides step-by-step solutions while explaining the underlying logic.  <\/p>\n\n<p>The AI doesn\u2019t just solve problems; it teaches <strong>how to think like a programmer<\/strong>, breaking down complex problems into digestible steps.  <\/p>\n\n<h3>\n  \n  \n  <strong>2. Visual Learning<\/strong>\n<\/h3>\n\n<p>Coding is often a visual art, and the coagents and langgraphs help users connect the dots. They provide interactive visualizations of:  <\/p>\n\n<ul>\n<li>Code structure.\n<\/li>\n<li>Syntax and flow.\n<\/li>\n<li>Relationships between data structures.\n<\/li>\n<\/ul>\n\n<p>For example, if you\u2019re struggling with recursion or dynamic programming, LangGraphs and CoAgents illustrate how your code executes step-by-step, making abstract concepts tangible.  <\/p>\n\n<h3>\n  \n  \n  <strong>3. Built-in Code Editor via Piston<\/strong>\n<\/h3>\n\n<p>Gone are the days of juggling multiple tools! The platform includes a powerful <strong>built-in code editor<\/strong> where users can:  <\/p>\n\n<ul>\n<li>Write and edit their code.\n<\/li>\n<li>Run and debug programs.\n<\/li>\n<li>Experiment with real-time feedback from the AI.\n<\/li>\n<\/ul>\n\n<h3>\n  \n  \n  <strong>4. Comprehensive Learning Modules<\/strong>\n<\/h3>\n\n<p>The platform includes a curated set of <strong>data structure and algorithm (DSA)<\/strong> problems, competitive programming challenges, and interview-style questions, ensuring you\u2019re well-prepared for any coding challenge.  <\/p>\n\n<h3>\n  \n  \n  <strong>5. User-Centric Design<\/strong>\n<\/h3>\n\n<p>The frontend is built with <strong>Next.js<\/strong> and <strong>TailwindCSS<\/strong>, creating a sleek and responsive interface. Navigation is intuitive, and the learning flow is seamless\u2014perfect for long coding sessions.  <\/p>\n\n\n\n\n<h2>\n  \n  \n  <strong>How It Works<\/strong>\n<\/h2>\n\n<h3>\n  \n  \n  <strong>The Tech Stack<\/strong>\n<\/h3>\n\n<p>The project is built on a robust tech stack that balances performance, scalability, and usability:  <\/p>\n\n<ul>\n<li>\n<strong>Frontend<\/strong>: Next.js and TailwindCSS for a responsive and clean user experience.\n<\/li>\n<li>\n<strong>Backend<\/strong>: CopilotKit powers the backend, while CoAgents and LangGraphs provide the intelligence and interactivity.\n<\/li>\n<li>\n<strong>APIs<\/strong>: Integrated with <strong>Groq AI<\/strong> and <strong>Llama-70B<\/strong> for natural language understanding and problem-solving.\n<\/li>\n<\/ul>\n\n<h3>\n  \n  \n  <strong>Core Technologies<\/strong>\n<\/h3>\n\n<ul>\n<li>\n<strong>CopilotKit<\/strong>: Serves as the backbone of the platform, enabling AI-driven coding assistance.\n<\/li>\n<li>\n<strong>LangGraphs<\/strong>: Translates abstract coding concepts into easy-to-understand visual representations of the agent states.\n<\/li>\n<li>\n<strong>CoAgents<\/strong>: Allows seamless collaboration between users and AI for a guided learning experience. What I like the most is shared states!!<\/li>\n<\/ul>\n\n\n\n\n<h2>\n  \n  \n  <strong>The Inspiration Behind the Platform<\/strong>\n<\/h2>\n\n<p>As someone passionate about coding and teaching, I\u2019ve often seen students struggle with bridging the gap between <strong>theory<\/strong> and <strong>practice<\/strong>. Concepts like recursion, graph traversal, or dynamic programming can seem daunting until they\u2019re visualized and applied.  <\/p>\n\n<p>I wanted to create a platform that doesn\u2019t just throw solutions at users but helps them truly <strong>understand the \u201cwhy\u201d and \u201chow\u201d<\/strong> behind every line of code. This vision led to the development of Learn Coding with CopilotKit.  <\/p>\n\n\n\n\n<h2>\n  \n  \n  <strong>Challenges Faced During Development<\/strong>\n<\/h2>\n\n<h3>\n  \n  \n  <strong>1. Optimizing AI Integration<\/strong>\n<\/h3>\n\n<p>Integrating CoAgents and managing states while looking at the langgraph and while maintaining low latency posed a significant technical challenge. After several iterations, I optimized the backend to provide real-time responses without compromising accuracy.  <\/p>\n\n<h3>\n  \n  \n  <strong>2. Creating a Visual Agent State Experience with LangGraphs<\/strong>\n<\/h3>\n\n<p>Tuning the abstract inputs into interactive visuals wasn\u2019t straightforward. Mapping user inputs to LangGraphs required designing custom data pipelines and ensuring the visuals remained intuitive and dynamic.  <\/p>\n\n<h3>\n  \n  \n  <strong>3. Building for Scalability<\/strong>\n<\/h3>\n\n<p>The platform needed to support multiple users simultaneously without lag. Using <strong>Next.js server-side rendering<\/strong> and optimized API calls, I ensured a smooth user experience regardless of the load.  <\/p>\n\n\n\n\n<h2>\n  \n  \n  <strong>Accomplishments and Highlights<\/strong>\n<\/h2>\n\n<p>Despite the challenges, the platform has achieved several milestones:  <\/p>\n\n<ul>\n<li>Successfully integrated <strong>AI-driven problem-solving<\/strong> and <strong>visual learning<\/strong>.\n<\/li>\n<li>Created a sleek, user-friendly interface powered by modern technologies like ShadCN-UI and TailwindCSS.\n<\/li>\n<li>Delivered a seamless coding experience through the built-in editor and LangGraphs visualizations.\n<\/li>\n<\/ul>\n\n\n\n\n<h2>\n  \n  \n  <strong>Try It Yourself<\/strong>\n<\/h2>\n\n<p>Note: Best to Run Locally as API Keys might be exhausted by the time you read this.<\/p>\n\n<p>\ud83d\ude80 Ready to explore the future of coding education? Check it out here:<br><br>\n\ud83d\udc49 <a href=\"https:\/\/learn-coding-with-copilotkit.vercel.app\/\" rel=\"noopener noreferrer\">Live Platform: Learn Coding with CopilotKit<\/a>  <\/p>\n\n<p>\ud83d\udcf9 Want a sneak peek? Watch the demo videos:  <\/p>\n\n<ul>\n<li>\n<a href=\"https:\/\/youtu.be\/E1q67IDcdMU\" rel=\"noopener noreferrer\">Demo Video 1<\/a>\n<\/li>\n<li>\n<a href=\"https:\/\/youtu.be\/XpOeWhbxqOY\" rel=\"noopener noreferrer\">Demo Video 2<\/a>\n<\/li>\n<\/ul>\n\n<p>\ud83d\udcbb Interested in the code? Explore the GitHub repo:<br><br>\n\ud83d\udc49 <a href=\"https:\/\/github.com\/ARYPROGRAMMER\/Learn-Coding-with-Copilotkit\" rel=\"noopener noreferrer\">GitHub Repository<\/a>  <\/p>\n\n\n\n\n<h2>\n  \n  \n  <strong>Closing Thoughts<\/strong>\n<\/h2>\n\n<p>With <strong>Learn Coding with CopilotKit<\/strong>, I aim to revolutionize the way we approach coding education. By combining <strong>AI-driven problem-solving<\/strong>, <strong>visual learning<\/strong>, and an all-in-one platform, this tool empowers learners to take their coding skills to the next level.  <\/p>\n\n<p>If you\u2019ve ever struggled to visualize recursion, understand dynamic programming, or debug a stubborn piece of code, this platform is for you.  <\/p>\n\n<p>Let\u2019s make coding less intimidating and more accessible\u2014for everyone. \ud83d\ude80  <\/p>\n\n<h1>\n  \n  \n  CoAgents #CopilotKit #LangGraphs #LearnToCode #NextJS #WebDevelopment\n<\/h1>\n\n\n\n\n<p>Contact : <a href=\"mailto:arya.2023ug1104@iiitranchi.ac.in\">arya.2023ug1104@iiitranchi.ac.in<\/a><br>\nGithub : <a href=\"https:\/\/github.com\/ARYPROGRAMMER\" rel=\"noopener noreferrer\">https:\/\/github.com\/ARYPROGRAMMER<\/a><\/p>\n\n","category":["copilotkit","nextjs","langgraph","typescript"]},{"title":"Comprehensive Guide: Creating and Running the \"Sample Video Generator\" with Daytona","pubDate":"Thu, 12 Dec 2024 22:04:40 +0000","link":"https:\/\/dev.to\/aryprogrammer\/comprehensive-guide-creating-and-running-the-sample-video-generator-with-daytona-2895","guid":"https:\/\/dev.to\/aryprogrammer\/comprehensive-guide-creating-and-running-the-sample-video-generator-with-daytona-2895","description":"<p><strong><em>Transform text into engaging videos with cutting-edge AI technology<\/em><\/strong> \u2728<\/p>\n\n<p>In this blog post, we will explore the <strong>Sample Video Generation AI Website<\/strong> project and provide a detailed walkthrough of integrating and running it using the Daytona development environment. This guide will focus on utilizing Daytona's features to streamline the setup and deployment process while diving into the core technologies powering the application. Whether you're a beginner or an experienced developer, Daytona simplifies your workflow and helps you focus on what matters\u2014building amazing projects.<\/p>\n\n<p><strong>Recommended:<\/strong> <a href=\"https:\/\/vimeo.com\/1038743471?share=copy\" rel=\"noopener noreferrer\">Demo with Daytona Video 5 mins<\/a><\/p>\n\n<p><strong>Other Visuals:<\/strong>   <a href=\"https:\/\/vimeo.com\/1024767660\" rel=\"noopener noreferrer\">Demo Videos Generated<\/a> | <a href=\"https:\/\/vimeo.com\/1024864982?share=copy#t=0\" rel=\"noopener noreferrer\">Demo Run Website<\/a> <\/p>\n\n\n\n\n<h2>\n  \n  \n  <strong>Project Overview<\/strong>\n<\/h2>\n\n<p>The <strong>Sample Video Generation AI Website<\/strong> is a <strong>Next.js SaaS platform<\/strong> that allows users to generate engaging videos from text queries. Designed for marketers, educators, and social media creators, this app leverages cutting-edge technologies to offer a seamless and powerful video creation experience.<\/p>\n\n<h3>\n  \n  \n  <strong>Key Features<\/strong>\n<\/h3>\n\n<ul>\n<li>\ud83c\udfa5 <strong>AI Video Generation:<\/strong> Transform plain text into dynamic videos.<\/li>\n<li>\ud83d\udd12 <strong>Secure Authentication:<\/strong> Powered by Clerk for user login and sign-up.<\/li>\n<li>\ud83d\udde3\ufe0f <strong>Text-to-Speech:<\/strong> High-quality voice synthesis using ElevenLabs.<\/li>\n<li>\ud83c\udfac <strong>Captioning:<\/strong> Automatically generate captions with AssemblyAI.<\/li>\n<li>\ud83d\udcbb <strong>Modern UI:<\/strong> Beautiful design using Shadcn\/UI, Framer Motion, and Tailwind CSS.<\/li>\n<li>\ud83d\udcc2 <strong>Database Management:<\/strong> Manage user and video data with Drizzle ORM and Neon Database.<\/li>\n<li>\ud83e\udd16 <strong>AI Integrations:<\/strong> Utilize OpenAI, Hugging Face, and more for creative outputs.<\/li>\n<\/ul>\n\n\n\n\n<h2>\n  \n  \n  <strong>Technologies Used<\/strong>\n<\/h2>\n\n<h3>\n  \n  \n  <strong>Frontend<\/strong>\n<\/h3>\n\n<ul>\n<li>\n<strong>Next.js<\/strong>: A React framework for building high-performance applications.<\/li>\n<li>\n<strong>Tailwind CSS<\/strong>: Utility-first CSS for styling.\n<\/li>\n<li>\n<strong>Shadcn\/UI + Sonner<\/strong>: Enhances UI components and toast notifications.\n<\/li>\n<li>\n<strong>Spline<\/strong>: 3D model integration for interactive visuals.\n<\/li>\n<\/ul>\n\n<h3>\n  \n  \n  <strong>Backend<\/strong>\n<\/h3>\n\n<ul>\n<li>\n<strong>Drizzle ORM<\/strong>: Database abstraction for Neon Database.\n<\/li>\n<li>\n<strong>Neon Database<\/strong>: Cloud-based database for user and file management.\n<\/li>\n<\/ul>\n\n<h3>\n  \n  \n  <strong>APIs and Libraries<\/strong>\n<\/h3>\n\n<ul>\n<li>\n<strong>Remotion Video<\/strong>: Generate dynamic videos from React components.\n<\/li>\n<li>\n<strong>OpenAI API<\/strong>: Natural language understanding and text-based content creation.\n<\/li>\n<li>\n<strong>ElevenLabs<\/strong>: High-quality text-to-speech.\n<\/li>\n<li>\n<strong>AssemblyAI<\/strong>: Automated audio intelligence for captioning.\n<\/li>\n<li>\n<strong>Hugging Face<\/strong>: Access to pre-trained AI models for video enhancements.\n<\/li>\n<\/ul>\n\n\n\n\n<h2>\n  \n  \n  <strong>Why Use Daytona for Development?<\/strong>\n<\/h2>\n\n<p>Daytona simplifies development and deployment workflows by providing an efficient environment for creating, managing, and deploying projects. It supports features like:  <\/p>\n\n<ul>\n<li>Automated containerized environments.\n<\/li>\n<li>Workspace management for remote collaboration.\n<\/li>\n<li>Pre-configured setups for rapid project bootstrapping.\n<\/li>\n<\/ul>\n\n<p>Daytona revolutionizes the way developers create and deploy applications by offering:<\/p>\n\n<ul>\n<li>\u2705 <strong>Pre-configured, containerized environments:<\/strong> Eliminate setup headaches.<\/li>\n<li>\u2705 <strong>Integrated workspace management:<\/strong> Perfect for remote collaboration.<\/li>\n<li>\u2705 <strong>Streamlined development:<\/strong> Focus on building while Daytona handles the rest.<\/li>\n<\/ul>\n\n\n\n\n<h2>\n  \n  \n  <strong>Getting Started with Daytona<\/strong>\n<\/h2>\n\n<p>Here\u2019s a step-by-step guide to integrating and running the <strong>Sample Video Generator<\/strong> using Daytona.<\/p>\n\n\n\n\n<h3>\n  \n  \n  <strong>Step 1: Install Daytona<\/strong>\n<\/h3>\n\n<p>First, install the Daytona CLI by following the official <a href=\"https:\/\/daytona.dev\/docs\/installation\" rel=\"noopener noreferrer\">Daytona installation guide<\/a>. Ensure you have Docker installed and running on your system.<\/p>\n\n<h3>\n  \n  \n  Linux\/macOS\n<\/h3>\n\n<p>Run the following commands in your terminal:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>curl <span class=\"nt\">-sfL<\/span> https:\/\/download.daytona.io\/daytona\/install.sh | <span class=\"nb\">sudo <\/span>bash <span class=\"o\">&amp;&amp;<\/span> daytona server <span class=\"nt\">-y<\/span> <span class=\"o\">&amp;&amp;<\/span> daytona\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<h3>\n  \n  \n  Windows\n<\/h3>\n\n<p>Use PowerShell to install Daytona:<br>\nThis command downloads and installs Daytona and runs the Daytona Server:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>$architecture = if ($env:PROCESSOR_ARCHITECTURE -eq \"AMD64\") { \"amd64\" } else { \"arm64\" }\nmd -Force \"$Env:APPDATA\\bin\\daytona\"; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.SecurityProtocolType]'Tls,Tls11,Tls12';\nInvoke-WebRequest -URI \"https:\/\/download.daytona.io\/daytona\/latest\/daytona-windows-$architecture.exe\" -OutFile \"$Env:APPDATA\\bin\\daytona\\daytona.exe\";\n$env:Path += \";\" + $Env:APPDATA + \"\\bin\\daytona\"; [Environment]::SetEnvironmentVariable(\"Path\", $env:Path, [System.EnvironmentVariableTarget]::User);\ndaytona serve;\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Verify the installation:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>daytona <span class=\"nt\">--version<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n\n\n\n\n<h3>\n  \n  \n  <strong>Step 2: Create a Daytona Workspace<\/strong>\n<\/h3>\n\n<p>Use Daytona to clone and set up the project in a containerized environment.<\/p>\n\n<p>Run the following command:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>daytona create https:\/\/github.com\/daytonaio\/sample-video-generator.git\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Daytona will automatically set up a workspace with the provided repository. It will:<\/p>\n\n<ul>\n<li>Clone the project into a new Daytona workspace.<\/li>\n<li>Automatically configure the workspace with the .devcontainer file.<\/li>\n<\/ul>\n\n\n\n\n<h3>\n  \n  \n  <strong>Step 3: Configure Environment Variables<\/strong>\n<\/h3>\n\n<p>Environment variables are crucial for connecting APIs, databases, and authentication services. Navigate to the root directory of your Daytona workspace and create a <code>.env.local<\/code> file.<\/p>\n\n<p>Add the following variables:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>NEXT_PUBLIC_DRIZZLE_DATABASE_URL=\nNEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=\nCLERK_SECRET_KEY=\nNEXT_PUBLIC_CLERK_SIGN_IN_URL=\/sign-in\nNEXT_PUBLIC_CLERK_SIGN_UP_URL=\/sign-up\nNEXT_PUBLIC_ELEVEN_LABS_API_KEY=\nNEXT_PUBLIC_FIREBASE_API_KEY=\nNEXT_PUBLIC_CAPTION_API=\nNEXT_PUBLIC_OPENAI_API_KEY=\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Replace the placeholders with your API keys and database URLs.<\/p>\n\n\n\n\n<h3>\n  \n  \n  <strong>Step 4: Build and Start the Project<\/strong>\n<\/h3>\n\n<p>Daytona includes a pre-configured <code>.devcontainer\/devcontainer.json<\/code> file to streamline the setup. This file specifies settings for the development environment.<\/p>\n\n<p>Open the workspace using Daytona:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>daytona code\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Install dependencies:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm <span class=\"nt\">--legacy-peer-deps<\/span> i\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Start the development server:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm run dev\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<p>The app will now be running on <code>localhost:3000<\/code> in your Daytona environment.<\/p>\n\n\n\n\n<h3>\n  \n  \n  <strong>Step 5: Features to Explore<\/strong>\n<\/h3>\n\n<p>Once the application is running, explore its core features:  <\/p>\n\n<ol>\n<li>\n<strong>Authentication<\/strong>: Sign up or log in using Clerk.\n<\/li>\n<li>\n<strong>AI Video Generation<\/strong>: Input a query to generate a video using Remotion and AI APIs.\n<\/li>\n<li>\n<strong>Text-to-Speech<\/strong>: Generate high-quality voiceovers using ElevenLabs.\n<\/li>\n<li>\n<strong>Captions<\/strong>: Add accurate captions with AssemblyAI.\n<\/li>\n<\/ol>\n\n\n\n\n<h2>\n  \n  \n  <strong>Playing around with Daytona<\/strong>\n<\/h2>\n\n<h3>\n  \n  \n  <strong>Customizing the Dev Environment<\/strong>\n<\/h3>\n\n<p>Daytona\u2019s <code>.devcontainer\/devcontainer.json<\/code> file specifies the development container. You can customize it for specific needs like adding new extensions, port mappings, or post-create commands.<\/p>\n\n<p>Example snippet from <code>devcontainer.json<\/code>:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"name\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"Next.js Video Generation Project\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"image\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"mcr.microsoft.com\/devcontainers\/javascript-node:0-20\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"forwardPorts\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">[<\/span><span class=\"mi\">3000<\/span><span class=\"p\">],<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"customizations\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"vscode\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n      <\/span><span class=\"nl\">\"settings\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"javascript.validate.enable\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"kc\">false<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"nl\">\"editor.formatOnSave\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"kc\">true<\/span><span class=\"w\">\n      <\/span><span class=\"p\">},<\/span><span class=\"w\">\n      <\/span><span class=\"nl\">\"extensions\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">[<\/span><span class=\"w\">\n        <\/span><span class=\"s2\">\"esbenp.prettier-vscode\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"s2\">\"dbaeumer.vscode-eslint\"<\/span><span class=\"p\">,<\/span><span class=\"w\">\n        <\/span><span class=\"s2\">\"softwaredotcom.dracula-theme\"<\/span><span class=\"w\">\n      <\/span><span class=\"p\">]<\/span><span class=\"w\">\n    <\/span><span class=\"p\">}<\/span><span class=\"w\">\n  <\/span><span class=\"p\">},<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"postCreateCommand\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"npm --legacy-peer-deps i\"<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n\n<\/div>\n\n\n\n<p>Try to:<\/p>\n\n<ul>\n<li>Add more VSCode extensions for specific needs.<\/li>\n<li>Modify forwarded ports for additional services.<\/li>\n<li>Customize the postCreateCommand to install additional dependencies.<\/li>\n<\/ul>\n\n\n\n\n<h3>\n  \n  \n  <strong>Deploying with Daytona<\/strong>\n<\/h3>\n\n<p>Daytona simplifies deploying your application to cloud environments. Once you\u2019re ready to deploy, follow these steps:  <\/p>\n\n<ol>\n<li>Push your project to a Git repository.\n<\/li>\n<li>Use Daytona\u2019s deployment tools to containerize and deploy your app.<\/li>\n<\/ol>\n\n<p>For detailed deployment steps, refer to the <a href=\"https:\/\/www.daytona.io\/docs\/about\/getting-started\/\" rel=\"noopener noreferrer\">Daytona Docs<\/a><\/p>\n\n\n\n\n<h3>\n  \n  \n  <strong>Optional: Accessing the Workspace<\/strong>\n<\/h3>\n\n<p>Daytona allows you to share your workspace for remote collaboration. Use the workspace ID to provide access to team members.  <\/p>\n\n<p>For this project:<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>Workspace ID: aryprogrammer-sample-vid-nmuit3803l\n<\/code><\/pre>\n\n<\/div>\n\n\n\n\n\n\n<h2>\n  \n  \n  <strong>Conclusion<\/strong>\n<\/h2>\n\n<p>By leveraging Daytona, you can set up, develop, and run the <strong>Sample Video Generator<\/strong> project with minimal friction. Daytona's containerized environment and pre-configured settings make it a perfect choice for projects that require seamless development workflows.<\/p>\n\n<p>The Sample Video Generation AI Website project demonstrates how modern tools like Next.js, Remotion, and Daytona can simplify the development and deployment of AI-powered applications. With Daytona, setting up and managing complex projects becomes a breeze, allowing you to focus on building innovative solutions.<\/p>\n\n<p>Start your journey today and let Daytona bring your ideas to life!<\/p>\n\n","category":["daytona","nextjs","javascript","postgres"]},{"title":"Building Mindful: A Mental Wellness App with Flutter, Node.js, AI, and Clean Architecture \ud83c\udf3f","pubDate":"Sat, 28 Sep 2024 10:01:50 +0000","link":"https:\/\/dev.to\/aryprogrammer\/building-mindful-a-mental-wellness-app-with-nodejs-ai-and-clean-architecture-3n9d","guid":"https:\/\/dev.to\/aryprogrammer\/building-mindful-a-mental-wellness-app-with-nodejs-ai-and-clean-architecture-3n9d","description":"<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbera8bi3gftjc6qjnajo.png\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbera8bi3gftjc6qjnajo.png\" alt=\"App Logo\" width=\"642\" height=\"389\"><\/a><\/p>\n\n<p><a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fsocialify.git.ci%2FARYPROGRAMMER%2FMindful-App%2Fimage%3Fdescription%3D1%26descriptionEditable%3DMindful%2520is%2520a%2520mental%2520wellness%2520app%2520designed%2520to%2520support%2520users%2520in%2520managing%2520stress%2520and%2520anxiety%26font%3DSource%2520Code%2520Pro%26language%3D1%26name%3D1%26owner%3D1%26pattern%3DDiagonal%2520Stripes%26stargazers%3D1%26theme%3DDark\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fsocialify.git.ci%2FARYPROGRAMMER%2FMindful-App%2Fimage%3Fdescription%3D1%26descriptionEditable%3DMindful%2520is%2520a%2520mental%2520wellness%2520app%2520designed%2520to%2520support%2520users%2520in%2520managing%2520stress%2520and%2520anxiety%26font%3DSource%2520Code%2520Pro%26language%3D1%26name%3D1%26owner%3D1%26pattern%3DDiagonal%2520Stripes%26stargazers%3D1%26theme%3DDark\" alt=\"Mindful-App\" width=\"1280\" height=\"640\"><\/a><\/p>\n\n<p><a href=\"https:\/\/github.com\/ARYPROGRAMMER\/Mindful-App\/actions\" rel=\"noopener noreferrer\"><img src=\"https:\/\/github.com\/travisjeffery\/timecop\/workflows\/CI\/badge.svg\" alt=\"Build Status\" width=\"83\" height=\"20\"><\/a><br>\n<a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fversion-2.1.2-green\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fimg.shields.io%2Fbadge%2Fversion-2.1.2-green\" alt=\"version\" width=\"90\" height=\"20\"><\/a><\/p>\n\n<p>\n    <a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fimg.shields.io%2Fbadge%2Ffirebase-ffca28%3Fstyle%3Dfor-the-badge%26logo%3Dfirebase%26logoColor%3Dblack\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fimg.shields.io%2Fbadge%2Ffirebase-ffca28%3Fstyle%3Dfor-the-badge%26logo%3Dfirebase%26logoColor%3Dblack\" width=\"109\" height=\"28\"><\/a>\n    <a href=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fimg.shields.io%2Fbadge%2FLICENSE-MIT-green\" class=\"article-body-image-wrapper\"><img src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fimg.shields.io%2Fbadge%2FLICENSE-MIT-green\" width=\"90\" height=\"20\"><\/a>\n<\/p>\n\n<p><strong>AI USED<\/strong> : LLAMA-8B-8192, FACE EMOTION RECOGNITION MODEL, GEMINI\/ANTHROPIC\/MISTRAL SUPPORTED (API_KEY REQUIRED)<br>\n<strong>APP STATUS<\/strong> : ALL CORE FUNCTIONALITIES WORKING (Deployed NodeJs &amp; Postgresql on Render)<\/p>\n<h2>\n  \n  \n  What's New in v2.1.2 (<strong>Stable Release with Redis Phase 3 Integration<\/strong>)\n<\/h2>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>        - **Improved AI Chat Functionality**\n        - **Redis DS Change - HashMaps**\n        - **Minor Bug fixes**\n        - **Crash Handlers are improved**\n        - **Improved Overall Performance - Implemented Impeller**\n        - **Settings Tab is now Better**\n        - **Redis connection fixes and data privacy improvised**\n        - **Redis Cloud Implementation and Fetching in Beta Phase**\n        - **Added Redis-base to support syncfusion**\n        - **New Feature**: Implemented Syncfusion and Redis for low latency**\n\n        ### Issues are being Resolved - Redis Full-Integration Phase 3\n<\/code><\/pre>\n\n<\/div>\n<p><strong>KEYNOTE : FINDINGS WHILE USING AI APIs<\/strong><\/p>\n\n<ol>\n<li><p><strong>DEPLOYMENT AND UNREFINED USAGE<\/strong> IS THE SIMPLISTIC APPROACH TO INTEGRATION. IT TAKES LESS TIME TO GENERATE THE CONTENT AND FETCH IT IN JSON Format for further processing by the DOMAIN LAYER entities.<\/p><\/li>\n<li><p>MANY OF THE PAID APIs ESPECIALLY ANTHROPIC-CLAUDE-SONET-3.5 AND MISTRAL-LLAMA-7.3B REQUIRE <strong>SLIGHLTY MORE PROCESSING TIME<\/strong> THEREBY INCREASING THE REQ-RES-STATUS TIME.<\/p><\/li>\n<li><p><strong>FINE TUNING OF THE MODELS<\/strong> IS A TIME TAKING PROCEDURE AS THE DATASET GEN FOR REQUIRED OUTPUT IS TO BE MANUALLY GENERATED OR IMPLEMENTED.<\/p><\/li>\n<li><p>THE AI-API USED FOR ILLUSTRATION PURPOSES \"LLAMA-8B-8192\" (previously \"GEMINI-1.5-FLASH\") DOES PROVIDE ACCURATE RESPONSE FOR THE FOLLOWING SITUATION (WHICH \"GEMINI-1.5-FLASH\" DIDN'T) :<br>\n    <strong>TIME SYNC<\/strong> ACROSS THE APP (i.e definition of morning etc.)<br>\n    <strong>PROPER JSON FORMATING<\/strong> (INCLUDES THE WORD \"json\" IN RESPONSE <br>\n      WHICH IS TO BE OMIITED SPECIFICALLY FOR THE INNER LAYER <br>\n      ENITITES TO FUNCTION) <\/p><\/li>\n<li><p><strong>ANTHROPIC-AI\/SDK API<\/strong>(claude-3-5-sonnet) WAS FOUND TO BE MOST SUITABLE AS COMPARED TO gpt-3.5-turbo. <\/p><\/li>\n<\/ol>\n\n<p><a href=\"https:\/\/vimeo.com\/1018872545?share=copy\" rel=\"noopener noreferrer\">DEMO LINK OF WORKING<\/a><\/p>\n\n<p><a href=\"https:\/\/vimeo.com\/1013864504\" rel=\"noopener noreferrer\">PREPRODUCTION INSIDERS<\/a><\/p>\n<h2>\n  \n  \n  <strong>Introduction<\/strong>\n<\/h2>\n\n<p>In today\u2019s fast-paced world, where stress and anxiety have become all too common, I wanted to create something meaningful\u2014something that could help people reclaim their mental well-being. That\u2019s how <strong>Mindful<\/strong>, a mental wellness app, was born. This post will walk you through the journey of building <em>Mindful<\/em>, from choosing the right technologies to incorporating AI for personalized advice and relaxation features.<\/p>\n<h3>\n  \n  \n  What is Mindful?\n<\/h3>\n\n<p><strong>Mindful<\/strong> is a personalized mental wellness companion designed to help users manage their stress and anxiety. Through personalized AI-driven advice and a soothing music player, <em>Mindful<\/em> aims to guide users toward better mental health and mindfulness. ADDED FOR EXTRA COMFORT...<\/p>\n\n\n<h2>\n  \n  \n  Features\n<\/h2>\n<h3>\n  \n  \n  \ud83e\udde0 Personalized AI-Driven Advice\n<\/h3>\n\n<p>One of the core features of <em>Mindful<\/em> is the personalized advice system powered by LLAMA-8B-8192 (previously : Gemini), an AI developed by meta and fine tuned by me to offer mental health tips tailored to individual needs. While <em>LLAMA-8B-8192<\/em> (previously : Gemini) powers the current version, <em>I\u2019ve written the code for other APIs<\/em> which require paid API_KEYS FOR integration with more advanced AI systems like <strong>Anthropic<\/strong>, <strong>Open AI<\/strong>, and <strong>Mistral<\/strong>. They require <strong>PAID API KEYS<\/strong>.<\/p>\n<h3>\n  \n  \n  \ud83c\udfb6 Relaxation Music Player\n<\/h3>\n\n<p>To further enhance mindfulness, <em>Mindful<\/em> includes a <strong>curated music player<\/strong> with a library of relaxing tracks to help users unwind. Whether you're meditating or just taking a break, the app's music player offers a peaceful escape. Feel free to add your playlist to the db.<\/p>\n<h3>\n  \n  \n  \ud83c\udfa8 Intuitive Design\n<\/h3>\n\n<p>Mental wellness apps should be stress-free to use. With <em>Mindful<\/em>, the focus is on simplicity and functionality. The user interface is designed to be minimalistic and intuitive, providing users with easy access to resources without overwhelming them. I found inspiration from various sources\u2014more on that below!<\/p>\n\n\n<h2>\n  \n  \n  Architecture and Technologies\n<\/h2>\n\n<p>Building an app like <em>Mindful<\/em> requires a solid foundation. Here\u2019s a breakdown of the technologies and architecture that power the app:<\/p>\n<h3>\n  \n  \n  \ud83d\ude80 Backend: Node.js, PostgreSQL, and Firebase\n<\/h3>\n\n<p>The backend is built with <strong>Node.js<\/strong>, providing the scalability needed for growing user traffic. <strong>PostgreSQL<\/strong> stores user data (with your key) securely, while <strong>Firebase<\/strong> manages real-time syncing with auth, making the app fast and responsive.<strong>Tensorflow<\/strong> to create the FER Model using FER2013 Dataset.<\/p>\n<h3>\n  \n  \n  \ud83e\uddf1 Clean Architecture and SOLID Principles\n<\/h3>\n\n<p>To ensure that <em>Mindful<\/em> is maintainable and future-proof, I adopted <strong>clean architecture<\/strong> and followed the <strong>SOLID principles<\/strong>. This modular approach separates business logic, user interfaces, and infrastructure, allowing for easy updates and testing as the app grows.<\/p>\n<h4>\n  \n  \n  Key Architectural Decisions:\n<\/h4>\n\n<ul>\n<li><p><strong>ModelView-ViewModel pattern<\/strong> to handle user requests and business logic.<\/p><\/li>\n<li><p><strong>Separation of concerns<\/strong> for better code management and maintainability.<\/p><\/li>\n<li><p><strong>Extensibility<\/strong> built-in so new AI features and wellness tools can be integrated smoothly in future updates.<\/p><\/li>\n<\/ul>\n<h3>\n  \n  \n  \ud83d\udcbb Check Out the Code\n<\/h3>\n\n<p>If you're curious to see how the app is structured or want to contribute, head over to the <a href=\"https:\/\/github.com\/ARYPROGRAMMER\/Mindful-App\" rel=\"noopener noreferrer\">GitHub Repository<\/a>.<br>\nFEEL FREE TO DOWNLOAD THE RELEASE BUT MAKE SURE TO FIRST RUN THE SERVER.<\/p>\n\n\n<h2>\n  \n  \n  The Machine Learning Model: AI-Powered Mental Health Advice\n<\/h2>\n\n<p>The AI FACE DETECTION engine is central to the <em>Mindful<\/em> experience. I trained the initial model using <strong>TensorFlow<\/strong>, and now the app provides correct detection based on user camera input. It can be further used for many purposes.<\/p>\n\n<p><strong>Want to check out the model?<\/strong><br><br>\nHere\u2019s the <a href=\"https:\/\/colab.research.google.com\/drive\/177N-KOyAHfuTYAC0UyukEh7iiiQLL1jq?usp=sharing\" rel=\"noopener noreferrer\">Colab Notebook<\/a> where I trained and fine-tuned the model. Feel free to explore, experiment, or even enhance the model if you're interested in contributing to the AI aspect!<\/p>\n\n\n<h2>\n  \n  \n  UI Inspiration: Designing Mindful\u2019s Look and Feel\n<\/h2>\n\n<p>Designing a mental wellness app requires careful consideration of both aesthetics and functionality. I wanted the user experience to be as stress-free as possible, so I sought out minimalist, calming design elements.<\/p>\n\n<p>I found inspiration on <strong>Figma<\/strong>, where I designed and prototyped <em>Mindful\u2019s<\/em> UI. The app features soft colors, intuitive buttons, and easy navigation to reduce user overwhelm.<\/p>\n\n<p><strong>Interested in the design?<\/strong><br><br>\nCheck out the <a href=\"https:\/\/www.figma.com\/design\/WoPdJjhluqyJHHm8FaysPt\/Mental-Health-App-Design-(Community)?node-id=0-1&amp;t=BJUL3kdEOYtKaZlw-0\" rel=\"noopener noreferrer\">Figma File<\/a> to see how I brought the UI to life. It\u2019s a work-in-progress, so feel free to offer feedback!<\/p>\n\n\n<h2>\n  \n  \n  Architecture\n<\/h2>\n\n<p>The <em>Mindful<\/em> app employs a clean architecture pattern, allowing for separation of concerns and enhancing maintainability. This design makes the app adaptable to future changes and ensures a robust user experience. By adhering to SOLID principles, <em>Mindful<\/em> promotes best practices that facilitate development and testing.<\/p>\n<h2>\n  \n  \n  Getting Started\n<\/h2>\n\n<p>To run <em>Mindful<\/em> locally, follow these steps:<\/p>\n\n<ol>\n<li>\n<strong>Clone the repository<\/strong>:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>   git clone https:\/\/github.com\/ARYPROGRAMMER\/mindful.git\n   <span class=\"nb\">cd <\/span>server\/mental-health-api\/\n<\/code><\/pre>\n\n<\/div>\n\n\n<ol>\n<li>\n<strong>Install dependencies<\/strong>:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>   npm <span class=\"nb\">install<\/span>\n<\/code><\/pre>\n\n<\/div>\n\n\n<ol>\n<li>\n<strong>Setup environment variables (OPTIONAL, USE MINE)<\/strong>:\nChanges in API_KEY (if needed) to be done in :\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>   mental-health-api\/\n   \u251c\u2500\u2500...          \n   \u251c\u2500\u2500...         \n   \u251c\u2500\u2500...          \n   \u251c\u2500\u2500...        \n   \u251c\u2500\u2500 server.js          # Main server file\n   \u251c\u2500\u2500 infrastructure\/               \n       \u251c\u2500\u2500 geminiai\/   \n       \u251c   \u2514\u2500\u2500 geminiService.js  # NEW API KEY ADDING SLOT\n       \u2514\u2500\u2500\u2500\u2500 db\/    \n              \u2514\u2500\u2500 index.js  # PostGres Setup\n\n<\/code><\/pre>\n\n<\/div>\n\n\n<ol>\n<li>\n<strong>Run the Server<\/strong>:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>   npm start\n<\/code><\/pre>\n\n<\/div>\n\n\n<ol>\n<li>\n<strong>Run the App<\/strong>:\n<\/li>\n<\/ol>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>   <span class=\"nb\">cd<\/span> ..\/..\/lib\/\n   flutter clean\n   flutter pub get\n   flutter run\n\n<\/code><\/pre>\n\n<\/div>\n\n\n<p>Alternatively you could use :<br>\n<\/p>\n\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>   flutter build apk\n<\/code><\/pre>\n\n<\/div>\n\n\n\n<ol>\n<li>\n<p><strong>Structure of DB<\/strong>:<\/p>\n<h2>\n  \n  \n  Songs Table\n<\/h2>\n\n<p>This is the structure of the <code>songs<\/code> table in the <code>public<\/code> schema.<\/p>\n\n<div class=\"table-wrapper-paragraph\"><table>\n<thead>\n<tr>\n<th>Column<\/th>\n<th>Type<\/th>\n<th>Collation<\/th>\n<th>Nullable<\/th>\n<th>Default<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>title<\/code><\/td>\n<td><code>character varying(100)<\/code><\/td>\n<td><\/td>\n<td><code>false<\/code><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><code>author<\/code><\/td>\n<td><code>character varying(100)<\/code><\/td>\n<td><\/td>\n<td><code>false<\/code><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><code>songlink<\/code><\/td>\n<td><code>character varying(256)<\/code><\/td>\n<td><\/td>\n<td><code>false<\/code><\/td>\n<td><\/td>\n<\/tr>\n<tr>\n<td><code>id<\/code><\/td>\n<td><code>bigint<\/code><\/td>\n<td><\/td>\n<td><code>false<\/code><\/td>\n<td><code>nextval('songs_id_seq'::regclass)<\/code><\/td>\n<\/tr>\n<tr>\n<td><code>imageid<\/code><\/td>\n<td><code>character varying(256)<\/code><\/td>\n<td><\/td>\n<td><code>true<\/code><\/td>\n<td><\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/div>\n<h3>\n  \n  \n  Notes:\n<\/h3>\n\n<ul>\n<li>The <code>id<\/code> column is auto-incremented using the <code>nextval('songs_id_seq'::regclass)<\/code> function.<\/li>\n<li>\n<code>imageid<\/code> is optional and can store a link or identifier for the image associated with the song.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n<h2>\n  \n  \n  What\u2019s Next?\n<\/h2>\n\n<p>I\u2019m planning to continuously evolve <em>Mindful<\/em>, with upcoming features like meditation sessions, enhanced AI capabilities, and more personalized recommendations. The goal is to build a complete mental wellness toolkit right in your pocket.<\/p>\n\n<p>If you\u2019d like to contribute ideas or code, please do! <em>Mindful<\/em> is an open-source project, and I\u2019m excited to see how the community can help shape its future. You can submit pull requests or open issues on the <a href=\"https:\/\/github.com\/ARYPROGRAMMER\/Mindful-App\" rel=\"noopener noreferrer\">GitHub Repository<\/a>.<\/p>\n\n\n\n\n<h2>\n  \n  \n  Final Thoughts\n<\/h2>\n\n<p>Creating <em>Mindful<\/em> has been an enriching experience, and I hope it can positively impact users by helping them manage stress, anxiety, and overall mental health. The combination of AI-driven advice, relaxation tools, and user-friendly design make <em>Mindful<\/em> a comprehensive companion for mental wellness.<\/p>\n\n<p>Mental health is as important as physical health, and <em>Mindful<\/em> strives to be a tool that helps users prioritize their well-being in a meaningful and practical way.<\/p>\n\n<p><strong>Thanks for reading!<\/strong> I\u2019d love to hear your thoughts on the project or discuss anything related to mental wellness tech. Feel free to leave a comment or reach out directly.<\/p>\n\n\n\n\n<h2>\n  \n  \n  Contact ME\n<\/h2>\n\n<p>For questions or feedback, please reach out to me at:<\/p>\n\n<ul>\n<li>\n<strong>Email id<\/strong>: <a href=\"mailto:arya.2023ug1104@iiitranchi.ac.in\">arya.2023ug1104@iiitranchi.ac.in<\/a>\n<\/li>\n<li>\n<strong>GitHub<\/strong>: <a href=\"https:\/\/github.com\/ARYPROGRAMMER\" rel=\"noopener noreferrer\">ARYPROGRAMMER<\/a>\n<\/li>\n<\/ul>\n\n\n\n\n<p><em>Let\u2019s make mindfulness accessible TO ALL, one step at a time.<\/em><\/p>\n\n","category":["node","flutter","llama8b","firebase"]}]}}