feat: migrate docs from Nextra to Fumadocs (#606)

* feat: checkpoint * feat: Migrate docs to Fumadocs * chore: docs layout * chore: - remove home route - make docs home route - remove docs prefix * chore: docs layout * chore: - reorder sidebar - fix home page redirect * chore: rename package to avoid error during pnpm clean * chore: remove private and sideEffects properties from package.json * chore: requested fixes * feat: update fumadocs layout * feat: hide theme switch on sidebar * add /docs * feat: enhance documentation and layout with new guides and updates - Added multiple how-to guides for creating courses, exercises, and managing organization settings. - Updated existing documentation for clarity and consistency, including renaming sections for better navigation. - Introduced new assets such as logos and favicon for improved branding. - Modified layout components to enhance user experience and visual appeal. - Updated package dependencies to include lucide-react for icon usage. * chore: update pnpm-lock.yaml with dependency version changes * add favicon * fix: update links in documentation for consistency - Corrected the links in the create-exercise and signup guides to ensure they point to the correct paths, enhancing clarity and navigation for users. * delete docs --------- Co-authored-by: Rotimi Best <[email protected]>
2025-12-21 13:36:04 +01:00
parent ac1a05f006
commit 2526f4c227
126 changed files with 5808 additions and 1019 deletions
@@ -0,0 +1,5 @@
+{
+  "signup": "Sign Up",
+  "onboarding": "Onboarding",
+  "self-hosting": "Self-hosting"
+}
@@ -0,0 +1,13 @@
+---
+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
@@ -0,0 +1,170 @@
+---
+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.
+
+![Selfhost ClassroomIO](/selfhost-classroomio.webp)
+
+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.
+
+[![Deploy on Railway](https://railway.app/button.svg)](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! 👍
@@ -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>