Merge branch 'main' of https://github.com/classroomio/classroomio into feat/release-v2

apps/docs/.gitignore

@@ -1,2 +1,19 @@
-.next
 node_modules
+
+.DS_Store
+.cache
+.vercel
+.output
+.nitro
+/build/
+/api/
+/server/build
+/public/build
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+.tanstack
+
+src/routeTree.gen.ts
+.source

apps/docs/.npmrc

@@ -0,0 +1 @@
+npm_config_registry=https://registry.npmjs.org

apps/docs/.nvmrc

@@ -0,0 +1 @@
+v20.19.3

apps/docs/DOCS_MIGRATION.md

@@ -0,0 +1,137 @@
+# Migrating Docs from docs.classroomio.com to classroomio.com/docs
+
+## Summary
+
+This guide documents the configuration to serve the docs at `classroomio.com/docs` instead of `docs.classroomio.com` using Vercel rewrites with TanStack Start.
+
+## Changes Made
+
+### 1. Docs App Configuration (`apps/docs`)
+
+**a) Updated `apps/docs/vite.config.ts`:**
+```typescript
+export default defineConfig({
+  server: {
+    port: 3000
+  },
+  base: '/docs',  // ← Added: Vite base path for asset resolution
+  plugins: [
+    mdx(await import('./source.config')),
+    tailwindcss(),
+    tsConfigPaths({
+      projects: ['./tsconfig.json']
+    }),
+    tanstackStart(),
+    react(),
+    nitro({
+      baseURL: '/docs'  // ← Added: Nitro base URL for server routing
+    })
+  ]
+});
+```
+
+**b) Updated `apps/docs/src/router.tsx`:**
+```typescript
+export function getRouter() {
+  return createTanStackRouter({
+    basepath: '/docs',  // ← Added: TanStack Router base path
+    defaultNotFoundComponent: NotFound,
+    defaultPreload: 'intent',
+    routeTree,
+    scrollRestoration: true
+  });
+}
+```
+
+These three configurations work together:
+- `base: '/docs'` - Tells Vite to prefix all asset paths with `/docs`
+- `baseURL: '/docs'` - Tells Nitro to handle all routes under `/docs`
+- `basepath: '/docs'` - Tells TanStack Router that routes are under `/docs`
+
+### 2. Main Site Configuration (`apps/classroomio-com`)
+
+**Created `apps/classroomio-com/vercel.json`**:
+```json
+{
+  "rewrites": [
+    {
+      "source": "/docs/",
+      "destination": "https://ciodocs.vercel.app/docs/"
+    },
+    {
+      "source": "/docs/:path*",
+      "destination": "https://ciodocs.vercel.app/docs/:path*"
+    }
+  ]
+}
+```
+
+This proxies all `/docs/*` requests from `classroomio.com` to your docs deployment.
+
+### 3. Cleanup
+
+- Removed empty `apps/classroomio-com/src/routes/(redirects)/docs/` folder that would conflict with the Vercel rewrite
+
+## How It Works
+
+1. **User visits:** `classroomio.com/docs/home`
+2. **Vercel receives:** Request for `/docs/home`
+3. **Vercel rewrites to:** `ciodocs.vercel.app/docs/home`
+4. **Docs app serves:** The page from its `/docs/home` route (configured with `basepath: '/docs'`)
+5. **User sees:** Content at `classroomio.com/docs/home` (URL unchanged)
+
+The key is that **both the rewrite and the docs app preserve the `/docs` path**, keeping everything aligned.
+
+## Deployment Steps
+
+### Step 1: Deploy/Redeploy the Docs App
+
+The docs app needs to be built and deployed with the `basepath: '/docs'` configuration:
+
+1. Make sure changes to `apps/docs/src/router.tsx` are committed
+2. Deploy or redeploy to `ciodocs.vercel.app`
+3. Vercel will automatically detect and deploy the changes
+
+**Vercel Project Settings for Docs:**
+- **Root Directory:** `apps/docs`
+- **Build Command:** `pnpm build`
+- **Output Directory:** `.output`
+- **Domain:** `ciodocs.vercel.app`
+
+### Step 2: Deploy/Redeploy the Main Site
+
+The main site needs the `vercel.json` rewrite configuration:
+
+1. Make sure `apps/classroomio-com/vercel.json` is committed
+2. Deploy or redeploy to `classroomio.com`
+
+**Vercel Project Settings for Main Site:**
+- **Root Directory:** `apps/classroomio-com`
+- **Build Command:** `pnpm build`
+- **Output Directory:** `.svelte-kit`
+- **Domain:** `classroomio.com`
+
+### Step 3: Test
+
+Once both are deployed:
+
+1. ✅ Visit `classroomio.com/docs` - should show docs homepage
+2. ✅ Visit `classroomio.com/docs/quickstart/signup` - should show specific doc pages
+3. ✅ Check that styles and JavaScript load correctly
+4. ✅ Test navigation within docs
+
+## Architecture
+
+```
+User Request: classroomio.com/docs/quickstart/signup
+       ↓
+Vercel (classroomio.com) - reads vercel.json
+       ↓
+Rewrite to: ciodocs.vercel.app/docs/quickstart/signup
+       ↓
+Docs App (TanStack Start with basepath: '/docs')
+       ↓
+Serves: /quickstart/signup route
+       ↓
+User sees content at: classroomio.com/docs/quickstart/signup
+```

apps/docs/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 Shu Ding
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

apps/docs/README.md

@@ -1,31 +1,14 @@
-# ClassroomIO Documentation
+# docs
 
