chore: remove docs-v2
This commit is contained in:
Rotimi Best
@@ -1,19 +0,0 @@
|
||||
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
|
||||
@@ -1,14 +0,0 @@
|
||||
# docs
|
||||
|
||||
This is a Tanstack Start application generated with
|
||||
[Create Fumadocs](https://github.com/fuma-nama/fumadocs).
|
||||
|
||||
Run development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
yarn dev
|
||||
```
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
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>
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
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>
|
||||
@@ -1,46 +0,0 @@
|
||||
---
|
||||
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 user.
|
||||
|
||||
## Obtain Your RapidAPI Key
|
||||
|
||||
Follow these steps:
|
||||
|
||||
1. Open your browser and navigate to https://rapidapi.com/hub.
|
||||
2. Sign up using your GitHub account or email, whichever you prefer.
|
||||
3. Search for 'Google Translate' then click on the 'Pricing' tab.
|
||||
4. Choose a subscription plan and return to the 'Endpoints' tab.
|
||||
5. Focus on the last tab (on your right).
|
||||
6. Your key is located in the 'headers' object under 'X-RapidAPI-Key'.
|
||||
7. Go to your `.env` file in the `/apps/dashboard` directory and assign your key to this variable `RAPID_API_KEY`
|
||||
|
||||
## Update Your English File
|
||||
|
||||
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`.
|
||||
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
|
||||
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").
|
||||
Note: `$t('')` returns a string.
|
||||
|
||||
## Run the translate script
|
||||
|
||||
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:
|
||||
|
||||
```zsh title="Terminal"
|
||||
pnpm run script:translate
|
||||
```
|
||||
|
||||
This command runs a script that updates the other translation files.
|
||||
@@ -1,6 +0,0 @@
|
||||
---
|
||||
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.
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
title: Login with Demo Accounts
|
||||
description: Quick login guide using demo accounts for testing.
|
||||
---
|
||||
|
||||
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).
|
||||
|
||||
<Callout>
|
||||
The assumption of this guide is that you've gone through our README and you've setup `supabase`
|
||||
and you have `dashboard` running locally.
|
||||
</Callout>
|
||||
|
||||
## 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.
|
||||
|
||||
**Login:** [email protected]
|
||||
|
||||
**Password:** 123456
|
||||
|
||||
<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"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowFullScreen
|
||||
style={{ borderRadius: '8px' }}
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
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>
|
||||
@@ -1,32 +0,0 @@
|
||||
---
|
||||
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.
|
||||
|
||||
## Issue Hunters
|
||||
|
||||
Did you stumble upon a bug? Encountered a hiccup in deployment? Perhaps you have some user feedback to share? Your quickest route to help us out is by [raising an issue](https://github.com/rotimi-best/classroomio/issues/new/choose).
|
||||
|
||||
## Feature Architects
|
||||
|
||||
We invite innovative minds to contribute to the evolution of ClassroomIO. If you have a compelling feature proposal that could enhance our platform, please initiate a formal issue submission and apply the "Enhancement" label. We highly value and eagerly anticipate each unique idea presented by our community. To ensure thorough understanding and effective evaluation, kindly include a detailed rationale for your proposed feature. Your insights are crucial to our continuous growth and innovation.
|
||||
|
||||
## Pull Requests
|
||||
|
||||
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](/docs/contributor-guides/gitpod)
|
||||
|
||||
2. **Implementation:** Code it out, test it and apply your changes.
|
||||
|
||||
3. **Pull Request:** If you're ready to go, create a new pull request following our PR template
|
||||
|
||||
Would you prefer a chat before you dive into a lot of work? Our [Discord server](https://dub.sh/ciodiscord) is your harbor. Share your thoughts, and we'll meet you there with open arms. We're responsive and friendly, promise!
|
||||
|
||||
## Feature Ideas
|
||||
|
||||
If you spot a feature that isn't part of our official plan but could propel ClassroomIO forward, don't hesitate. Raise it as an enhancement issue, and let us know you're ready to take the lead. We'll be quick to respond.
|
||||
|
||||
Together, let's craft the future of ClassroomIO, making it better, bolder, and more brilliant!
|
||||
@@ -1,26 +0,0 @@
|
||||
---
|
||||
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.
|
||||
|
||||
[](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.
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
---
|
||||
title: Student Dashboard - Developers Guide
|
||||
description: Guide to setting up the student dashboard locally.
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
## Follow the steps in this video
|
||||
|
||||
### Requirements
|
||||
|
||||
<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
|
||||
production.
|
||||
</Callout>
|
||||
|
||||
### Demo
|
||||
|
||||
<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"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowFullScreen
|
||||
style={{ borderRadius: '8px' }}
|
||||
></iframe>
|
||||
</div>
|
||||
@@ -1,167 +0,0 @@
|
||||
---
|
||||
title: Supabase Cloud Setup
|
||||
description: Guide to setting up Supabase cloud for ClassroomIO.
|
||||
---
|
||||
|
||||
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.
|
||||
|
||||
## Who is this guide for?
|
||||
|
||||
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
|
||||
|
||||
If your requirement matches any of the above, then this guide is for you.
|
||||
|
||||
## Video Walkthrough
|
||||
|
||||
<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"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowFullScreen
|
||||
style={{ borderRadius: '8px' }}
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
|
||||
<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:
|
||||
|
||||
```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
|
||||
|
||||
|
||||
|
||||
- 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:
|
||||
|
||||
```zsh title="Terminal"
|
||||
supabase db push --db-url "URL HERE"
|
||||
```
|
||||
|
||||
<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
|
||||
|
||||
|
||||
|
||||
</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.
|
||||
|
||||
|
||||
|
||||
</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 [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:
|
||||
|
||||
- Sender email
|
||||
- Sender name
|
||||
- SMTP host
|
||||
- SMTP port
|
||||
- SMTP username
|
||||
- SMTP password
|
||||
|
||||
|
||||
|
||||
<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:
|
||||
|
||||
```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:
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Tada - That's all
|
||||
|
||||
Now you can run:
|
||||
|
||||
```zsh title="Terminal"
|
||||
pnpm dev --filter=dashboard
|
||||
```
|
||||
|
||||
- Open the url in your browser
|
||||
- Click on Sign up
|
||||
- And that's it...
|
||||
|
||||
<Callout title="ℹ️ Learn More">
|
||||
Visit the [Sign up guide](/docs/quickstart/signup) to learn how to signup
|
||||
</Callout>
|
||||
|
||||
</Step>
|
||||
</Steps>
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
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>
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
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.
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
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>
|
||||
@@ -1,26 +0,0 @@
|
||||
---
|
||||
title: Create a Course Landing Page
|
||||
description: Learn how to 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.**
|
||||
|
||||
## 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 displayed in the image below. Click on the desired course to proceed to its respective dashboard.
|
||||
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
|
||||
@@ -1,107 +0,0 @@
|
||||
---
|
||||
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.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Select a Course
|
||||
|
||||
On the courses page, click on a course to go to the course page.
|
||||
|
||||
|
||||
|
||||
</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.
|
||||
|
||||
|
||||
|
||||
</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:
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Preview Exercise
|
||||
|
||||
To preview the exercise, click on the **preview icon**. This is to ensure the exercise looks and functions as expected.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Add Questions
|
||||
|
||||
To add a question, click on the **add icon**.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Reorder Questions
|
||||
|
||||
To reorder questions, click on the **three dots** > **Reorder Questions**, then drag and drop the questions.
|
||||
|
||||
|
||||
|
||||
</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.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
</Steps>
|
||||
@@ -1,104 +0,0 @@
|
||||
---
|
||||
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';
|
||||
|
||||
|
||||
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 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"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||||
allowFullScreen
|
||||
style={{ borderRadius: '8px' }}
|
||||
></iframe>
|
||||
</div>
|
||||
|
||||
## Procedure
|
||||
|
||||
Initiating a course on ClassroomIO is a straightforward process, involving the following steps:
|
||||
|
||||
1. **Accessing the Course Section:** Navigate to the admin dashboard and select "Courses" from the sidebar menu.
|
||||
|
||||
2. **Initiating Course Creation:** Once on the Courses page, locate and click the "Create Course" button situated in the top right corner of the interface.
|
||||
|
||||
3. **Providing Course Details:** Complete the necessary fields, including the course title and description. Optionally, utilize the wand icon next to the description field for AI-assisted generation.
|
||||
|
||||
Upon completion, click **Finish** to save and automatically redirect to the course page.
|
||||
|
||||
## Next Steps
|
||||
|
||||
Following course creation, consider the following enhancements:
|
||||
|
||||
- Adding Lessons
|
||||
- Including Notes
|
||||
- Generating Notes with AI
|
||||
- Embedding Slides
|
||||
- Embedding YouTube Videos
|
||||
|
||||
## Adding Lessons
|
||||
|
||||
Adding lessons to a course is achieved through the following steps:
|
||||
|
||||
<Steps>
|
||||
<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 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.
|
||||
|
||||
## Adding Notes
|
||||
|
||||
Notes can be added to a lesson manually or via AI assistance:
|
||||
|
||||
1. Click "Edit" while on the materials tab of the lesson page.
|
||||
2. Navigate to the notes tab if not already selected.
|
||||
3. Input your lesson content using the provided text editor or utilize AI assistance by clicking the **magic wand** icon.
|
||||
4. Click "Done" in the top right corner to save your note.
|
||||
|
||||
### Generating Notes with AI
|
||||
|
||||
The assistive AI can generate notes based on your lesson topic, offering options such as generating an outline, notes, or activities, streamlining the note creation process.
|
||||
|
||||
## Embedding Slides
|
||||
|
||||
To embed slides, navigate to the slides tab and input the link to the slides. Click "Done" to save your slides.
|
||||
|
||||
## Embedding Videos
|
||||
|
||||
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 type="warn">
|
||||
Please note that for now, we do not support adding videos from local sources.
|
||||
</Callout>
|
||||
|
||||
## Publishing a course
|
||||
|
||||
To publish a course, navigate to the settings section in the sidebar of the course page. Scroll down to find the "Publish Course" option and toggle it to "Publish". Finally, click the "Save Changes" button to ensure your modifications are saved.
|
||||
@@ -1,98 +0,0 @@
|
||||
---
|
||||
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';
|
||||
|
||||
|
||||
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**.
|
||||
|
||||
|
||||
|
||||
## Update Organization Profile
|
||||
|
||||
Easily update your organization's profile by modifying the designated fields in the Organization Profile section of the Settings page. Here, you can update your organization name and logo with your preferred choices.
|
||||
|
||||
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
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Update the URL Field with Your Preferred Choice
|
||||
|
||||
Fill the field with your desired URL.
|
||||
|
||||
|
||||
|
||||
</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.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
</Steps>
|
||||
|
||||
<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 across your entire application.
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
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>
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
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>
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
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>
|
||||
@@ -1,12 +0,0 @@
|
||||
{
|
||||
"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"
|
||||
}
|
||||
@@ -1,45 +0,0 @@
|
||||
---
|
||||
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.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Sign In
|
||||
|
||||
Sign in with your email & password.
|
||||
|
||||
|
||||
|
||||
</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.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Make Changes
|
||||
|
||||
Upload a profile picture and edit any input field you want to then click "Update Profile".
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
</Steps>
|
||||
@@ -1,11 +0,0 @@
|
||||
---
|
||||
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>
|
||||
@@ -1,19 +0,0 @@
|
||||
{
|
||||
"pages": [
|
||||
"---Introduction---",
|
||||
"home",
|
||||
"what-is-classroomio",
|
||||
"quickstart",
|
||||
|
||||
"---Core Features---",
|
||||
"course",
|
||||
"audience",
|
||||
"community",
|
||||
"organization",
|
||||
"student-dashboard",
|
||||
|
||||
"---Guides---",
|
||||
"how-to-guides",
|
||||
"contributor-guides"
|
||||
]
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
---
|
||||
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.
|
||||
@@ -1,5 +0,0 @@
|
||||
{
|
||||
"signup": "Sign Up",
|
||||
"onboarding": "Onboarding",
|
||||
"self-hosting": "Self-hosting"
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
---
|
||||
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.
|
||||
|
||||
1. Set your profile picture
|
||||
2. Set your organization details
|
||||
3. Customize your organization landing page
|
||||
4. Create your first course
|
||||
5. Share your course with students
|
||||
@@ -1,170 +0,0 @@
|
||||
---
|
||||
title: Self-hosting ClassroomIO
|
||||
description: Guide to self-hosting ClassroomIO on your own servers.
|
||||
---
|
||||
|
||||
import { Callout } from 'fumadocs-ui/components/callout';
|
||||
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
||||
|
||||
This guide will help you quickly self-host ClassroomIO.
|
||||
|
||||
|
||||
|
||||
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
|
||||
|
||||
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:
|
||||
|
||||
1. SMTP values - For sending emails on the api
|
||||
2. Supabase - For the database used on the dashboard
|
||||
3. Cloudflare R2 (optional) - Video uploads on the api
|
||||
|
||||
## SMTP Setup
|
||||
|
||||
Both for the supabase and api setup, you'd need a custom SMTP for email sending. Most importantly you need these values:
|
||||
|
||||
```zsh title="env"
|
||||
SMTP_HOST=
|
||||
SMTP_PORT=
|
||||
SMTP_USER=
|
||||
SMTP_PASSWORD=
|
||||
SMTP_SENDER=
|
||||
```
|
||||
|
||||
Make sure you have them handy because you'd need them while we go through this self-hosting guide.
|
||||
|
||||
<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 [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](/docs/contributor-guides/supabase-cloud).
|
||||
|
||||
After you go through that guide you will need the following environment variables, please also store them somewhere:
|
||||
|
||||
```zsh title="env"
|
||||
PUBLIC_SUPABASE_URL=
|
||||
PUBLIC_SUPABASE_ANON_KEY=
|
||||
PRIVATE_SUPABASE_SERVICE_ROLE=
|
||||
```
|
||||
|
||||
## Cloudflare R2
|
||||
|
||||
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 title="Work in Progress">This section is a work in progress.</Callout>
|
||||
|
||||
## Deploy on Railway
|
||||
|
||||
Now you have everything you need and you are ready to deploy the api and dashboard.
|
||||
|
||||
Go ahead and click this button to get started.
|
||||
|
||||
[](https://railway.app/template/dl9RG7?referralCode=8OyIj5)
|
||||
|
||||
### Environment Variables
|
||||
|
||||
#### cio-api
|
||||
|
||||
```zsh title="env"
|
||||
# Required
|
||||
SMTP_HOST=""
|
||||
SMTP_PORT=""
|
||||
SMTP_USER=""
|
||||
SMTP_SENDER=""
|
||||
SMTP_PASSWORD=""
|
||||
PUBLIC_SUPABASE_URL=""
|
||||
PUBLIC_SUPABASE_ANON_KEY=""
|
||||
|
||||
# Optional
|
||||
CLOUDFLARE_BUCKET_ID=""
|
||||
CLOUDFLARE_ACCESS_KEY=""
|
||||
CLOUDFLARE_ACCOUNT_ID=""
|
||||
CLOUDFLARE_BUCKET_DOMAIN=""
|
||||
CLOUDFLARE_SECRET_ACCESS_KEY=""
|
||||
SENTRY_DNS=""
|
||||
```
|
||||
|
||||
<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
|
||||
|
||||
```zsh title="env"
|
||||
# Required
|
||||
PUBLIC_SUPABASE_URL=""
|
||||
PUBLIC_SUPABASE_ANON_KEY=""
|
||||
PRIVATE_SUPABASE_SERVICE_ROLE=""
|
||||
PUBLIC_SERVER_URL=""
|
||||
|
||||
# Optional
|
||||
OPENAI_API_KEY=""
|
||||
PUBLIC_IP_REGISTRY_KEY=""
|
||||
UNSPLASH_API_KEY=""
|
||||
PRIVATE_APP_HOST=""
|
||||
PRIVATE_APP_SUBDOMAINS=""
|
||||
```
|
||||
|
||||
<Callout title="Learn More">
|
||||
Learn more about the environment variables
|
||||
[here](https://github.com/rotimi-best/classroomio/blob/main/apps/dashboard/.env.example)
|
||||
</Callout>
|
||||
|
||||
## Using Docker
|
||||
|
||||
We provide a docker-compose configuration to deploy both the api and dashboard services. Here's how to use it:
|
||||
|
||||
1. Clone the repository:
|
||||
|
||||
```zsh title="Terminal"
|
||||
git clone https://github.com/rotimi-best/classroomio.git
|
||||
cd classroomio
|
||||
```
|
||||
|
||||
2. Create a `.env` file with your environment variables (see Environment Variables section above)
|
||||
|
||||
3. Start the services:
|
||||
|
||||
```zsh title="Terminal"
|
||||
docker compose up --build
|
||||
```
|
||||
|
||||
The services will be available at:
|
||||
|
||||
- Dashboard: http://localhost:3082
|
||||
- Backend: http://localhost:3081
|
||||
|
||||
### Service Configuration
|
||||
|
||||
The docker-compose file sets up two services:
|
||||
|
||||
#### Backend Service
|
||||
|
||||
- Runs on port 3081
|
||||
- Uses Node.js slim image
|
||||
- Mounts the api code directory
|
||||
- Requires environment variables for:
|
||||
- Supabase configuration
|
||||
- Cloudflare R2 for video uploads
|
||||
- SMTP for email notifications
|
||||
|
||||
#### Dashboard Service
|
||||
|
||||
- Runs on port 3082
|
||||
- Uses Node.js Alpine image
|
||||
- Uses pnpm for package management
|
||||
- Requires environment variables for:
|
||||
- Supabase configuration
|
||||
- Application settings
|
||||
- Optional API keys (OpenAI, Unsplash)
|
||||
|
||||
Note: We're currently working on including Supabase in the docker-compose file. If you'd like to help with this, please open a PR on GitHub! 👍
|
||||
@@ -1,59 +0,0 @@
|
||||
---
|
||||
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.
|
||||
|
||||
|
||||
|
||||
</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.
|
||||
|
||||
|
||||
|
||||
</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**.
|
||||
|
||||
|
||||
|
||||
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.
|
||||
|
||||
|
||||
|
||||
</Step>
|
||||
|
||||
<Step>
|
||||
### Welcome to the Dashboard
|
||||
|
||||
You are successfully signed up and ready to use ClassroomIO when you see the dashboard.
|
||||
|
||||
|
||||
|
||||
</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>
|
||||
@@ -1,10 +0,0 @@
|
||||
---
|
||||
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>
|
||||
@@ -1,22 +0,0 @@
|
||||
---
|
||||
title: What is ClassroomIO
|
||||
description: Learn about ClassroomIO and its key features.
|
||||
---
|
||||
|
||||
<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
|
||||
|
||||
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
|
||||
|
||||
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.
|
||||
3. **🤖 AI Integration:** We've got OpenAI integration for quick course creation where you can generate course content, lesson outlines, and even generate assignments right from your lesson notes.
|
||||
4. **💬 Forum:** Students can ask questions in your dedicated community and get answers from either you or other students.
|
||||
5. **🏆 Kahoot-Like Quiz:** You can create live quizzes to create more engagement in your classrooms.
|
||||
6. **💻 Dedicated Student Dashboard:** Once you create an account, you get a dedicated dashboard where your students can access all their courses, assignments, and more.
|
||||
7. **🔒 Fully open source:** You can self-host the entire stack on your servers.
|
||||
@@ -1,37 +0,0 @@
|
||||
{
|
||||
"name": "@cio/docs-v2",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"start": "node .output/server/index.mjs",
|
||||
"types:check": "fumadocs-mdx && tsc --noEmit",
|
||||
"postinstall": "fumadocs-mdx"
|
||||
},
|
||||
"dependencies": {
|
||||
"@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": {
|
||||
"@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"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 270 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 89 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 156 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 356 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 735 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 939 B |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
@@ -1,7 +0,0 @@
|
||||
import { defineConfig, defineDocs } from 'fumadocs-mdx/config';
|
||||
|
||||
export const docs = defineDocs({
|
||||
dir: 'content/docs'
|
||||
});
|
||||
|
||||
export default defineConfig();
|
||||
@@ -1,28 +0,0 @@
|
||||
import { Link } from '@tanstack/react-router';
|
||||
import { HomeLayout } from 'fumadocs-ui/layouts/home';
|
||||
|
||||
export function NotFound() {
|
||||
return (
|
||||
<HomeLayout
|
||||
nav={{
|
||||
title: 'ClassroomIO'
|
||||
}}
|
||||
className="justify-center py-32 text-center"
|
||||
>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<h1 className="text-fd-muted-foreground text-6xl font-bold">404</h1>
|
||||
<h2 className="text-2xl font-semibold">Page Not Found</h2>
|
||||
<p className="text-fd-muted-foreground max-w-md">
|
||||
The page you are looking for might have been removed, had its name changed, or is
|
||||
temporarily unavailable.
|
||||
</p>
|
||||
<Link
|
||||
to="/"
|
||||
className="bg-fd-primary text-fd-primary-foreground mt-4 rounded-lg px-4 py-2 text-sm font-medium transition-opacity hover:opacity-90"
|
||||
>
|
||||
Back to Home
|
||||
</Link>
|
||||
</div>
|
||||
</HomeLayout>
|
||||
);
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
|
||||
import { SquareArrowOutUpRight } from 'lucide-react';
|
||||
|
||||
export function baseOptions(): BaseLayoutProps {
|
||||
return {
|
||||
nav: {
|
||||
title: (
|
||||
<div className="flex items-center gap-2">
|
||||
<img src="/docs/logo-192.png" className="size-8" alt="ClassroomIO logo" />
|
||||
<span className="font-medium">ClassroomIO</span>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
links: [
|
||||
{
|
||||
text: (
|
||||
<div className="flex items-center gap-2">
|
||||
Contact <SquareArrowOutUpRight />
|
||||
</div>
|
||||
),
|
||||
url: 'https://twitter.com/classroomio',
|
||||
external: true
|
||||
},
|
||||
{
|
||||
text: (
|
||||
<div className="flex items-center gap-2">
|
||||
Demo <SquareArrowOutUpRight />
|
||||
</div>
|
||||
),
|
||||
url: 'https://dub.sh/ciodemo',
|
||||
external: true
|
||||
},
|
||||
{
|
||||
text: (
|
||||
<div className="flex items-center gap-2">
|
||||
Dashboard <SquareArrowOutUpRight />
|
||||
</div>
|
||||
),
|
||||
url: 'https://app.classroomio.com/',
|
||||
external: true
|
||||
},
|
||||
{
|
||||
type: 'icon',
|
||||
label: 'Discord',
|
||||
icon: (
|
||||
<img
|
||||
src="/docs/discord-blue.png"
|
||||
alt="discord icon"
|
||||
className="w-7 transition-all duration-500 hover:scale-90"
|
||||
/>
|
||||
),
|
||||
text: 'Discord',
|
||||
url: 'https://dub.sh/ciodiscord',
|
||||
external: true
|
||||
}
|
||||
],
|
||||
githubUrl: 'https://github.com/classroomio/classroomio'
|
||||
};
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { loader } from 'fumadocs-core/source';
|
||||
import * as icons from 'lucide-static';
|
||||
import { docs } from 'fumadocs-mdx:collections/server';
|
||||
|
||||
export const source = loader({
|
||||
source: docs.toFumadocsSource(),
|
||||
baseUrl: '/',
|
||||
icon(icon) {
|
||||
if (!icon) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (icon in icons) return icons[icon as keyof typeof icons];
|
||||
},
|
||||
});
|
||||
@@ -1,13 +0,0 @@
|
||||
import { NotFound } from '@/components/not-found';
|
||||
import { createRouter as createTanStackRouter } from '@tanstack/react-router';
|
||||
import { routeTree } from './routeTree.gen';
|
||||
|
||||
export function getRouter() {
|
||||
return createTanStackRouter({
|
||||
basepath: '/docs',
|
||||
defaultNotFoundComponent: NotFound,
|
||||
defaultPreload: 'intent',
|
||||
routeTree,
|
||||
scrollRestoration: true
|
||||
});
|
||||
}
|
||||
@@ -1,112 +0,0 @@
|
||||
import { useMemo } from 'react';
|
||||
import defaultMdxComponents from 'fumadocs-ui/mdx';
|
||||
import { DocsLayout } from 'fumadocs-ui/layouts/docs';
|
||||
import { createServerFn } from '@tanstack/react-start';
|
||||
import type * as PageTree from 'fumadocs-core/page-tree';
|
||||
import browserCollections from 'fumadocs-mdx:collections/browser';
|
||||
import { createFileRoute, notFound } from '@tanstack/react-router';
|
||||
import { DocsBody, DocsDescription, DocsPage, DocsTitle } from 'fumadocs-ui/layouts/docs/page';
|
||||
|
||||
import { source } from '@/lib/source';
|
||||
import { baseOptions } from '@/lib/layout.shared';
|
||||
import { HomeLayout } from 'fumadocs-ui/layouts/home';
|
||||
|
||||
export const Route = createFileRoute('/$')({
|
||||
component: Page,
|
||||
loader: async ({ params }) => {
|
||||
const slugs = params._splat?.split('/') ?? [];
|
||||
const data = await loader({ data: slugs });
|
||||
await clientLoader.preload(data.path);
|
||||
return data;
|
||||
}
|
||||
});
|
||||
|
||||
const loader = createServerFn({
|
||||
method: 'GET'
|
||||
})
|
||||
.inputValidator((slugs: string[]) => slugs)
|
||||
.handler(async ({ data: slugs }) => {
|
||||
const page = source.getPage(slugs);
|
||||
if (!page) throw notFound();
|
||||
|
||||
return {
|
||||
tree: source.pageTree as object,
|
||||
path: page.path
|
||||
};
|
||||
});
|
||||
|
||||
const clientLoader = browserCollections.docs.createClientLoader({
|
||||
component({ toc, frontmatter, default: MDX }) {
|
||||
return (
|
||||
<DocsPage toc={toc}>
|
||||
<DocsTitle>{frontmatter.title}</DocsTitle>
|
||||
<DocsDescription>{frontmatter.description}</DocsDescription>
|
||||
<DocsBody>
|
||||
<MDX
|
||||
components={{
|
||||
...defaultMdxComponents
|
||||
}}
|
||||
/>
|
||||
</DocsBody>
|
||||
</DocsPage>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
function Page() {
|
||||
const data = Route.useLoaderData();
|
||||
const Content = clientLoader.getComponent(data.path);
|
||||
const tree = useMemo(() => transformPageTree(data.tree as PageTree.Folder), [data.tree]);
|
||||
|
||||
return (
|
||||
<HomeLayout {...baseOptions()}>
|
||||
<DocsLayout
|
||||
sidebar={{
|
||||
collapsible: false
|
||||
}}
|
||||
themeSwitch={{
|
||||
enabled: false
|
||||
}}
|
||||
searchToggle={{
|
||||
enabled: false
|
||||
}}
|
||||
tree={tree}
|
||||
>
|
||||
<Content />
|
||||
</DocsLayout>
|
||||
</HomeLayout>
|
||||
);
|
||||
}
|
||||
|
||||
function transformPageTree(root: PageTree.Root): PageTree.Root {
|
||||
function mapNode<T extends PageTree.Node>(item: T): T {
|
||||
if (typeof item.icon === 'string') {
|
||||
item = {
|
||||
...item,
|
||||
icon: (
|
||||
<span
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: item.icon
|
||||
}}
|
||||
/>
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
if (item.type === 'folder') {
|
||||
return {
|
||||
...item,
|
||||
index: item.index ? mapNode(item.index) : undefined,
|
||||
children: item.children.map(mapNode)
|
||||
};
|
||||
}
|
||||
|
||||
return item;
|
||||
}
|
||||
|
||||
return {
|
||||
...root,
|
||||
children: root.children.map(mapNode),
|
||||
fallback: root.fallback ? transformPageTree(root.fallback) : undefined
|
||||
};
|
||||
}
|
||||
@@ -1,118 +0,0 @@
|
||||
import * as React from 'react';
|
||||
|
||||
import { HeadContent, Outlet, Scripts, createRootRoute } from '@tanstack/react-router';
|
||||
|
||||
import { RootProvider } from 'fumadocs-ui/provider/tanstack';
|
||||
import appCss from '@/styles/app.css?url';
|
||||
|
||||
export const Route = createRootRoute({
|
||||
head: () => ({
|
||||
meta: [
|
||||
{
|
||||
charSet: 'utf-8'
|
||||
},
|
||||
{
|
||||
name: 'viewport',
|
||||
content: 'width=device-width, initial-scale=1'
|
||||
},
|
||||
{
|
||||
title: 'ClassroomIO | The Open Source Learning Management System for Companies'
|
||||
},
|
||||
{
|
||||
name: 'description',
|
||||
content:
|
||||
'A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations'
|
||||
},
|
||||
{
|
||||
property: 'og:url',
|
||||
content: 'https://classroomio.com/docs'
|
||||
},
|
||||
{
|
||||
property: 'og:type',
|
||||
content: 'website'
|
||||
},
|
||||
{
|
||||
property: 'og:title',
|
||||
content: 'ClassroomIO | The Open Source Learning Management System for Companies'
|
||||
},
|
||||
{
|
||||
property: 'og:description',
|
||||
content:
|
||||
'A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations'
|
||||
},
|
||||
{
|
||||
property: 'og:image:type',
|
||||
content: 'image/png'
|
||||
},
|
||||
{
|
||||
property: 'og:image:width',
|
||||
content: '1920'
|
||||
},
|
||||
{
|
||||
property: 'og:image:height',
|
||||
content: '1080'
|
||||
},
|
||||
{
|
||||
property: 'og:image:secure_url',
|
||||
itemProp: 'image',
|
||||
content: 'https://brand.cdn.clsrio.com/og/classroomio-og.png'
|
||||
},
|
||||
{
|
||||
name: 'twitter:card',
|
||||
content: 'summary_large_image'
|
||||
},
|
||||
{
|
||||
property: 'twitter:domain',
|
||||
content: 'classroomio.com'
|
||||
},
|
||||
{
|
||||
property: 'twitter:url',
|
||||
content: 'https://classroomio.com/docs'
|
||||
},
|
||||
{
|
||||
name: 'twitter:title',
|
||||
content: 'ClassroomIO | The Open Source Learning Management System for Companies'
|
||||
},
|
||||
{
|
||||
name: 'twitter:description',
|
||||
content:
|
||||
'A flexible, user-friendly platform for creating, managing, and delivering courses for companies and training organisations'
|
||||
},
|
||||
{
|
||||
name: 'twitter:creator',
|
||||
content: '@classroomio'
|
||||
},
|
||||
{
|
||||
name: 'twitter:image',
|
||||
content: 'https://brand.cdn.clsrio.com/og/classroomio-og.png'
|
||||
}
|
||||
],
|
||||
links: [
|
||||
{ rel: 'stylesheet', href: appCss },
|
||||
{ rel: 'icon', href: '/docs/favicon.ico' }
|
||||
]
|
||||
}),
|
||||
component: RootComponent
|
||||
});
|
||||
|
||||
function RootComponent() {
|
||||
return (
|
||||
<RootDocument>
|
||||
<Outlet />
|
||||
</RootDocument>
|
||||
);
|
||||
}
|
||||
|
||||
function RootDocument({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html suppressHydrationWarning>
|
||||
<head>
|
||||
<HeadContent />
|
||||
</head>
|
||||
<body className="flex min-h-screen flex-col">
|
||||
<RootProvider>{children}</RootProvider>
|
||||
<Scripts />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import { createFileRoute } from '@tanstack/react-router';
|
||||
import { source } from '@/lib/source';
|
||||
import { createFromSource } from 'fumadocs-core/search/server';
|
||||
|
||||
const server = createFromSource(source, {
|
||||
// https://docs.orama.com/docs/orama-js/supported-languages
|
||||
language: 'english',
|
||||
});
|
||||
|
||||
export const Route = createFileRoute('/api/search')({
|
||||
server: {
|
||||
handlers: {
|
||||
GET: async ({ request }) => server.GET(request),
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -1,12 +0,0 @@
|
||||
import { createFileRoute, redirect } from '@tanstack/react-router';
|
||||
|
||||
export const Route = createFileRoute('/')({
|
||||
beforeLoad: () => {
|
||||
throw redirect({
|
||||
to: '/$',
|
||||
params: {
|
||||
_splat: 'home'
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -1,7 +0,0 @@
|
||||
@import 'tailwindcss';
|
||||
@import 'fumadocs-ui/css/black.css';
|
||||
@import 'fumadocs-ui/css/preset.css';
|
||||
|
||||
body {
|
||||
--color-fd-primary: var(--color-blue-700);
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
{
|
||||
"include": ["**/*.ts", "**/*.tsx"],
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"jsx": "react-jsx",
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"lib": ["DOM", "DOM.Iterable", "ES2022"],
|
||||
"types": ["vite/client"],
|
||||
"isolatedModules": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"target": "ES2022",
|
||||
"allowJs": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["./src/*"],
|
||||
"fumadocs-mdx:collections/*": [".source/*"]
|
||||
},
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"rewrites": [
|
||||
{"source": "/", "destination": "https://classroomio-com.vercel.app/"},
|
||||
{"source": "/:match*", "destination": "https://classroomio-com.vercel.app/:match*"}
|
||||
]
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import mdx from 'fumadocs-mdx/vite';
|
||||
import { nitro } from 'nitro/vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
import { tanstackStart } from '@tanstack/react-start/plugin/vite';
|
||||
import tsConfigPaths from 'vite-tsconfig-paths';
|
||||
|
||||
export default defineConfig({
|
||||
server: {
|
||||
port: 3000
|
||||
},
|
||||
base: '/docs',
|
||||
plugins: [
|
||||
mdx(await import('./source.config')),
|
||||
tailwindcss(),
|
||||
tsConfigPaths({
|
||||
projects: ['./tsconfig.json']
|
||||
}),
|
||||
tanstackStart({
|
||||
prerender: {
|
||||
enabled: true
|
||||
}
|
||||
}),
|
||||
react(),
|
||||
// see https://tanstack.com/start/latest/docs/framework/react/guide/hosting for hosting config
|
||||
// we configured nitro by default
|
||||
nitro()
|
||||
]
|
||||
});
|
||||
Reference in New Issue
Block a user