docs: how to login locally with seed data (#166)

* update mock data with unsplash image url

* add documentation guide

* update README

README.md

@@ -178,6 +178,11 @@ This repo is a mono repo that consists of 3 projects:
    - `docs`: [http://localhost:3000](http://localhost:3000)
 
 9. Running a specific project
+
    - **classroomio-com**: `pnpm dev --filter=classroomio-com`
    - **dashboard**: `pnpm dev --filter=dashboard`
    - **docs**: `pnpm dev --filter=docs`
+
+10. Login into `dashboard`.
+
+To learn how to login into the dashboard please [go here](https://classroomio.com/docs/contributor-guides/demo-accounts)

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

@@ -1,4 +1,5 @@
 {
+  "demo-accounts": "Demo Accounts",
   "devs": "Developers Guide",
   "gitpod": "Gitpod setup",
   "supabase-cloud": "Supabase Cloud Setup",

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

@@ -0,0 +1,50 @@
+import { Callout } from 'nextra/components';
+
+# Login quickly with Demo Accounts
+
+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 className="nx-w-full nx-flex nx-items-center nx-justify-center">
+  <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"
+    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
+  ></iframe>
+</div>

supabase/seed.sql

@@ -158,7 +158,7 @@ Through a carefully crafted curriculum, you''ll learn the core concepts of MVC,
 
 INSERT INTO "public"."course" ("title", "description", "overview", "id", "created_at", "updated_at", "group_id", "is_template", "logo", "slug", "metadata", "cost", "currency", "banner_image", "is_published", "is_certificate_downloadable", "certificate_theme", "status") VALUES
 	('Building express apps', 'This shows how to build an express app', 'Welcome to this amazing course 🚀 ', '2e845a61-98a4-4a78-a8db-f140d14f451b', '2023-11-22 10:16:06.854875+00', '2023-11-22 10:16:06.854875+00', 'c0ab7c5b-db2e-46e7-9853-9308c8ccb2cd', true, '', NULL, '{"gols": "", "description": "", "requirements": ""}', 0, 'NGN', NULL, false, false, NULL, 'ACTIVE'),
-	('Data Science with Python and Pandas', 'Unlock the power of data with our "Data Science with Python and Pandas" course. Dive into Python programming fundamentals and then journey into the world of Pandas for efficient data manipulation and analysis. Learn essential data cleaning and preprocessing techniques before venturing into statistical analysis using Pandas. Cap off your exploration with data visualization using Matplotlib and Seaborn. Gain the skills to derive meaningful insights from data and communicate them effectively, positioning yourself as a proficient data scientist in the dynamic field of data analytics.', 'Welcome to this amazing course 🚀 ', 'f0a85d18-aff4-412f-b8e6-3b34ef098dce', '2023-12-16 14:41:15.294951+00', '2023-12-16 14:41:15.294951+00', '0789ced2-b8f3-472c-97ff-bdde1e80dddf', true, 'http://127.0.0.1:54321/storage/v1/object/public/avatars/uploadwidget/1702918965257What-is-M.Tech-in-Artificial-Intelligence_AI.jpg.optimal.webp', 'data-science-with-python-and-pandas-1702919269375', '{"gols": "", "grading": true, "description": "", "requirements": "", "lessonDownload": true, "allowNewStudent": true, "lessonTabsOrder": [{"id": 1, "name": "Note"}, {"id": 2, "name": "Slide"}, {"id": 3, "name": "Video"}]}', 0, 'NGN', NULL, true, false, NULL, 'ACTIVE'),
+	('Data Science with Python and Pandas', 'Unlock the power of data with our "Data Science with Python and Pandas" course. Dive into Python programming fundamentals and then journey into the world of Pandas for efficient data manipulation and analysis. Learn essential data cleaning and preprocessing techniques before venturing into statistical analysis using Pandas. Cap off your exploration with data visualization using Matplotlib and Seaborn. Gain the skills to derive meaningful insights from data and communicate them effectively, positioning yourself as a proficient data scientist in the dynamic field of data analytics.', 'Welcome to this amazing course 🚀 ', 'f0a85d18-aff4-412f-b8e6-3b34ef098dce', '2023-12-16 14:41:15.294951+00', '2023-12-16 14:41:15.294951+00', '0789ced2-b8f3-472c-97ff-bdde1e80dddf', true, 'https://images.unsplash.com/photo-1518186285589-2f7649de83e0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MTE1NTV8MHwxfHNlYXJjaHwxOHx8ZGF0YSUyMHNjaWVuY2V8ZW58MHx8fHwxNzA3Nzk5MzMwfDA&ixlib=rb-4.0.3&q=80&w=1080', 'data-science-with-python-and-pandas-1702919269375', '{"gols": "", "grading": true, "description": "", "requirements": "", "lessonDownload": true, "allowNewStudent": true, "lessonTabsOrder": [{"id": 1, "name": "Note"}, {"id": 2, "name": "Slide"}, {"id": 3, "name": "Video"}]}', 0, 'NGN', NULL, true, false, NULL, 'ACTIVE'),
 	('Getting started with MVC', 'Embark on a comprehensive journey into the world of Model-View-Controller (MVC) architecture with our course, "Getting Started with MVC." Designed for beginners and aspiring developers, this course provides a solid foundation for understanding the principles and practices behind MVC, a widely adopted design pattern in software development.
 
 Through a carefully crafted curriculum, you''ll learn the core concepts of MVC, exploring how it enhances the organization, scalability, and maintainability of your code', '<p>"Getting Started with MVC. is designed for beginners and aspiring developers, this course provides a solid foundation for understanding the principles and practices behind MVC, a widely adopted design pattern in software development.</p>
@@ -199,7 +199,7 @@ Through a carefully crafted curriculum, you''ll learn the core concepts of MVC,
 </div>
 </div>
 </div>', '98e6e798-f0bd-4f9d-a6f5-ce0816a4f97e', '2023-12-16 14:11:16.672983+00', '2023-12-16 14:11:16.672983+00', 'c6b022fd-fff3-4f09-8960-c9cb06819761', true, '', NULL, '{"gols": "", "grading": false, "description": "", "requirements": "", "lessonDownload": false, "allowNewStudent": true, "lessonTabsOrder": [{"id": 1, "name": "Note"}, {"id": 2, "name": "Slide"}, {"id": 3, "name": "Video"}]}', 0, 'NGN', NULL, true, false, NULL, 'ACTIVE'),
-	('Modern Web Development with React', 'By the end of this course, you''ll be equipped to build interactive and responsive web applications, making you a proficient React developer ready for the demands of today''s web development landscape.', 'Welcome to this amazing course 🚀 ', '16e3bc8d-5d1b-4708-988e-93abae288ccf', '2023-12-16 14:40:15.374067+00', '2023-12-16 14:40:15.374067+00', '04a250f1-bcb9-4e0d-a3d4-a01096e7a105', true, 'http://127.0.0.1:54321/storage/v1/object/public/avatars/uploadwidget/1702918825284How-To-Learn-ReactJS-A-Complete-Guide-For-Beginners.jpeg', NULL, '{"gols": "", "grading": true, "description": "", "requirements": "", "lessonDownload": false, "allowNewStudent": true, "lessonTabsOrder": [{"id": 1, "name": "Note"}, {"id": 2, "name": "Slide"}, {"id": 3, "name": "Video"}]}', 0, 'NGN', NULL, true, false, NULL, 'ACTIVE');
+	('Modern Web Development with React', 'By the end of this course, you''ll be equipped to build interactive and responsive web applications, making you a proficient React developer ready for the demands of today''s web development landscape.', 'Welcome to this amazing course 🚀 ', '16e3bc8d-5d1b-4708-988e-93abae288ccf', '2023-12-16 14:40:15.374067+00', '2023-12-16 14:40:15.374067+00', '04a250f1-bcb9-4e0d-a3d4-a01096e7a105', true, 'https://images.unsplash.com/photo-1565843708714-52ecf69ab81f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w1MTE1NTV8MHwxfHNlYXJjaHwxOHx8cmVhY3QlMjBkZXZ8ZW58MHx8fHwxNzA3Nzk5NDMyfDA&ixlib=rb-4.0.3&q=80&w=1080', NULL, '{"gols": "", "grading": true, "description": "", "requirements": "", "lessonDownload": false, "allowNewStudent": true, "lessonTabsOrder": [{"id": 1, "name": "Note"}, {"id": 2, "name": "Slide"}, {"id": 3, "name": "Video"}]}', 0, 'NGN', NULL, true, false, NULL, 'ACTIVE');
 
 
 --
@@ -502,7 +502,3 @@ INSERT INTO "storage"."buckets" ("id", "name", "owner", "created_at", "updated_a
 --
 -- Data for Name: objects; Type: TABLE DATA; Schema: storage; Owner: supabase_storage_admin
 --
-
-INSERT INTO "storage"."objects" ("id", "bucket_id", "name", "owner", "created_at", "updated_at", "last_accessed_at", "metadata", "version", "owner_id") VALUES
-	('5d620391-1dcf-40be-a5bc-1381abdc0ec5', 'avatars', 'uploadwidget/1702918825284How-To-Learn-ReactJS-A-Complete-Guide-For-Beginners.jpeg', '7ac00503-8519-43c8-a5ea-b79aeca900b1', '2023-12-18 17:00:25.498486+00', '2023-12-18 17:00:25.498486+00', '2023-12-18 17:00:25.498486+00', '{"eTag": "\"f7a82d978d0dc6e5199bbc3a49fac75e\"", "size": 48545, "mimetype": "image/jpeg", "cacheControl": "max-age=3600", "lastModified": "2023-12-18T17:00:25.470Z", "contentLength": 48545, "httpStatusCode": 200}', '2bc8bcfa-2b78-4687-b10d-15b428b8b0e8', NULL),
-	('84dbef75-c5b7-4c82-aa6c-473d5c2974f7', 'avatars', 'uploadwidget/1702918965257What-is-M.Tech-in-Artificial-Intelligence_AI.jpg.optimal.webp', '7ac00503-8519-43c8-a5ea-b79aeca900b1', '2023-12-18 17:02:45.392673+00', '2023-12-18 17:02:45.392673+00', '2023-12-18 17:02:45.392673+00', '{"eTag": "\"d594396a021ab5d32642179a01047248\"", "size": 83504, "mimetype": "image/webp", "cacheControl": "max-age=3600", "lastModified": "2023-12-18T17:02:45.385Z", "contentLength": 83504, "httpStatusCode": 200}', '61ee8901-8268-450d-940f-60acc2afbca8', NULL);