-The help docs of classroomio in Next.js live on [https://classroomio.com/docs](https://classroomio.com/docs)
+This is a Tanstack Start application generated with
+[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
 
-## Development
+Run development server:
 
-### Local setup
-
-1. Clone the repo
-
-   ```bash
-   git clone https://github.com/rotimi-best/classroomio.git
-   ```
-
-2. Go to project folder
-
-   ```bash
-   cd classroomio
-   ```
-
-3. Install the required dependencies
-
-   ```bash
-   pnpm i
-   ```
-
-4. Run (in development mode)
-
-   ```bash
-   pnpm dev --filter=docs
-   ```
+```bash
+npm run dev
+# or
+pnpm dev
+# or
+yarn dev
+```

apps/docs/components/counters.module.css

@@ -1,6 +0,0 @@
-.counter {
-  border: 1px solid #ccc;
-  border-radius: 5px;
-  padding: 2px 6px;
-  margin: 12px 0 0;
-}

apps/docs/components/counters.tsx

@@ -1,24 +0,0 @@
-// Example from https://beta.reactjs.org/learn
-
-import { useState } from 'react'
-import styles from './counters.module.css'
-
-function MyButton() {
-  const [count, setCount] = useState(0)
-
-  function handleClick() {
-    setCount(count + 1)
-  }
-
-  return (
-    <div>
-      <button onClick={handleClick} className={styles.counter}>
-        Clicked {count} times
-      </button>
-    </div>
-  )
-}
-
-export default function MyApp() {
-  return <MyButton />
-}

apps/docs/content/docs/audience.mdx

@@ -0,0 +1,10 @@
+---
+title: Audience
+description: Information about ClassroomIO's target audience.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+<Callout type="warn" title="Work in Progress">
+  This page is a work in progress. Help us expand it by contributing!
+</Callout>

apps/docs/content/docs/community.mdx

@@ -0,0 +1,10 @@
+---
+title: Community
+description: Join the ClassroomIO community.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+<Callout type="warn" title="Work in Progress">
+  This page is a work in progress. Help us expand it by contributing!
+</Callout>

apps/docs/content/docs/contributor-guides/adding-translation-to-code.mdx

@@ -1,6 +1,9 @@
-# Adding Translation To Your Code - Developer's Guide
+---
+title: Adding Translation To Your Code - Developer's Guide
+description: Developer's guide to adding translations to the code.
+---
 
-In this guide, we'll walk through the process of adding translations to your code. This enables multi-translation support on the platform, enhancing the experience for every users.
+In this guide, we'll walk through the process of adding translations to your code. This enables multi-translation support on the platform, enhancing the experience for every user.
 
 ## Obtain Your RapidAPI Key
 
@@ -18,15 +21,15 @@ Follow these steps:
 
 Once you have your API Key, follow these steps to add a translation:
 
-1. Open the English file named `en` located in `apps\dashboard\src\lib\utils\translations\en.json`.
+1. Open the English file named `en` located in `apps/dashboard/src/lib/utils/translations/en.json`.
 2. Create an object with a name corresponding to the translation you wish to add.
    Example: `"tabs": { "profile": "Profile", "landing_page": "Landing Page" }`.
 3. Now, navigate to the file where you want to insert the translation.
 4. Import the translation function:
 
-````bash copy
+```bash
 import { t } from '$lib/utils/functions/translations';
-````
+```
 
 5. Locate the line where you want to add the translation and use the following syntax: `$t('path to the value in the object')`.
    Example: `<p>{$t('tabs.profile')}</p>` (This will output "Profile").
@@ -36,9 +39,8 @@ import { t } from '$lib/utils/functions/translations';
 
 Once you've updated the English file, you need to update the other files. To do this, run a command. Firstly ensure you're still in the `/apps/dashboard` directory, then execute:
 
-````bash copy
+```zsh title="Terminal"
 pnpm run script:translate
-````
+```
 
 This command runs a script that updates the other translation files.
-

apps/docs/content/docs/contributor-guides/cloudflare-setup.mdx

@@ -0,0 +1,6 @@
+---
+title: Cloudflare Setup
+description: Guide to setting up Cloudflare for ClassroomIO.
+---
+
+In this guide, you will learn how to get your Cloudflare environment variables. We use Cloudflare R2 for video uploads and the aim of this guide is to help you get the right variables to properly set up our api.

apps/docs/content/docs/contributor-guides/demo-accounts.mdx

@@ -1,6 +1,9 @@
-import { Callout } from 'nextra/components';
+---
+title: Login with Demo Accounts
+description: Quick login guide using demo accounts for testing.
+---
 
-# Login quickly with Demo Accounts
+import { Callout } from 'fumadocs-ui/components/callout';
 
 This guide will help you get started quickly once you setup our local environment and you want to start using the [dashboard](https://app.classroomio.com).
 
@@ -9,7 +12,7 @@ This guide will help you get started quickly once you setup our local environmen
   and you have `dashboard` running locally.
 </Callout>
 
-### Admin Login Credentials.
+## Admin Login Credentials
 
 Once you have the `dashboard` service running locally and you have setup supabase, we added seed data that can allow you access an admin account to a demo organization and a student account to a student dashboard. This allows you see what ClassroomIO can do quickly without trying to figure it out.
 
@@ -17,34 +20,15 @@ Once you have the `dashboard` service running locally and you have setup supabas
 
 **Password:** 123456
 
-<div className="nx-w-full nx-flex nx-items-center nx-justify-center">
+<div style={{ display: 'flex', justifyContent: 'center', marginY: '16px' }}>
   <iframe
     width="560"
     height="315"
     src="https://www.youtube.com/embed/RfE4tQ_BEds?si=uXpYKokMg4SWMkQX"
     title="YouTube video player"
-    frameborder="0"
+    frameBorder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-    className="nx-my-4 nx-rounded-md"
-    allowfullscreen
-  ></iframe>
-</div>
-
-### Student Login Credentials
-
-**Login:** [email protected]
-
-**Password:** 123456
-
-<div className="nx-w-full nx-flex nx-items-center nx-justify-center">
-  <iframe
-    width="560"
-    height="315"
-    src="https://www.youtube.com/embed/FG7B9rKjVi4?si=TeY088zf8OsELocC"
-    title="YouTube video player"
-    frameborder="0"
-    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-    className="nx-my-4 nx-rounded-md"
-    allowfullscreen
+    allowFullScreen
+    style={{ borderRadius: '8px' }}
   ></iframe>
 </div>

apps/docs/content/docs/contributor-guides/design.mdx

@@ -0,0 +1,11 @@
+---
+title: Design Contribution Guide
+description: Guidelines for contributing design improvements.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+
+<Callout type="warn" title="Work in Progress">
+  This page is a work in progress. Help us expand it by contributing!
+</Callout>

apps/docs/content/docs/contributor-guides/devs.mdx

@@ -1,6 +1,9 @@
-# Developers Contribution Guide
+---
+title: Developers Contribution Guide
+description: Guidelines for contributing code to ClassroomIO.
+---
 
-First and foremost, we're absolutely thrilled that you're considering becoming a part of the community
+First and foremost, we're absolutely thrilled that you're considering becoming a part of the community.
 
 ## Issue Hunters
 
@@ -14,7 +17,7 @@ We invite innovative minds to contribute to the evolution of ClassroomIO. If you
 
 Ready to dive into the code and make a real impact? Here's your path:
 
-1. **Fork the Repository:** Fork our repository or use [Gitpod](https://classroomio.com/docs/contributor-guides/gitpod)
+1. **Fork the Repository:** Fork our repository or use [Gitpod](/docs/contributor-guides/gitpod)
 
 2. **Implementation:** Code it out, test it and apply your changes.
 

apps/docs/content/docs/contributor-guides/gitpod.mdx

@@ -0,0 +1,26 @@
+---
+title: Gitpod Setup
+description: Guide to setting up Gitpod for ClassroomIO development.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+## One Click Setup
+
+- This will open a fully configured workspace in your browser with all the necessary dependencies already installed.
+- Click the button below to open this project in Gitpod.
+
+[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/rotimi-best/classroomio)
+
+<Callout title="Note">
+  Gitpod does not utilize `localhost` for accessing services. Instead, it uses its own URL after
+  starting all the necessary services. The correct URLs to access the project are automatically
+  inserted into the `.env` file upon initialization.
+</Callout>
+
+### Viewing URLs in Terminals
+
+To view the URLs, follow these steps:
+
+1. Open your terminal.
+2. Click on the `port` to see the URLs.

apps/docs/content/docs/contributor-guides/meta.json

@@ -0,0 +1,10 @@
+{
+  "devs": "Developers Guide",
+  "design": "Design Contribution Guide",
+  "supabase-cloud": "Supabase Cloud Setup",
+  "cloudflare-setup": "Cloudflare Setup",
+  "gitpod": "Gitpod Setup",
+  "demo-accounts": "Login with Demo Accounts",
+  "student-dashboard": "Student Dashboard Guide",
+  "adding-translation-to-code": "Adding Translations to Code"
+}

apps/docs/content/docs/contributor-guides/student-dashboard.mdx

@@ -1,6 +1,9 @@
-import { Callout } from 'nextra/components';
+---
+title: Student Dashboard - Developers Guide
+description: Guide to setting up the student dashboard locally.
+---
 
-# Student Dashboard - Developers guide
+import { Callout } from 'fumadocs-ui/components/callout';
 
 In this guide I will be showing you how to set up a local student dashboard that a student will see. This dashboard will allow students to view their grades, attendance, and other information. This dashboard will also allow students to submit assignments and view their grades for those assignments.
 
@@ -8,7 +11,7 @@ In this guide I will be showing you how to set up a local student dashboard that
 
 ### Requirements
 
-<Callout type="info" emoji="ℹ️">
+<Callout title="ℹ️ Important">
   Make sure to use 2 different browser windows: The reason is that one will be for the admin and
   another for the students. For the student we will need to set the cookies value to hold the
   organization siteName since we are using the subdomain to access the student dashboard like on
@@ -17,15 +20,15 @@ In this guide I will be showing you how to set up a local student dashboard that
 
 ### Demo
 
-<div className="nx-w-full nx-flex nx-items-center nx-justify-center">
+<div style={{ display: 'flex', justifyContent: 'center', marginY: '16px' }}>
   <iframe
     width="560"
     height="315"
     src="https://www.youtube.com/embed/QGTnK39xexs?si=ogFbyl2KK0XaFob4"
     title="YouTube video player"
-    frameborder="0"
+    frameBorder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-    className="nx-my-4 nx-rounded-md"
-    allowfullscreen
+    allowFullScreen
+    style={{ borderRadius: '8px' }}
   ></iframe>
 </div>

apps/docs/content/docs/contributor-guides/supabase-cloud.mdx

@@ -1,13 +1,10 @@
-import Image from 'next/image';
-import { Callout, Steps } from 'nextra/components';
-import AuthSettings from './images/auth-settings.webp';
-import DBPushResult from './images/db-push-result.webp';
-import DBUrl from './images/db-url.webp';
-import MatchEnvVariables from './images/match-env.webp';
-import NewProject from './images/new-project.webp';
-import SmtpSettings from './images/smtp-settings.webp';
+---
+title: Supabase Cloud Setup
+description: Guide to setting up Supabase cloud for ClassroomIO.
+---
 
-# Supabase Cloud Setup
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { Callout } from 'fumadocs-ui/components/callout';
 
 In this guide, you will learn how to setup a supabase cloud project and link it to your local environment.
 
@@ -16,89 +13,104 @@ In this guide, you will learn how to setup a supabase cloud project and link it
 1. You don't want to setup supabase on your local machine
 2. You can't run docker on your computer
 3. You are experiencing performance issues using supabase locally
-4. You want to selfhost our frontend app but use supabase cloud.
+4. You want to selfhost our frontend app but use supabase cloud
 
 If your requirement matches any of the above, then this guide is for you.
 
 ## Video Walkthrough
 
-<div className="nx-w-full nx-flex nx-items-center nx-justify-center">
+<div style={{ display: 'flex', justifyContent: 'center', marginY: '16px' }}>
   <iframe
     width="560"
     height="315"
     src="https://www.youtube.com/embed/dAZAZ0oiky0?si=1h-KtppNqJ3U4BTe"
     title="YouTube video player"
-    frameborder="0"
+    frameBorder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-    className="nx-my-4 nx-rounded-md"
-    allowfullscreen
+    allowFullScreen
+    style={{ borderRadius: '8px' }}
   ></iframe>
 </div>
 
-## Step by Step guide
+## Step by Step Guide
 
 <Steps>
-
+<Step>
 ### Create a Supabase project
 
 For this step you need to have signed up for supabase and create an account, just visit [supabase.com](https://supabase.com).
 
 Once you have an account just click on the _New Project_ on your dashboard. After that you should see a similar screen to the below, fill in the fields.
 
-<Image src={NewProject} alt="New project in supabase" quality="100" />
+![New project in supabase](/new-project.webp)
 
-<Callout>
+<Callout title="Important">
   Make sure you save your database password somewhere, else you won't be able to get it back
   anywhere in the dashboard for security reasons.
 </Callout>
 
+</Step>
+
+<Step>
 ### Setup Supabase CLI
 
 Follow the instructions [here](https://supabase.com/docs/guides/local-development/cli/getting-started) to setup the Supabase CLI on your computer.
 
+</Step>
+
+<Step>
 ### Login to Supabase via the CLI
 
 Open your terminal and go to the root of the project. Run the following:
 
-```bash copy
+```zsh title="Terminal"
 supabase login
 ```
 
 Follow the instruction in your terminal to generate your access token. Paste the token in the console and hit **Enter**
 
+</Step>
+
+<Step>
 ### Push migrations to your Supabase project
 
 - Go to the supabase dashboard, go to your project, click on the settings icon on the left side bar
 
-<Image src={DBUrl} alt="DB URL in the supabase dashboard" quality="100" />
+![DB URL in the supabase dashboard](/db-url.webp)
 
 - Copy the URL in the image above for your `db url`
 - Paste it somewhere
 - In the url, replace `[YOUR PASSWORD]` with your db password (which you saved in section 1).
 - Then run in your terminal:
 
-```bash copy
+```zsh title="Terminal"
 supabase db push --db-url "URL HERE"
 ```
 
-<Callout>
+<Callout title="Important">
   Make sure you preserve the double quotes before and after the url. Only replace `URL HERE` with
   your `db url` that contains your password
 </Callout>
 
 #### Result
 
-<Image src={DBPushResult} alt="Result of supabase db push" quality="100" />
+![Result of supabase db push](/db-push-result.webp)
 
+</Step>
+
+<Step>
 ### Configure Auth in your Supabase project
 
 Here we will update our email configurations, to prevent supabase from sending confirmation emails on signup. This is because we don't use Supabase for email verification, we handle that internally due to the quality of the email.
 
-<Image src={AuthSettings} alt="Authentication configuration" quality="100" />
+![Authentication configuration](/auth-settings.webp)
 
+</Step>
+
+<Step>
 ### Configure SMTP
 
-Supabase [now requires adding custom SMTP](https://github.com/orgs/supabase/discussions/29370) to your supabase project in order to avoid abuse of their system. Without adding a custom SMTP, your signup requests to your supabase project will fail. To avoid this, you should go to the [STMP section](https://supabase.com/dashboard/project/_/settings/auth) of your supabase settings.
+Supabase [now requires adding custom SMTP](https://github.com/orgs/supabase/discussions/29370) to your supabase project in order to avoid abuse of their system. Without adding a custom SMTP, your signup requests to your supabase project will fail. To avoid this, you should go to the [SMTP section](https://supabase.com/dashboard/project/_/settings/auth) of your supabase settings.
 
 Make sure to toggle **Enable Custom SMTP** and fill in the following fields:
 
@@ -109,40 +121,47 @@ Make sure to toggle **Enable Custom SMTP** and fill in the following fields:
 - SMTP username
 - SMTP password
 
-<Image src={SmtpSettings} alt="SMTP Settings" quality="100" />
+![SMTP Settings](/smtp-settings.webp)
 
-<Callout type="info" emoji="ℹ️">
+<Callout title="ℹ️ Learn More">
   Learn more about setting up SMTP [here](https://supabase.com/docs/guides/auth/auth-smtp)
 </Callout>
 
+</Step>
+
+<Step>
 ### Add configurations to your environment variables
 
 Now with all these set up you need to get update the .env file in `apps/dashboard`. You need to update the following environment variables:
 
-```bash copy
+```zsh title="env"
 PUBLIC_SUPABASE_URL=
 PUBLIC_SUPABASE_ANON_KEY=
 PRIVATE_SUPABASE_SERVICE_ROLE=
 ```
 
-To get the correct environment variables, follow the instructions in this image
+To get the correct environment variables, follow the instructions in this image:
 
-<Image src={MatchEnvVariables} alt="Source of supabase environment variables" quality="100" />
+![Source of supabase environment variables](/match-env.webp)
 
+</Step>
+
+<Step>
 ### Tada - That's all
 
 Now you can run:
 
-```bash copy
+```zsh title="Terminal"
 pnpm dev --filter=dashboard
 ```
 
 - Open the url in your browser
 - Click on Sign up
-- And that's it ...
+- And that's it...
 
-<Callout type="info" emoji="ℹ️">
-  Visit the [Sign up guide](/quickstart/signup) to learn how to signup
+<Callout title="ℹ️ Learn More">
+  Visit the [Sign up guide](/docs/quickstart/signup) to learn how to signup
 </Callout>
 
+</Step>
 </Steps>

apps/docs/content/docs/course.mdx

@@ -0,0 +1,10 @@
+---
+title: Course
+description: Learn about courses in ClassroomIO.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+<Callout type="warn" title="Work in Progress">
+  This page is a work in progress. Help us expand it by contributing!
+</Callout>

apps/docs/content/docs/home.mdx

@@ -0,0 +1,25 @@
+---
+title: Welcome to ClassroomIO
+description: A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations.
+---
+
+<img
+  alt="A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations"
+  src="https://brand.cdn.clsrio.com/og/classroomio-og.png"
+/>
+
+Welcome to the ClassroomIO documentation—your comprehensive guide to streamlining training for everyone. Our all-in-one platform empowers bootcamps, educators, and businesses to manage training programs easily. Run multiple classes and cohorts from a single UI with our mobile-first application, ensuring students can access all published content from any device.
+
+## What You'll Find Here
+
+This documentation covers everything from setup to usage, including:
+
+- **Core Features**: Well-detailed explanations of ClassroomIO's capabilities and how to take advantage of them
+- **Developer & Designer Resources**: Everything needed to successfully contribute to the project
+- **Practical Guides**: From simple functionalities to complex use cases
+
+If something isn't covered in this documentation, please feel free to [open an issue](https://github.com/classroomio/classroomio/issues) and we'll address it.
+
+## Get Started
+
+Ready to begin? Check out our [What is ClassroomIO](/docs/what-is-classroomio) page to learn about the platform's key features and capabilities.

apps/docs/content/docs/how-to-guides/certificates.mdx

@@ -0,0 +1,10 @@
+---
+title: How to Create Certificates
+description: Learn how to create certificates for your course.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+<Callout type="warn" title="Work in Progress">
+  This page is a work in progress. Help us expand it by contributing!
+</Callout>

apps/docs/content/docs/how-to-guides/course-landingpage.mdx

@@ -1,33 +1,26 @@
-import Image from 'next/image';
-import CourseLandingPage from './images/course-landing-page.webp';
-import CoursePage from './images/course-page.png';
-import LandingPage from './images/landing page.png';
+---
+title: Create a Course Landing Page
+description: Learn how to create a course landing page.
+---
 
-# Create a Course Landing Page
-
-ClassroomIO empowers you to design a course landing page, enabling you to showcase your courses to prospective students. On this page, students can explore course details, enrollment statistics, fees (if applicable), and course availability, enabling them to make informed choices. To access this, from your admin dashboard, navigate to **Settings** > **Landing Page.**  
-
-<br />
+ClassroomIO empowers you to design a course landing page, enabling you to showcase your courses to prospective students. On this page, students can explore course details, enrollment statistics, fees (if applicable), and course availability, enabling them to make informed choices. To access this, from your admin dashboard, navigate to **Settings** > **Landing Page.**
 
 ## Steps
 
 ### 1. Go to the Courses page
 
-Once you are logged in, click on **Courses** on the left sidebar, you will be taken to your course list page where you can access the courses you have created.  For this tutorial, we will focus on the **Intro to Javascript** course diaplayed in the image below. Click on the desired course to proceeed to it's respective dashboard.
-<br />
+Once you are logged in, click on **Courses** on the left sidebar, you will be taken to your course list page where you can access the courses you have created. For this tutorial, we will focus on the **Intro to Javascript** course displayed in the image below. Click on the desired course to proceed to its respective dashboard.
 
-<Image src={CourseLandingPage} alt="ClassroomIO Landing Page" quality={100} />
+![ClassroomIO Landing Page](/course-landing-page.webp)
 
 ### 2. Open the Landing page editor
 
 Select the "**Landing page**" option from the sidebar, which will lead you to the settings for your landing page. Here, you can customize various aspects of your course, including the course title, fees (if applicable), requirements, description, and more.
-<br />
 
-<Image src={CoursePage} alt="ClassroomIO Course Page" quality={100} />
+![ClassroomIO Course Page](/course-page.png)
 
 ### 3. Edit and Save your changes
 
 After making the desired adjustments, ensure to save your changes by clicking on the "**Save**" button located at the top-left corner of the screen. Then, to preview the updated landing page, click on the arrow button situated to the right of the "**Save**" button.
-<br />
 
-<Image src={LandingPage} alt="ClassroomIO Course Page Settings" quality={100} />
+![ClassroomIO Course Page Settings](/landing-page.png)

apps/docs/content/docs/how-to-guides/create-exercise.mdx

@@ -0,0 +1,107 @@
+---
+title: How to Create an Exercise
+description: Learn how to create exercises in ClassroomIO.
+---
+
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+
+In ClassroomIO, exercises are a great way to assess students' understanding through practice activities. Once you've [set up your organization](/docs/how-to-guides/customize-organization), [created a course](/docs/how-to-guides/create-first-course), and [added a lesson](/docs/how-to-guides/create-first-course#adding-lessons), you can start creating exercises. Follow the process below to create your first exercise.
+
+<Steps>
+<Step>
+### Go to the Courses Page
+
+Access the courses page from the dashboard by clicking on **Courses** via the sidebar menu.
+
+![Organization dashboard displaying a sidebar menu](/organization-dashboard.webp)
+
+</Step>
+
+<Step>
+### Select a Course
+
+On the courses page, click on a course to go to the course page.
+
+![Courses page for organization displaying a sidebar menu and a course card component](/courses-page.webp)
+
+</Step>
+
+<Step>
+### Select a Lesson
+
+On the course page, click on **Lessons** via the left sidebar menu and select the lesson you want to create an exercise for.
+
+> Alternatively, you can click on the **⌄** icon next to the **Lessons** option to select a lesson.
+
+![Course page displaying sidebar menu with the lesson page open](/course-page.webp)
+
+</Step>
+
+<Step>
+### Add an Exercise
+
+Locate the tabs at the top of the page and select the **Exercises** tab. Then click on the **Add** button. On the modal, select a method to create an exercise. You can create an exercise:
+
+![Course page displaying sidebar menu with the exercise tab open](/exercise.webp)
+
+1. **From scratch**: Create an exercise by adding the questions yourself. This is handy if you've prepared your questions.
+   - Enter the exercise name and click on the **Finish** button.
+   - Click on the newly created exercise and provide the exercise description, due date, and question details.
+
+![A pop-up displaying new exercise with an empty field](/from-scratch.webp)
+
+2. **Using a template**: You can select from an array of templates with predefined exercises complete with questions and options.
+   - Select a template and click on the **Finish** button.
+
+![A pop-up displaying new exercise with an array of exercise templates](/using-a-template.webp)
+
+3. **Using AI**: AI helps you generate exercises directly from lesson notes.
+   - Enter the number of questions and options. Next, click on the **Generate** button.
+
+![A pop-up displaying new exercise with two questions about the exercise content](/using-AI.webp)
+
+</Step>
+
+<Step>
+### Preview Exercise
+
+To preview the exercise, click on the **preview icon**. This is to ensure the exercise looks and functions as expected.
+
+![Exercise content edit page](/preview.webp)
+
+</Step>
+
+<Step>
+### Add Questions
+
+To add a question, click on the **add icon**.
+
+![Exercise content edit page with a red box highlight on the add icon](/add-question.webp)
+
+</Step>
+
+<Step>
+### Reorder Questions
+
+To reorder questions, click on the **three dots** > **Reorder Questions**, then drag and drop the questions.
+
+![A pop-up showing the question order for exercise](/reorder-questions.webp)
+
+</Step>
+
+<Step>
+### Save Changes
+
+After previewing, adding, and rearranging questions, ensure to save your changes by clicking on the **Save** button. This will apply your modifications to the exercise.
+
+</Step>
+
+<Step>
+### Your Exercise Is Ready
+
+You've successfully created your first exercise and it is now accessible to students enrolled in the course. Move on to the next section to start grading your exercise.
+
+![Course page displaying sidebar menu with the exercise tab open showing the newly created exercise](/new-exercise.webp)
+
+</Step>
+</Steps>

apps/docs/content/docs/how-to-guides/create-first-course.mdx

@@ -1,19 +1,24 @@
-import { Steps, Callout } from 'nextra/components';
+---
+title: Creating Your First Course
+description: Learn how to create your first course on ClassroomIO.
+---
+
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { Callout } from 'fumadocs-ui/components/callout';
 
-# Creating Your First Course
 
 Below is a video guiding you through the process of creating your inaugural course. Should you have any inquiries, feel free to drop a comment in the YouTube comment section, reach out to us on **[Discord](https://discord.gg/BSaEzcfu)**, or send a DM on **[Twitter](https://x.com/rotimi_best?s=20)**.
 
-<div className="nx-w-full nx-flex nx-items-center nx-justify-center">
+<div style={{ display: 'flex', justifyContent: 'center', marginY: '16px' }}>
   <iframe
     width="560"
     height="315"
     src="https://www.youtube.com/embed/ztiZ6vo2gg0?si=v_UUL1YUPyDQ4_pp"
     title="YouTube video player"
-    frameborder="0"
+    frameBorder="0"
     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-    allowfullscreen
-    className="nx-my-4 nx-rounded-md"
+    allowFullScreen
+    style={{ borderRadius: '8px' }}
   ></iframe>
 </div>
 
@@ -44,22 +49,27 @@ Following course creation, consider the following enhancements:
 Adding lessons to a course is achieved through the following steps:
 
 <Steps>
- ### Click the Lesson Link
+<Step>
+### Click the Lesson Link
 
 On the course page, click "Lessons" in the sidebar to access the lessons page. Click the "Add" button in the top right corner to open the Add Lesson modal.
 
 > Alternatively, add a lesson on-the-go by clicking the '+' icon next to the lesson link in the sidebar.
 
+</Step>
+
+<Step>
 ### Fill in the Lesson Details
 
 Provide the lesson title, select a tutor, date, and optionally lock the lesson or notes.
 
-<Callout type="info" emoji="💡">
+<Callout title="💡 Tip">
   Locking the lesson renders it inaccessible to students upon course publication.
 </Callout>
 
 Save your changes to be redirected to the lesson page for material addition.
 
+</Step>
 </Steps>
 
 For each lesson, you may furnish materials such as notes, slides, and videos by clicking the "Edit" button on the top right corner of the **Materials** tab.
@@ -85,7 +95,7 @@ To embed slides, navigate to the slides tab and input the link to the slides. Cl
 
 Embedding videos is simple: select the "Videos" tab to open the modal for adding videos. From the "Add By" options in the modal, select the "YouTube Link" tab. Input the link to the YouTube video and click the "Add Video" button. Once added, the video is automatically included in your materials. You can delete the video using the trash icon.
 
-<Callout emoji="🚨">
+<Callout type="warn">
   Please note that for now, we do not support adding videos from local sources.
 </Callout>
 

apps/docs/content/docs/how-to-guides/customize-organization.mdx

@@ -1,15 +1,15 @@
-import Image from 'next/image';
-import { Callout, Steps } from 'nextra/components';
-import DommainSetupOne from './images/domain-setup-one.webp';
-import DommainSetupTwo from './images/domain-setup-two.webp';
-import DommainSetupThree from './images/domain-setup-three.webp';
-import CustomizeOrg from './images/customize-organization.webp';
+---
+title: Customize Your Organization
+description: Learn how to customize your organization settings.
+---
+
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+import { Callout } from 'fumadocs-ui/components/callout';
 
-# Customize Your Organization
 
 ClassroomIO empowers every organization to tailor their experience to their unique needs. In this guide, you will learn how to customize your organization settings. To access this, from your admin dashboard, navigate to **Settings** > **Organization**.
 
-<Image src={CustomizeOrg} alt="ClassroomIO Organization settings page" quality={100} />
+![ClassroomIO Organization settings page](/customize-organization.webp)
 
 ## Update Organization Profile
 
@@ -18,27 +18,42 @@ Easily update your organization's profile by modifying the designated fields in
 To update your organization profile details, follow these steps:
 
 <Steps>
+<Step>
 ### Go to Organization Settings
 
 From your dashboard, click on Settings, then select Organization in the tabs of the settings page.
 
+</Step>
+
+<Step>
 ### Change Your Organization Name
 
 Fill the Organization name field with your preferred name.
 
+</Step>
+
+<Step>
 ### Click on Upload Image
 
 Click the Upload Image button to select an image for upload.
 
+</Step>
+
+<Step>
 ### Select an Image
 
 Choose a logo or image of your choice from your device.
 
+</Step>
+
+<Step>
 ### Click Update Organization Button
 
 Save the changes by clicking the **Update Organization** button.
 
+</Step>
 </Steps>
+
 By clicking the **Update Organization** button, the updated preferences in the Organization section will be applied across the entire dashboard.
 
 ## Customize Domain
@@ -46,33 +61,38 @@ By clicking the **Update Organization** button, the updated preferences in the O
 Upon onboarding, each organization in ClassroomIO is assigned a custom Domain URL. This URL directs users to the organization's customizable website, making it easy for audiences to access published courses, FAQs, and other relevant information tailored to your organization's preferences. To customize your organization's domain URL, follow these steps:
 
 <Steps>
+<Step>
 ### Click on "Edit Domain"
 
 Click the Edit Domain button to navigate to the domain setup page.
 
-<Image src={DommainSetupOne} alt="Custom Domain setup" quality={100} />
+![Custom Domain setup](/domain-setup-one.webp)
 
+</Step>
+
+<Step>
 ### Update the URL Field with Your Preferred Choice
 
 Fill the field with your desired URL.
 
-<Image src={DommainSetupTwo} alt="Edit Custom domain URL" quality={100} />
+![Edit Custom domain URL](/domain-setup-two.webp)
 
+</Step>
+
+<Step>
 ### Save Changes
 
 Click on Update Domain to save the changes.
 
 > You can click on **View Site** to be redirected to your Organization website with the updated URL.
 
-<Image src={DommainSetupThree} alt="Edit Custom domain URL" quality={100} />
+![Edit Custom domain URL](/domain-setup-three.webp)
 
+</Step>
 </Steps>
 
-<Callout type="info" emoji="⏳">
-  Coming soon: Organizations can also integrate existing domain names.
-</Callout>
+<Callout title="⏳ Coming Soon">Organizations can also integrate existing domain names.</Callout>
 
 ## Set Brand Color
 
-We understand that every organization has a preferred color that suits their brand hence we offer organizations the flexibility to choose a theme for their brand from a variety of colors like **blue**, **green**, **orange**, and more.
-To select a brand color for your organization simply click on any of the provided color theme and this would be automatically applied accross your entire application.
+We understand that every organization has a preferred color that suits their brand, hence we offer organizations the flexibility to choose a theme for their brand from a variety of colors like **blue**, **green**, **orange**, and more. To select a brand color for your organization simply click on any of the provided color theme and this would be automatically applied across your entire application.

apps/docs/content/docs/how-to-guides/grade-exercise.mdx

@@ -0,0 +1,11 @@
+---
+title: How to Grade an Exercise
+description: Learn how to grade exercises submitted by students.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+
+<Callout type="warn" title="Work in Progress">
+  This page is a work in progress. Help us expand it by contributing!
+</Callout>

apps/docs/content/docs/how-to-guides/invite-students.mdx

@@ -0,0 +1,11 @@
+---
+title: How to Invite Students
+description: Learn how to invite students to your courses.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+
+<Callout type="warn" title="Work in Progress">
+  This page is a work in progress. Help us expand it by contributing!
+</Callout>

apps/docs/content/docs/how-to-guides/invite-team-member.mdx

@@ -0,0 +1,11 @@
+---
+title: Inviting a Team Member
+description: Learn how to invite team members to your organization.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+
+<Callout type="warn" title="Work in Progress">
+  This page is a work in progress. Help us expand it by contributing!
+</Callout>

apps/docs/content/docs/how-to-guides/meta.json

@@ -0,0 +1,12 @@
+{
+  "create-first-course": "Creating Your First Course",
+  "create-exercise": "How to Create an Exercise",
+  "customize-organization": "Customize Your Organization",
+  "course-landingpage": "Create a Course Landing Page",
+  "setup-profile": "Setup Profile",
+  "certificates": "How to Create Certificates",
+  "grade-exercise": "How to Grade an Exercise",
+  "invite-students": "How to Invite Students",
+  "invite-team-member": "Inviting a Team Member",
+  "take-attendance": "How to Take Attendance"
+}

apps/docs/content/docs/how-to-guides/setup-profile.mdx

@@ -0,0 +1,45 @@
+---
+title: Setup Profile
+description: Learn how to setup your profile on ClassroomIO.
+---
+
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+
+
+<Steps>
+<Step>
+### Go to ClassroomIO
+
+Go to [app.classroomio.com](https://app.classroomio.com). Click on the "Login" button on the top right to take you to the Login page.
+
+![ClassroomIO Page](/classroomio.webp)
+
+</Step>
+
+<Step>
+### Sign In
+
+Sign in with your email & password.
+
+![ClassroomIO Page](/login-page.webp)
+
+</Step>
+
+<Step>
+### Go to the Settings page
+
+Click on the "Settings" button on the lower left corner on your dashboard page and you'll be routed to the profile page.
+
+![Unedited Profile Page](/unedited-profile-page.webp)
+
+</Step>
+
+<Step>
+### Make Changes
+
+Upload a profile picture and edit any input field you want to then click "Update Profile".
+
+![Edited Profile Page](/edited-profile-page.webp)
+
+</Step>
+</Steps>

apps/docs/content/docs/how-to-guides/take-attendance.mdx

@@ -0,0 +1,11 @@
+---
+title: How to Take Attendance
+description: Learn how to take attendance for your classes.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+
+<Callout type="warn" title="Work in Progress">
+  This page is a work in progress. Help us expand it by contributing!
+</Callout>

apps/docs/content/docs/meta.json

@@ -0,0 +1,19 @@
+{
+  "pages": [
+    "---Introduction---",
+    "home",
+    "what-is-classroomio",
+    "quickstart",
+
+    "---Core Features---",
+    "course",
+    "audience",
+    "community",
+    "organization",
+    "student-dashboard",
+
+    "---Guides---",
+    "how-to-guides",
+    "contributor-guides"
+  ]
+}

apps/docs/content/docs/organization.mdx

@@ -0,0 +1,12 @@
+---
+title: Organization
+description: Learn about organizations in ClassroomIO.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+<Callout type="warn" title="Work in Progress">
+  This page is a work in progress. Help us expand it by contributing!
+</Callout>
+
+We will write about organizations here.

apps/docs/content/docs/quickstart/meta.json

@@ -1,5 +1,5 @@
 {
-  "signup": "Signup",
+  "signup": "Sign Up",
   "onboarding": "Onboarding",
   "self-hosting": "Self-hosting"
 }

apps/docs/content/docs/quickstart/onboarding.mdx

@@ -1,4 +1,8 @@
-# Onboarding
+---
+title: Onboarding
+description: Your onboarding checklist after creating an account.
+---
+
 
 Welcome again to ClassroomIO and we are super excited you are giving it a try. On this page you will find your onboarding checklist, the first thing you need to do after you've created an account.
 

apps/docs/content/docs/quickstart/self-hosting.mdx

@@ -1,18 +1,20 @@
-import Image from 'next/image';
-import { Callout } from 'nextra/components';
-import SelfhostClassroomIO from './images/selfhost-classroomio.webp';
+---
+title: Self-hosting ClassroomIO
+description: Guide to self-hosting ClassroomIO on your own servers.
+---
 
-# Self-hosting ClassroomIO.com
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Step, Steps } from 'fumadocs-ui/components/steps';
 
-This guide will help you quickly selfhost ClassroomIO
+This guide will help you quickly self-host ClassroomIO.
 
-<Image src={SelfhostClassroomIO} alt="Selfhost ClassroomIO" quality="100" />
+![Selfhost ClassroomIO](/selfhost-classroomio.webp)
 
-ClassroomIO is made up of the following applications
+ClassroomIO is made up of the following applications:
 
 - [apps/api](https://github.com/rotimi-best/classroomio/tree/main/apps/api) - an Express server
 - [apps/dashboard](https://github.com/rotimi-best/classroomio/tree/main/apps/dashboard) - the admin dashboard + LMS
-- [supabase](https://github.com/rotimi-best/classroomio/tree/main/supabase) - the database + REST API.
+- [supabase](https://github.com/rotimi-best/classroomio/tree/main/supabase) - the database + REST API
 
 The quickest and easiest way to deploy both the api and dashboard is by using our [Railway Template](https://railway.app/template/dl9RG7?referralCode=8OyIj5). However there are a couple of things that you'd need first before heading over to the template, which are:
 
@@ -24,7 +26,7 @@ The quickest and easiest way to deploy both the api and dashboard is by using ou
 
 Both for the supabase and api setup, you'd need a custom SMTP for email sending. Most importantly you need these values:
 
-```bash
+```zsh title="env"
 SMTP_HOST=
 SMTP_PORT=
 SMTP_USER=
@@ -32,22 +34,22 @@ SMTP_PASSWORD=
 SMTP_SENDER=
 ```
 
-Make sure you have them handy because you'd need them while we go through this selfhosting guide.
+Make sure you have them handy because you'd need them while we go through this self-hosting guide.
 
-<Callout type="info" emoji="ℹ️">
+<Callout title="Learn More">
   Learn more about setting up a custom SMTP server
   [here](https://supabase.com/docs/guides/auth/auth-smtp)
 </Callout>
 
 ## Supabase
 
-There are 2 options to go about setting up Supabase, you could [selfhost supabase](https://supabase.com/docs/guides/self-hosting) on your own servers or you could use their cloud version. We recommend you use the cloud version because it has a very generous free tier and you get to deploy it very quickly.
+There are 2 options to go about setting up Supabase, you could [self-host supabase](https://supabase.com/docs/guides/self-hosting) on your own servers or you could use their cloud version. We recommend you use the cloud version because it has a very generous free tier and you get to deploy it very quickly.
 
-We have a standalone guide to help you setup your Supabase Cloud and you can find it [here](https://classroomio.com/docs/contributor-guides/supabase-cloud)
+We have a standalone guide to help you setup your Supabase Cloud and you can find it [here](/docs/contributor-guides/supabase-cloud).
 
 After you go through that guide you will need the following environment variables, please also store them somewhere:
 
-```bash
+```zsh title="env"
 PUBLIC_SUPABASE_URL=
 PUBLIC_SUPABASE_ANON_KEY=
 PRIVATE_SUPABASE_SERVICE_ROLE=
@@ -57,9 +59,7 @@ PRIVATE_SUPABASE_SERVICE_ROLE=
 
 We use Cloudflare R2 for video uploading within the course builder. It is not required though and you can do without it in the app if you don't need video upload.
 
-<Callout type="info" emoji="⏳">
-  This section is a work in progress.
-</Callout>
+<Callout title="Work in Progress">This section is a work in progress.</Callout>
 
 ## Deploy on Railway
 
@@ -69,11 +69,11 @@ Go ahead and click this button to get started.
 
 [![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/dl9RG7?referralCode=8OyIj5)
 
-### Environment Variables.
+### Environment Variables
 
 #### cio-api
 
-```bash
+```zsh title="env"
 # Required
 SMTP_HOST=""
 SMTP_PORT=""
@@ -92,14 +92,14 @@ CLOUDFLARE_SECRET_ACCESS_KEY=""
 SENTRY_DNS=""
 ```
 
-<Callout type="info" emoji="ℹ️">
+<Callout title="Learn More">
   Learn more about the environment variables
   [here](https://github.com/rotimi-best/classroomio/blob/main/apps/api/.env.example)
 </Callout>
 
 #### cio-dashboard
 
-```bash
+```zsh title="env"
 # Required
 PUBLIC_SUPABASE_URL=""
 PUBLIC_SUPABASE_ANON_KEY=""
@@ -114,7 +114,7 @@ PRIVATE_APP_HOST=""
 PRIVATE_APP_SUBDOMAINS=""
 ```
 
-<Callout type="info" emoji="ℹ️">
+<Callout title="Learn More">
   Learn more about the environment variables
   [here](https://github.com/rotimi-best/classroomio/blob/main/apps/dashboard/.env.example)
 </Callout>
@@ -125,7 +125,7 @@ We provide a docker-compose configuration to deploy both the api and dashboard s
 
 1. Clone the repository:
 
-```bash
+```zsh title="Terminal"
 git clone https://github.com/rotimi-best/classroomio.git
 cd classroomio
 ```
@@ -134,7 +134,7 @@ cd classroomio
 
 3. Start the services:
 
-```bash
+```zsh title="Terminal"
 docker compose up --build
 ```
 

apps/docs/content/docs/quickstart/signup.mdx

@@ -0,0 +1,59 @@
+---
+title: Sign Up for ClassroomIO
+description: Get started with ClassroomIO by signing up for an account.
+---
+
+import { Step, Steps } from 'fumadocs-ui/components/steps';
+
+If you're new to ClassroomIO, you must create an account to set up and launch your organization. By signing up, you'll gain access to all the [exciting features we offer](/docs/what-is-classroomio#key-features) to supercharge your classroom.
+
+<Steps>
+<Step>
+### Go to the Signup Page
+
+Navigate to [app.classroomio.com](https://app.classroomio.com) and click the **Signup** button at the top right corner of the page.
+
+![ClassroomIO website with a navigation bar at the top of the page containing the logo on the left along with the login and signup button on the right. Also, the page contains an email field with a Join waiting list button.](/dashboard-homepage-signedout.webp)
+
+</Step>
+
+<Step>
+### Fill the Signup Form
+
+On the signup page, enter your **valid email address**. Next, create a secure password with a **minimum of 6 characters** and confirm it. Click **Create Account**.
+
+You can also sign up using your Google account.
+
+![ClassroomIO sign-up page with a sign-up form containing inputs for Your Name, Your Password, and, Confirm Password. At the bottom, there is a Create Account button, a Sign up with Google button, and, a link to log in if you already have an account.](/signup-page.webp)
+
+</Step>
+
+<Step>
+### Complete the Onboarding
+
+After completing the Signup form, you'll be redirected to the **Onboarding** page. There, you'll provide your **Full Name** and **Name of Organization.** As you enter your organization name, the **Organization Site Name** field will auto-fill. To proceed, click **Continue**.
+
+![ClassroomIO onboarding page with a form containing inputs for Full Name, Name of Organization, and, Organization Site Name. At the bottom, there is a Continue button.](/onboarding-page1.webp)
+
+Next, you'll complete a brief survey regarding what brought you to ClassroomIO and how you discovered our platform. Your responses will help us tailor ClassroomIO's features to best suit your needs. Finally, click **Continue** to submit.
+
+![ClassroomIO second slide of onboarding page with a questionnaire](/onboarding-page2.webp)
+
+</Step>
+
+<Step>
+### Welcome to the Dashboard
+
+You are successfully signed up and ready to use ClassroomIO when you see the dashboard.
+
+![ClassroomIO dashboard with a big pop-up containing a welcome message](/dashboard-homepage-signedin.webp)
+
+</Step>
+
+<Step>
+### What Next?
+
+After signing up successfully, you can now set up and [customize your Organization](/docs/how-to-guides/customize-organization).
+
+</Step>
+</Steps>

apps/docs/content/docs/student-dashboard.mdx

@@ -0,0 +1,10 @@
+---
+title: Student Dashboard
+description: Learn about the student dashboard.
+---
+
+import { Callout } from 'fumadocs-ui/components/callout';
+
+<Callout type="warn" title="Work in Progress">
+  This page is a work in progress. Help us expand it by contributing!
+</Callout>

apps/docs/content/docs/what-is-classroomio.mdx

@@ -1,15 +1,17 @@
-# What is ClassroomIO
+---
+title: What is ClassroomIO
+description: Learn about ClassroomIO and its key features.
+---
 
-<br />
 <img alt="ClassroomIO Courses page" src="https://brand.cdn.clsrio.com/classroomio-courses.png" />
 
 Streamline training for everyone with ClassroomIO.com. Our all-in-one platform empowers bootcamps, educators, and businesses to manage training programs easily. With our platform, anyone can run multiple classes and cohorts all from one UI. The application is mobile-first, which means that students can access your lesson materials from any device.
 
-### Mission: Provide Students with the Best Learning Experience
+## Mission: Provide Students with the Best Learning Experience
 
 At ClassroomIO, our mission is to provide students with the best possible learning experience. We believe in empowering educators with the tools they need to deliver high-quality education that is accessible, engaging, and effective.
 
-### Key Features
+## Key Features
 
 1. **📚 Advanced Course Management:** You can create unlimited courses, create lessons, invite students, add assignments, grade their assignments, and even generate certificates.
 2. **👨‍👩‍👦 Multi-Teacher Management:** You can invite other teachers into your organization and assign them individual courses.

apps/docs/next-env.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="next" />
-/// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/docs/next.config.js

@@ -1,25 +0,0 @@
-const million = require('million/compiler');
-
-const env = process.env.NODE_ENV;
-
-const withNextra = require('nextra')({
-  theme: 'nextra-theme-docs',
-  themeConfig: './theme.config.tsx'
-});
-
-const nextConfig = {
-  basePath: env === 'production' ? '/docs' : undefined,
-  env: {
-    imagePath: env === 'production' ? '/docs' : ''
-  },
-  images: {
-    unoptimized: true
-  },
-  ...withNextra()
-};
-
-const millionConfig = {
-  auto: true
-};
-
-module.exports = million.next(nextConfig, millionConfig);

apps/docs/package.json

@@ -1,35 +1,37 @@
 {
   "name": "@cio/docs",
-  "version": "0.0.1",
-  "description": "ClassroomIO Documentation",
+  "type": "module",
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start"
+    "dev": "vite dev",
+    "build": "vite build",
+    "start": "node .output/server/index.mjs",
+    "types:check": "fumadocs-mdx && tsc --noEmit",
+    "postinstall": "fumadocs-mdx"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/classroomio/classroomio.git"
-  },
-  "author": "Shu Ding <[email protected]>",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/classroomio/classroomio/issues"
-  },
-  "homepage": "https://github.com/classroomio/classroomio#readme",
   "dependencies": {
-    "million": "^3.0.3",
-    "next": "^13.0.6",
-    "nextra": "2.13.2",
-    "nextra-theme-docs": "2.13.2",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@tanstack/react-router": "^1.134.12",
+    "@tanstack/react-router-devtools": "^1.134.12",
+    "@tanstack/react-start": "^1.134.12",
+    "fumadocs-core": "16.2.1",
+    "fumadocs-mdx": "14.0.4",
+    "fumadocs-ui": "16.2.1",
+    "lucide-react": "^0.562.0",
+    "lucide-static": "^0.552.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tailwind-merge": "^3.3.1",
+    "vite": "^7.2.0"
   },
   "devDependencies": {
-    "@types/node": "18.11.10",
-    "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.32",
-    "tailwindcss": "^3.3.6",
-    "typescript": "^4.9.3"
+    "@tailwindcss/vite": "^4.1.16",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "^24.10.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^5.1.0",
+    "nitro": "3.0.1-alpha.1",
+    "tailwindcss": "^4.1.16",
+    "typescript": "^5.9.3",
+    "vite-tsconfig-paths": "^5.1.4"
   }
 }

apps/docs/pages/_meta.json

@@ -1,36 +0,0 @@
-{
-  "-": {
-    "type": "separator",
-    "title": "Introduction"
-  },
-  "index": "Welcome",
-  "what-is-classroomio": "What is ClassroomIO",
-  "quickstart": "Quick Start",
-  "--": {
-    "type": "separator",
-    "title": "Core Features"
-  },
-  "organization": "Organization",
-  "course": "Course",
-  "student-dashboard": "Student Dashboard",
-  "community": "Community",
-  "audience": "Audience",
-  "---": {
-    "type": "separator",
-    "title": "Guides"
-  },
-  "contributor-guides": "Contributor Guides",
-  "howtoguides": "How To Guides",
-  "contact": {
-    "title": "Contact ↗",
-    "type": "page",
-    "href": "https://twitter.com/classroomio",
-    "newWindow": true
-  },
-  "demo": {
-    "title": "Demo ↗",
-    "type": "page",
-    "href": "https://dub.sh/ciodemo",
-    "newWindow": true
-  }
-}

apps/docs/pages/audience.mdx

@@ -1,7 +0,0 @@
-import { Callout } from "nextra/components";
-
-# Audience
-
-<Callout emoji='🚨'>
-	This page is a work in progress. Help us expand it by contributing!
-</Callout>

apps/docs/pages/community.mdx

@@ -1,7 +0,0 @@
-import { Callout } from "nextra/components";
-
-# Community
-
-<Callout emoji='🚨'>
-	This page is a work in progress. Help us expand it by contributing!
-</Callout>

apps/docs/pages/contributor-guides/_meta.json

@@ -1,8 +0,0 @@
-{
-  "demo-accounts": "Demo Accounts",
-  "devs": "Developers Guide",
-  "supabase-cloud": "Supabase Cloud Setup",
-  "design": "Designers Guide",
-  "student-dashboard": "Student Dashboard",
-  "cloudflare-setup": "Cloudflare Setup"
-}

apps/docs/pages/contributor-guides/cloudflare-setup.mdx

@@ -1,7 +0,0 @@
-import Image from 'next/image';
-import { Steps } from 'nextra/components';
-import { Callout } from 'nextra/components';
-
-# Cloudflare Setup
-
-In this guide, you will learn how to get your cloudflare environment variables. We use Cloudflare R2 for video uploads and the aim of this guide is to help you get the right variables to properly setup our api.

apps/docs/pages/contributor-guides/design.mdx

@@ -1,7 +0,0 @@
-import { Callout } from "nextra/components";
-
-# Design Contribution Guide
-
-<Callout emoji='🚨'>
-	This page is a work in progress. Help us expand it by contributing!
-</Callout>

apps/docs/pages/course.mdx

@@ -1,7 +0,0 @@
-import { Callout } from "nextra/components";
-
-# Course
-
-<Callout emoji='🚨'>
-	This page is a work in progress. Help us expand it by contributing!
-</Callout>

apps/docs/pages/global.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;

apps/docs/pages/howtoguides/_meta.json

@@ -1,12 +0,0 @@
-{
-  "setup-profile": "Setup your Profile",
-  "customize-organization": "Customize Organization",
-  "create-first-course": "Create Сourse",
-  "create-exercise": "Create an Exercise",
-  "grade-exercise": "Grade an Exercise",
-  "take-attendance": "Take Attendance",
-  "certificates": "Create Certificates",
-  "course-landingpage": "Course Landing Page",
-  "invite-team-member": "Inviting Team Members",
-  "invite-students": "Inviting Students"
-}

apps/docs/pages/howtoguides/certificates.mdx

@@ -1,7 +0,0 @@
-import { Callout } from "nextra/components";
-
-# How to Create Certificates
-
-<Callout emoji='🚨'>
-	This page is a work in progress. Help us expand it by contributing!
-</Callout>

apps/docs/pages/howtoguides/create-exercise.mdx

@@ -1,93 +0,0 @@
-import Image from 'next/image';
-import { Steps } from "nextra/components";
-import OrganizationDashboard from './images/organization-dashboard.webp';
-import CoursesPage from './images/courses-page.webp';
-import CoursePage from './images/course-page.webp';
-import Exercise from './images/exercise.webp';
-import FromScratch from './images/from-scratch.webp';
-import UsingATemplate from './images/using-a-template.webp';
-import UsingAI from './images/using-AI.webp';
-import Preview from './images/preview.webp';
-import AddQuestion from './images/add-question.webp';
-import ReorderQuestions from './images/reorder-questions.webp';
-import NewExercise from './images/new-exercise.webp';
-
-
-# How to Create an Exercise
-
-In ClassroomIO, exercises are a great way to assess students' understanding through practice activities. Once you’ve [set up your organization](https://www.classroomio.com/docs/howtoguides/customize-organization), [created a course](https://www.classroomio.com/docs/howtoguides/create-first-course), and [added a lesson](https://www.classroomio.com/docs/howtoguides/create-first-course#adding-lessons), you can start creating exercises. Follow the process below to create your first exercise.
-
-<Steps>
-
-	### Go to the Courses Page
-
-
-Access the courses page from the dashboard by clicking on **Courses** via the sidebar menu.
-
-<Image src={OrganizationDashboard} alt="Organization dashboard displaying a sidebar menu" quality={100} />
-
-	### Select a Course
-
-On the courses page, click on a course to go to the course page.
-
-<Image src={CoursesPage} alt="Courses page for organization displaying a sidebar menu and a course card component" quality={100} />
-
-	### Select a Lesson
-
-On the course page, click on **Lessons** via the left sidebar menu and select the lesson you want to create an exercise for.
-
-> Alternatively, you can click on the **⌄** icon next to the **Lessons** option to select a lesson.
-
-<Image src={CoursePage} alt="Course page displaying sidebar menu with the lesson page open" quality={100} />
-
-	### Add an Exercise
-
-Locate the tabs at the top of the page and select the **Exercises** tab. Then click on the **Add** button. On the modal, select a method to create an exercise. You can create an exercise:
-
-<Image src={Exercise} alt="Course page displaying sidebar menu with the exercise tab open" quality={100} />
-
-1. **From scratch**: Create an exercise by adding the questions yourself. This is handy if you’ve prepared your questions.
-    - Enter the exercise name and click on the **Finish** button.
-    - Click on the newly created exercise and provide the exercise description, due date, and question details.
-
-<Image src={FromScratch} alt="A pop-up displaying new exercise with an empty field" quality={100} />
-
-2. **Using a template**: You can select from an array of templates with predefined exercises complete with questions and options.
-    - Select a template and click on the **Finish** button.
-
-<Image src={UsingATemplate} alt="A pop-up displaying new exercise with an array of exercise templates" quality={100} />
-
-3. **Using AI**: AI helps you generate exercises directly from lesson notes.
-    - Enter the number of questions and options. Next, click on the **Generate** button.
-
-<Image src={UsingAI} alt="A pop-up displaying new exercise with two questions about the exercise content" quality={100} />
-
-#### Preview Exercise
-
-To preview the exercise, click on the **preview icon**. This is to ensure the exercise looks and functions as expected.
-
-<Image src={Preview} alt="Exercise content edit page" quality={100} />
-
-#### Add Questions
-
-To add a question, click on the **add icon**.
-
-<Image src={AddQuestion} alt="Exercise content edit page with a red box highlight on the add icon" quality={100} />
-
-#### Reorder Questions
-
-To reorder questions, click on the **three dots** > **Reorder Questions**, then drag and drop the questions.
-
-<Image src={ReorderQuestions} alt="A pop-up showing the question order for exercise" quality={100} />
-
-#### Save Changes
-
-After previewing, adding, and rearranging questions, ensure to save your changes by clicking on the **Save** button. This will apply your modifications to the exercise.
-
-### Your Exercise Is Ready
-
-You’ve successfully created your first exercise and It is now accessible to students enrolled in the course. Move on to the next section to start grading your exercise.
-
-<Image src={NewExercise} alt="Course page displaying sidebar menu with the exercise tab open showing the newly created exercise" quality={100} />
-
-</Steps>

apps/docs/pages/howtoguides/grade-exercise.mdx

@@ -1,7 +0,0 @@
-import { Callout } from "nextra/components";
-
-# How to Grade an Exercise
-
-<Callout emoji='🚨'>
-	This page is a work in progress. Help us expand it by contributing!
-</Callout>

apps/docs/pages/howtoguides/invite-students.mdx

@@ -1,7 +0,0 @@
-import { Callout } from "nextra/components";
-
-# How to Invite Students
-
-<Callout emoji='🚨'>
-	This page is a work in progress. Help us expand it by contributing!
-</Callout>

apps/docs/pages/howtoguides/invite-team-member.mdx

@@ -1,7 +0,0 @@
-import { Callout } from "nextra/components";
-
-# Inviting a Team Member
-
-<Callout emoji='🚨'>
-	This page is a work in progress. Help us expand it by contributing!
-</Callout>

apps/docs/pages/howtoguides/setup-profile.mdx

@@ -1,35 +0,0 @@
-import Image from 'next/image';
-import { Steps } from 'nextra/components';
-import classroomioBasePage from './images/classroomio.webp';
-import signUpPage from './images/login-page.webp';
-import unEditedProfilePage from './images/unedited-profile-page.webp';
-import editedProfilePage from './images/edited-profile-page.webp';
-
-# Setup Profile
-
-<Steps>
-### Go to Classroomio
-
-Go to [app.classroomio.com](https://app.classroomio.com). Click on the "Login"" button on the top right to take you to the Login page.
-
-<Image src={classroomioBasePage} alt="Classroomio Page" quality="100" />
-
-### Sign In
-
-Sign in with your email & password.
-
-<Image src={signUpPage} alt="Classroomio Page" quality="100" />
-
-### Go to the Settings page
-
-Click on the "Settings" button on the lower left corner on your dashboard page and you'll be routed to the profile page.
-
-<Image src={unEditedProfilePage} alt="Unedited Profile Page" quality="100" />
-
-### Make Changes
-
-Upload a profile picture and edit any input field you want to then click "Update Profile".
-
-<Image src={editedProfilePage} alt="Edited Profile Page" quality="100" />
-
-</Steps>

apps/docs/pages/howtoguides/take-attendance.mdx

@@ -1,7 +0,0 @@
-import { Callout } from "nextra/components";
-
-# How to Take Attendance
-
-<Callout emoji='🚨'>
-	This page is a work in progress. Help us expand it by contributing!
-</Callout>

apps/docs/pages/index.mdx

@@ -1,11 +0,0 @@
-# The ClassroomIO Documentation
-
-<br />
-<img
-  alt="A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations"
-  src="https://brand.cdn.clsrio.com/og/classroomio-og.png"
-/>
-
-This is the documentation for ClassroomIO, a platform to streamline training for everyone. Our all-in-one platform empowers bootcamps, educators, and businesses to manage training programs easily. Anyone can run multiple classes and cohorts all from one UI, the application is mobile-first, which means that students can access all published content from any device.
-
-It covers everything from setup to usage. You'd find a well detailed explanation of the core features ClassroomIO offers and how to take advantage of them. Developers and Designers can find everything they need to successfully contribute to the project. For more practical usage, we've got a ton of guides ranging from simple functionalities to more complex ones. If there is something we don't cover in this documentation, please feel free to open an issue and we can pick it up from there.

apps/docs/pages/organization.mdx

@@ -1,9 +0,0 @@
-import { Callout } from "nextra/components";
-
-# Organization
-
-<Callout emoji='🚨'>
-	This page is a work in progress. Help us expand it by contributing!
-</Callout>
-
-We will write about organizations here

apps/docs/pages/quickstart/signup.mdx

@@ -1,68 +0,0 @@
-import Image from 'next/image';
-import { Steps } from 'nextra/components';
-import DashboardHomePageSignedin from './images/dashboard-homepage-signedin.webp';
-import DashboardHomePageSignedout from './images/dashboard-homepage-signedout.webp';
-import DashboardOnboardingPage1 from './images/onboarding-page1.webp';
-import DashboardOnboardingPage2 from './images/onboarding-page2.webp';
-import DashboardSignupPage from './images/signup-page.webp';
-
-# Sign Up for ClassroomIO
-
-If you're new to ClassroomIO, you must create an account to set up and launch your organization. By signing up, you'll gain access to all the [exciting features we offer](https://www.classroomio.com/docs/what-is-classroomio#key-features) to supercharge your classroom.
-
-<Steps>
-### Go to the Signup Page
-
-Navigate to [app.classroomio.com](https://app.classroomio.com) and click the **Signup** button at the top right corner of the page.
-
-<Image
-  src={DashboardHomePageSignedout}
-  alt="ClassroomIO website with a navigation bar at the top of the page containing the logo on the left along with the login and signup button on the right. Also, the page contains an email field with a Join waiting list button."
-  quality="100"
-/>
-
-### Fill the Signup Form
-
-On the signup page, enter your **valid email address**. Next, create a secure password with a **minimum of 6 characters** and confirm it. Click **Create Account**.
-
-You can also sign up using your Google account.
-
-<Image
-  src={DashboardSignupPage}
-  alt="ClassroomIO sign-up page with a sign-up form containing inputs for Your Name, Your Password, and, Confirm Password. At the bottom, there is a Create Account button, a Sign up with Google button, and, a link to log in if you already have an account."
-  quality="100"
-/>
-
-### Complete the Onboarding
-
-After completing the Signup form, you'll be redirected to the **Onboarding** page. There, you'll provide your **Full Name** and **Name of Organization.** As you enter your organization name, the **Organization Site Name** field will auto-fill. To proceed, click **Continue**.
-
-<Image
-  src={DashboardOnboardingPage1}
-  alt="ClassroomIO onboarding page with a form containing inputs for Full Name, Name of Organization, and, Organization Site Name. At the bottom, there is a Continue button."
-  quality="100"
-/>
-
-Next, you'll complete a brief survey regarding what brought you to ClassroomIO and how you discovered our platform. Your responses will help us tailor ClassroomIO's features to best suit your needs. Finally, click **Continue** to submit.
-
-<Image
-  src={DashboardOnboardingPage2}
-  alt="ClassroomIO second slide of onboarding page with a questionnaire"
-  quality="100"
-/>
-
-### Welcome to the Dashboard
-
-You are successfully signed up and ready to use ClassroomIO when you see the dashboard.
-
-<Image
-  src={DashboardHomePageSignedin}
-  alt="ClassroomIO dashboard with a big pop-up containing a welcome message"
-  quality="100"
-/>
-
-### What Next?
-
-After signing up successfully, you can now set up and [customize your Organization](https://www.classroomio.com/docs/howtoguides/customize-organization)
-
-</Steps>

apps/docs/pages/student-dashboard.mdx

@@ -1,7 +0,0 @@
-import { Callout } from "nextra/components";
-
-# Student Dashboard
-
-<Callout emoji='🚨'>
-	This page is a work in progress. Help us expand it by contributing!
-</Callout>

apps/docs/postcss.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}