ulivargas/classroomio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add docs for student dashboard + signup images

Browse Source
This commit is contained in:
Rotimi Best
2023-12-14 10:34:28 +03:00
parent 194bf98a56
commit 50b9389514
18 changed files with 169 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/dashboard/src/routes/onboarding/+page.svelte
+3
View File
@@ -176,9 +176,12 @@
siteName: undefined
})
.match({ id: $profile.id });
loading = false;
if (fields.fullname) {
$profile.fullname = fields.fullname;
triggerSendEmail(NOTIFICATION_NAME.WELCOME_TO_APP, {
to: $profile.email,
name: fields.fullname
apps/docs/package.json
+3
View File
@@ -26,6 +26,9 @@
},
"devDependencies": {
"@types/node": "18.11.10",
"autoprefixer": "^10.4.16",
"postcss": "^8.4.32",
"tailwindcss": "^3.3.6",
"typescript": "^4.9.3"
}
}
apps/docs/pages/contributor-guides/_meta.json
+1 -1
View File
@@ -2,5 +2,5 @@
"devs": "Developers Guide",
"gitpod": "Gitpod setup",
"design": "Designers Guide",
"local-student-dashboard": "Local Student Dashboard"
"student-dashboard": "Student Dashboard"
}
apps/docs/pages/contributor-guides/local-student-dashboard.mdx
-5
View File
@@ -1,5 +0,0 @@
import { Callout } from 'nextra/components';
# Local Student Dashboard
<Callout emoji="🚨">This page is a work in progress. Help us expand it by contributing!</Callout>
apps/docs/pages/contributor-guides/student-dashboard.mdx
+22
View File
@@ -0,0 +1,22 @@
import { Callout } from 'nextra/components';
# Student Dashboard - Developers guide
In this guide I will be showing you how to set up a local student dashboard for your students to use. 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 type="info" emoji="ℹ️">
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
<video width="100%" controls>
<source src="/local-student-dashboard-setup.mp4" type="video/mp4" />
</video>
apps/docs/pages/global.css
+3
View File
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
apps/docs/pages/index.mdx
+2 -2
View File
@@ -2,8 +2,8 @@
<br />
<img
alt='Spend less time on the boring stuff, and instead focus on impacting the lives of your students.'
src='https://classroomio.com/classroomio-opengraph-image.png'
alt="Spend less time on the boring stuff, and instead focus on impacting the lives of your students."
src="https://classroomio.com/classroomio-opengraph-image.png"
/>
This is the documentation for ClassroomIO, a platform for bootcamps, individual educators, and training businesses to bring teaching and learning into one place while at the same time helping them be 10x more productive. 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.
apps/docs/pages/quickstart/images/dashboard-homepage-signedin.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

apps/docs/pages/quickstart/images/dashboard-homepage-signedout.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

apps/docs/pages/quickstart/images/onboarding-page1.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

apps/docs/pages/quickstart/images/onboarding-page2.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

apps/docs/pages/quickstart/images/signup-page.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 34 KiB

