dont use tsx and shado ui componenetsdevelop a web app using mern stack… use jsx only don't use tsx (typescript)main parts of the website...-hero section- a 3d sphere(earth with topics) rotating..(right side)a para about learnShpere and button to start searchinguser login/register..user verification using otp method using nodemailer..-user profile...user details and updating option..and progress of the course he registered with attractive chart(pie,bar etc...)- in the home pagean attractive form to user enter if the matching topic is already theee in the database that should be shown..and below that suggestion of few topics(java,python,web development)while genrratiing attractive laoding should be shown user should get bore like that...in the backend microservice should be followed.. like for the user entered topic let say java the main subtopics of java should be generated... like history,basics info,data types,loops, control statements...like this atleast 15-25 sub-modules should be generated... in another request these sub-topics detailed explination along with simple example.. should be generated.....user after completing each sub module able to track progress.. by marking this completed.. like that....and also user should be able to the save the course that should be shown in his profile...highly respsoive navigation tree for user to navigate from one sub topic to another alraedy available course in database should be shown to the user(other user coure just course nit their progresss).. if he wants to learn the same he should be able to...-video call option...if one use schedule a video call with name(like description of the video) meeting and share the meeting id with other users.. they should be able to join is the have meeting id...for the other user if description matched with usr interest that video call should be suggested.. if the host permits he also should be able to join the meet....vedio call should have the features of simple google features... like sharing scrren video on/of speaker(microspheone on/off) and chat option exactly like google meet...also after the meet summary of that meet should e generated and user shoulbe able to access it....-admin panel..in this admin able to login after that cru operation of the users of the website...overview of the website(like registed users using dashboard chart etcc…)crud operation of the course in the database... and option to generate the course and store in database....use the below api to generate all the contents...import ModelClient, { isUnexpected } from "@azure-rest/ai-inference";import { AzureKeyCredential } from "@azure/core-auth";const token = "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";const endpoint = "https://models.github.ai/inference";const model = "xai/grok-3";export async function main() { const client = ModelClient(endpoint, new AzureKeyCredential(token)); const response = await client.path("/chat/completions").post({ body: { messages: [ { role: "system", content: "You are an expert Java tutor creating a W3Schools-style Java programming course for LearnSphere, a web app for interactive learning. Your task is to generate a detailed course for beginner-to-intermediate learners, focusing exclusively on topic explanations and code snippets, formatted in Markdown for web integration. Follow these guidelines:\n\n1. Course Structure:\n - Introduction (300–400 words): Explain Java’s purpose, key features (platform independence, OOP, robustness), and applications (e.g., web, mobile, enterprise). Highlight why beginners should learn Java.\n - Modules: Create 6 modules covering:\n - Module 1: Variables and Data Types\n - Module 2: Control Flow (if-else, switch, loops)\n - Module 3: Functions (methods, parameters, return types)\n - Module 4: Object-Oriented Programming (classes, objects, inheritance, polymorphism)\n - Module 5: Arrays (single and multi-dimensional, array operations)\n - Module 6: Exception Handling (try-catch, custom exceptions)\n - Each module must include:\n - Explanation (300–500 words): Clear, beginner-friendly, with real-world analogies (e.g., variables as containers, loops as recipe steps). Explain concepts thoroughly, avoiding jargon.\n - Code Snippets (2–3 per module): Executable Java code (JDK 17-compatible) with detailed comments, tied to practical examples (e.g., quiz app, game score tracker, calculator). Include output comments.\n2. Content Requirements:\n - Cover core Java concepts comprehensively, ensuring accuracy and relevance.\n - Use engaging, practical examples (e.g., a game for loops, a banking app for OOP).\n - Ensure code is concise, functional, and error-free.\n3. Exclusions:\n - Do not include quizzes or progress-tracking JSON.\n4. Format:\n - Use Markdown with consistent headings (# for course title, ## for modules, ### for sections).\n - Enclose code in java blocks.\n - Ensure output is ~4,000–6,000 tokens for completeness.\n5. **Tone and Style**:\n - Friendly, encouraging, and clear, like W3Schools.\n - Explain technical terms simply for beginners.\n6. **Constraints**:\n - Use JDK 17-compatible code without external libraries (e.g., java.util only).\n - Avoid DeepSearch to stay within free tier limits.", }, { role: "user", content: "Generate a detailed Java programming course for LearnSphere, mimicking W3Schools’ style, focusing only on topic explanations and code snippets. Include:\n- An introduction (300–400 words) explaining Java’s purpose, features, and applications.\n- Six modules: (1) Variables and Data Types, (2) Control Flow, (3) Functions, (4) Object-Oriented Programming, (5) Arrays, (6) Exception Handling.\n- Each module must have:\n - A detailed, beginner-friendly explanation (300–500 words).\n - 2–3 commented, executable Java code snippets (e.g., for a quiz app, game, or calculator).\nEnsure the course is engaging, practical, and formatted in Markdown with clear headings (#, ##, ###) and code blocks (java). Use a friendly, W3Schools-like tone, and ensure all code is JDK 17-compatible. Exclude quizzes and progress tracking.", }, ], temperature: 1, top_p: 1, model: model, }, }); if (isUnexpected(response)) { throw response.body.error; } console.log(response.body.choices[0].message.content);}main().catch((err) => { console.error("The sample encountered an error:", err);});