apps/docs/pages/quickstart/signup.mdx
+18 -25
View File
@@ -1,46 +1,39 @@
import { Steps, Callout } from "nextra/components";
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';
# Signing Up for ClassroomIO
Signing up is currently disabled on production. Potential customers can only book a demo or try out our local setup.
## Signing up locally.
This assumption of this section is that you already have ClassroomIO setup locally.
To sign up do the following.
<Steps>
### Start the application locally
To get the application running locally, you should run this at the root of the project:
```js
pnpm dev --filter=dashboard
```
This will only startup the dashboard which powers all of the learning management features.
<Callout
type='info'
emoji='ℹ️'>
Note: Make sure you have installed all dependencies by running `pnpm i`
</Callout>
### Go to Sign up page
Once you startup the `dashboard`, you can open your browser and go to `http://localhost:5173`. Click on the signup button to take you to the Sign up page.
Got to [app.classroomio.com](https://app.classroomio.com). Click on the signup button on the top right to take you to the Sign up page.
<Image src={DashboardHomePageSignedout} alt="Dashboard before signin" quality="100" />
### Create an account
Once you are on the signup page, enter your email and a password made up of 6 or more characters
Once you are on the signup page, enter your email and a password made up of 6 or more characters.
<Image src={DashboardSignupPage} alt="Dashboard signin page" quality="100" />
### Complete the onboarding
Upon completing the signup flow, you will be redirected to the onboarding page. Here you can enter your fullname and your organization details and next you would share how you heard of ClassroomIO
<Image src={DashboardOnboardingPage1} alt="Dashboard onboarding page 1" quality="100" />
<Image src={DashboardOnboardingPage2} alt="Dashboard onboarding page 2" quality="100" />
### Welcome to the dashboard
After you go through the onboarding, you are successfully signed up and you are ready to start using the platform.
<Image src={DashboardHomePageSignedin} alt="Dashboard after signing in" quality="100" />
</Steps>
apps/docs/postcss.config.js
+6
View File
@@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
apps/docs/public/local-student-dashboard-setup.mp4
BIN
View File
Binary file not shown.
apps/docs/tailwind.config.js
+14
View File
@@ -0,0 +1,14 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./pages/**/*.{js,jsx,ts,tsx,md,mdx}',
'./components/**/*.{js,jsx,ts,tsx,md,mdx}',
// Or if using `src` directory:
'./src/**/*.{js,jsx,ts,tsx,md,mdx}'
],
theme: {
extend: {}
},
plugins: []
};
apps/docs/tsconfig.json
+1 -1
View File
@@ -15,6 +15,6 @@
"isolatedModules": true,
"jsx": "preserve"
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/_app.js"],
"exclude": ["node_modules"]
}
pnpm-lock.yaml
Generated
+96 -31
View File
@@ -296,6 +296,15 @@ importers:
'@types/node':
specifier: 18.11.10
version: 18.11.10
autoprefixer:
specifier: ^10.4.16
version: 10.4.16([email protected])
postcss:
specifier: ^8.4.32
version: 8.4.32
tailwindcss:
specifier: ^3.3.6
version: 3.3.6
typescript:
specifier: ^4.9.3
version: 4.9.3
@@ -4152,7 +4161,7 @@ packages:
'@vue/shared': 3.3.8
estree-walker: 2.0.2
magic-string: 0.30.5
postcss: 8.4.31
postcss: 8.4.32
source-map-js: 1.0.2
dev: false
@@ -4496,6 +4505,22 @@ packages:
postcss-value-parser: 4.2.0
dev: true
/[email protected]([email protected]):
resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==}
engines: {node: ^10 || ^12 || >=14}
hasBin: true
peerDependencies:
postcss: ^8.1.0
dependencies:
browserslist: 4.22.1
caniuse-lite: 1.0.30001564
fraction.js: 4.3.7
normalize-range: 0.1.2
picocolors: 1.0.0
postcss: 8.4.32
postcss-value-parser: 4.2.0
dev: true
/[email protected]:
resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==}
engines: {node: '>= 0.4'}
@@ -6069,9 +6094,9 @@ packages:
eslint-compat-utils: 0.1.2([email protected])
esutils: 2.0.3
known-css-properties: 0.29.0
postcss: 8.4.31
postcss-load-config: 3.1.4([email protected]1)
postcss-safe-parser: 6.0.0([email protected]1)
postcss: 8.4.32
postcss-load-config: 3.1.4([email protected]2)
postcss-safe-parser: 6.0.0([email protected]2)
postcss-selector-parser: 6.0.13
semver: 7.5.4
svelte: 4.1.2
@@ -9067,27 +9092,27 @@ packages:
resolution: {integrity: sha512-Nc3IT5yHzflTfbjgqWcCPpo7DaKy4FnpB0l/zCAW0Tc7jxAiuqSxHasntB3D7887LSrA93kDJ9IXovxJYxyLCA==}
engines: {node: '>=4'}
/[email protected]([email protected]1):
/[email protected]([email protected]2):
resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
engines: {node: '>=14.0.0'}
peerDependencies:
postcss: ^8.0.0
dependencies:
postcss: 8.4.31
postcss: 8.4.32
postcss-value-parser: 4.2.0
read-cache: 1.0.0
resolve: 1.22.8
/[email protected]([email protected]1):
/[email protected]([email protected]2):
resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
engines: {node: ^12 || ^14 || >= 16}
peerDependencies:
postcss: ^8.4.21
dependencies:
camelcase-css: 2.0.1
postcss: 8.4.31
postcss: 8.4.32
/[email protected]([email protected]1):
/[email protected]([email protected]2):
resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==}
engines: {node: '>= 10'}
peerDependencies:
@@ -9100,7 +9125,7 @@ packages:
optional: true
dependencies:
lilconfig: 2.1.0
postcss: 8.4.31
postcss: 8.4.32
yaml: 1.10.2
dev: true
@@ -9121,7 +9146,7 @@ packages:
yaml: 2.3.4
dev: true
/[email protected]([email protected]1):
/[email protected]([email protected]2):
resolution: {integrity: sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==}
engines: {node: '>= 14'}
peerDependencies:
@@ -9134,34 +9159,34 @@ packages:
optional: true
dependencies:
lilconfig: 2.1.0
postcss: 8.4.31
postcss: 8.4.32
yaml: 2.3.4
/[email protected]([email protected]1):
/[email protected]([email protected]2):
resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
engines: {node: '>=12.0'}
peerDependencies:
postcss: ^8.2.14
dependencies:
postcss: 8.4.31
postcss: 8.4.32
postcss-selector-parser: 6.0.13
/[email protected]([email protected]1):
/[email protected]([email protected]2):
resolution: {integrity: sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==}
engines: {node: '>=12.0'}
peerDependencies:
postcss: ^8.3.3
dependencies:
postcss: 8.4.31
postcss: 8.4.32
dev: true
/[email protected]([email protected]1):
/[email protected]([email protected]2):
resolution: {integrity: sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A==}
engines: {node: '>=12.0'}
peerDependencies:
postcss: ^8.4.29
dependencies:
postcss: 8.4.31
postcss: 8.4.32
dev: true
/[email protected]:
@@ -9207,6 +9232,15 @@ packages:
nanoid: 3.3.7
picocolors: 1.0.0
source-map-js: 1.0.2
dev: true
/[email protected]:
resolution: {integrity: sha512-D/kj5JNu6oo2EIy+XL/26JEDTlIbB8hw85G8StOE6L74RQAVVP5rej6wxCNqyMbR4RkPfqvezVbPw81Ngd6Kcw==}
engines: {node: ^10 || ^12 || >=14}
dependencies:
nanoid: 3.3.7
picocolors: 1.0.0
source-map-js: 1.0.2
/[email protected]:
resolution: {integrity: sha512-pdxEylfxwEDwwz7g5dunPucvAN51RAOWWQmkcqHsLNHlV5o5bTaTwcAXaWB1IUn3xKPuKYE2lqbdB3vC4H4rFQ==}
@@ -10278,8 +10312,8 @@ packages:
eslint-scope: 7.2.2
eslint-visitor-keys: 3.4.3
espree: 9.6.1
postcss: 8.4.31
postcss-scss: 4.0.9([email protected]1)
postcss: 8.4.32
postcss-scss: 4.0.9([email protected]2)
svelte: 4.1.2
dev: true
@@ -10483,11 +10517,11 @@ packages:
normalize-path: 3.0.0
object-hash: 3.0.0
picocolors: 1.0.0
postcss: 8.4.31
postcss-import: 15.1.0([email protected]1)
postcss-js: 4.0.1([email protected]1)
postcss-load-config: 4.0.1([email protected]1)
postcss-nested: 6.0.1([email protected]1)
postcss: 8.4.32
postcss-import: 15.1.0([email protected]2)
postcss-js: 4.0.1([email protected]2)
postcss-load-config: 4.0.1([email protected]2)
postcss-nested: 6.0.1([email protected]2)
postcss-selector-parser: 6.0.13
postcss-value-parser: 4.2.0
resolve: 1.22.8
@@ -10514,11 +10548,42 @@ packages:
normalize-path: 3.0.0
object-hash: 3.0.0
picocolors: 1.0.0
postcss: 8.4.31
postcss-import: 15.1.0([email protected]1)
postcss-js: 4.0.1([email protected]1)
postcss-load-config: 4.0.1([email protected]1)
postcss-nested: 6.0.1([email protected]1)
postcss: 8.4.32
postcss-import: 15.1.0([email protected]2)
postcss-js: 4.0.1([email protected]2)
postcss-load-config: 4.0.1([email protected]2)
postcss-nested: 6.0.1([email protected]2)
postcss-selector-parser: 6.0.13
resolve: 1.22.8
sucrase: 3.34.0
transitivePeerDependencies:
- ts-node
dev: true
/[email protected]:
resolution: {integrity: sha512-AKjF7qbbLvLaPieoKeTjG1+FyNZT6KaJMJPFeQyLfIp7l82ggH1fbHJSsYIvnbTFQOlkh+gBYpyby5GT1LIdLw==}
engines: {node: '>=14.0.0'}
hasBin: true
dependencies:
'@alloc/quick-lru': 5.2.0
arg: 5.0.2
chokidar: 3.5.3
didyoumean: 1.2.2
dlv: 1.1.3
fast-glob: 3.3.2
glob-parent: 6.0.2
is-glob: 4.0.3
jiti: 1.21.0
lilconfig: 2.1.0
micromatch: 4.0.5
normalize-path: 3.0.0
object-hash: 3.0.0
picocolors: 1.0.0
postcss: 8.4.32
postcss-import: 15.1.0([email protected])
postcss-js: 4.0.1([email protected])
postcss-load-config: 4.0.1([email protected])
postcss-nested: 6.0.1([email protected])
postcss-selector-parser: 6.0.13
resolve: 1.22.8
sucrase: 3.34.0
@@ -11178,7 +11243,7 @@ packages:
optional: true
dependencies:
esbuild: 0.18.20
postcss: 8.4.31
postcss: 8.4.32
rollup: 3.29.4
sass: 1.64.2
optionalDependencies: