Code Monkey home page Code Monkey logo

rotimi-best / classroomio Goto Github PK

View Code? Open in Web Editor NEW
357.0 3.0 72.0 132.64 MB

Launch your Online Bootcamp in Minutes. The Open Source Alternative to Udemy/Coursera.

Home Page: https://classroomio.com

License: GNU Affero General Public License v3.0

JavaScript 4.06% Shell 0.05% HTML 0.78% CSS 26.75% Svelte 28.27% TypeScript 37.23% PLpgSQL 1.75% MDX 1.08% Dockerfile 0.05%
classroom education lms classroom-tools edtech virtual-classroom supabase svelte sveltekit classroom-app

classroomio's Introduction

ClassroomIO is a no-code tool that allows you build and scale your online bootcamp with ease.

Launch Your Online Bootcamp In Minutes
Website | Join Discord community

Codacy Badge

✨ About ClassroomIO.com

ClassroomIO Courses page

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.

Roadmap Features

  1. Forms: Instead of using Google Forms to collect vital information from your students, you will be able to create forms directly within the dashboard.
  2. Course Announcement: You can send public announcements from the course dashboard to all your students.
  3. Course Templates: You can clone a full course or share templates with other people.
  4. Analytics: You can track data about your students across multiple courses.
  5. Run Courses on Messengers: Students can just join a channel on slack/discord/telegram and a bot automatically sends daily lesson content to your students without you doing anything.

Please reach out to me on twitter if you have any feature request.

Built With

Get a Demo

You can book a quick 15 min demo to see if ClassroomIO is a good fit for you

Book a Call with ClassroomIO.com

Getting Started

To get a local copy up and running, please follow these simple steps.

Prerequisites

Here is what you need to be able to run ClassroomIO.com

Project Structure

This repo is a mono repo that consists of 3 projects:

  1. classroomio-com: The landing page of ClassroomIO hosted here
  2. backend: The backend service that handles PDF, video processing, Emailing and Notifications.
  3. dashboard: The web application that runs the learning management system hosted here.
  4. docs: Official documentation of ClassroomIO hosted here

Development

Gitpod Setup

  1. Click the button below to open this project in Gitpod.

  2. This will open a fully configured workspace in your browser with all the necessary dependencies already installed.

Open in Gitpod

Local Setup

  1. Fork the repo, then clone it using the following command (remember to replace the url with the url from your forked repo)

    git clone https://github.com/rotimi-best/classroomio.git
  2. Go to project folder

    cd classroomio
  3. Set up Node if your Node version does not meet the project's requirements, as instructed by the documentation., "nvm" (Node Version Manager) allows using Node at the version required by the project:

    nvm use

    You first might need to install the specific version and then use it:

    nvm install && nvm use

    You can install nvm from here.

    You also need to have pnpm installed, you can find the installation guide here

  4. Set up your .env file

    • Go to apps/classroomio-com, apps/dashboard and apps/backend.
    • Duplicate the .env.example file and rename it to .env
    • Populate your .env files with the neccessary variables

To get the environmental variables for supabase continue to step(5)

  1. Setup Supabase.

    • Make sure you've downloaded the Supabase cli

    • Install and Start docker

    • Go to the project directory in your terminal and start Supabase

        pnpm supabase start
    • You should get a result like this

        supabase local development setup is running.
      
          API URL: http://127.0.0.1:54321
      GraphQL URL: http://127.0.0.1:54321/graphql/v1
            DB URL: postgresql://postgres:[email protected]:54322/postgres
        Studio URL: http://127.0.0.1:54323
      Inbucket URL: http://127.0.0.1:54324
        JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
          anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
      service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
    • Add Supabase environment variables into app/dashboard folder, which should be taken from the result of pnpm supabase start

        PUBLIC_SUPABASE_URL=<API URL>
        PUBLIC_SUPABASE_ANON_KEY=<anon key>
        PRIVATE_SUPABASE_SERVICE_ROLE=<service_role key>
    • To view the Supabase studio, open the Studio URL from the result of pnpm supabase start

  2. Install the required dependencies

    pnpm i
  3. Run all projects (in development mode)

    pnpm dev
  4. All projects should start running

  5. Running a specific project

    • classroomio-com: pnpm dev --filter=classroomio-com
    • backend: pnpm dev --filter=backend
    • dashboard: pnpm dev --filter=dashboard
    • docs: pnpm dev --filter=docs
  6. Login into dashboard

    To learn more about how to login with a dummy account, go here

classroomio's People

Contributors

anishyadavv avatar cannarron avatar chifez avatar digdippa avatar emmo00 avatar hugolee003 avatar justinguu avatar lanietodev avatar maxim-mazurok avatar pranay911 avatar r4rohit23 avatar rotimi-best avatar sabalej avatar sherylchenn avatar shodown96 avatar t-bello7 avatar tioluwani94 avatar topboyasante avatar toyin5 avatar tunny17 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

classroomio's Issues

When I hit the "Enter" button while typing in TinyMCE editor, the focus disappears

Issue Description

When I hit the "Enter" button while typing in TinyMCE editor, the focus goes to the current tab item of the page

Image of Tab focus

Screenshot 2023-12-04 at 09 18 36

Video

https://jam.dev/c/e644703a-e464-4c6f-af54-34fce718580f

Steps to Reproduce

  • Login into the dashboard
  • Create a course
  • Create a lesson
  • Create an exercise for that lesson
  • Start typing in the description of that exercise
  • Then hit the "Enter Key"

Expected Behavior

It should go to a new line and the text cursor should remain in the editor

Current Behavior

The focus leaves the TinyMCE editor and goes to the current tab

Screenshots (optional)

No response

Operating System [e.g., Windows 10]

All

Browser [e.g., Chrome, Firefox]

Chrome

Environment (locally, production, selfhosted)

All

Please check the boxes that apply to this issue report.

  • I have searched the existing issues to make sure this is not a duplicate.
  • I have provided steps to reproduce the issue.
  • I have included relevant environment information.
  • I have included any relevant screenshots.
  • I understand that this is a voluntary contribution and that there is no guarantee of resolution.
  • I want to work on creating a PR for this issue if approved

Add course drop down to the new question page

When a user wants to ask a new question, beside the title of the question on the right hand side, ask the user to select a course (from the courses they belong to) and it should be a required field.

Once a course is associated with a question, make sure the query to fetch the questions are filtered by a course that the current user belongs to.

image

Requirements to work on this task:

  • Frontend work
  • Supabase related work.

Reach out to @rotimi-best if you are interested in picking this one

Creating a new organisation under a specific organization keeps crashing

Issue Description

On my dashboard, I tried creating a new organization, but it keeps crashing and returning an error 404 page.

Steps to Reproduce

  1. Access your dashboard by clicking and entering your credentials into the email and password fields.
  2. Click the button with the name of the organization.
  3. Choose the "add" button to include a new organization.
  4. Enter the name of the organization into the "organization" field.

Expected Behavior

Upon selecting the "add organization" button, users should be able to successfully add a new organization without experiencing any crashes.

Current Behavior

Creating a new organization keeps crashing.

Screenshots (optional)

https://jam.dev/c/b9a98536-35b9-410e-ae7f-a58baf7ca0e5

2d7fbad4-3487-4d98-abd4-41b899efe604.webm

Operating System [e.g., Windows 10]

Macbook

Browser [e.g., Chrome, Firefox]

Chrome

Environment (locally, production, selfhosted)

Production

Please check the boxes that apply to this issue report.

  • I have searched the existing issues to make sure this is not a duplicate.
  • I have provided steps to reproduce the issue.
  • I have included relevant environment information.
  • I have included any relevant screenshots.
  • I understand that this is a voluntary contribution and that there is no guarantee of resolution.
  • I want to work on creating a PR for this issue if approved

Docker-less setup

Improvement Description

Sometimes, you might want to use the software in a regular VM (or small host, like a Raspberry Pi) without relying on Docker, especially outside a purely dev oriented environment.

Rationale

From my personal point of view, I'm not using Docker nor want to manage containers in production. Doing a git pull and npm build is often enough to start in production mode and serve all of it via a reverse proxy (eg Nginx+LE). This also help to contain the dependency creep by knowing exactly the services you need and self-host them the way you want.

Proposed Solution

Nothing specific is required outside to document how to achieve it in the official doc or README file. I'm open to participate in that direction if it's OK for the project :)

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this improvement suggestion.

  • I have searched the existing issues and improvement suggestions to avoid duplication.
  • I have provided a clear description of the improvement being suggested.
  • I have explained the rationale behind this improvement.
  • I have included any relevant technical details or design suggestions.
  • I understand that this is a suggestion and that there is no guarantee of implementation.

[lw1] Implement Supabase RLS on all tables

Feature Description

Enforce RLS on every table for security.

Use Case

Avoids anyone from accessing/manipulating data in the db

Proposed Solution

Learn more from the supabase docs on how to implement RLS and what level of RLS is required.

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this feature request.

  • I have searched the existing feature requests to make sure this is not a duplicate.
  • I have provided a detailed description of the requested feature.
  • I have explained the use case or scenario for this feature.
  • I have included any relevant technical details or design suggestions.
  • I understand that this is a suggestion and that there is no guarantee of implementation.

Convert repo into turbo repo

Acceptance criteria

  1. This repo should be converted into a mono repo
  2. We should have the dashboard, landing-page, blog, and server all in this repo

[design] Conversations in a submitted exercise

Feature Description

A teacher should be able to leave comments in any question of a submitted exercise

The interaction will be on this page

Screen.Recording.2023-12-07.at.20.01.00.mov

As a student, I should be able to view the comments of my teacher and leave replies on the result page

Screen.Recording.2023-12-07.at.20.02.33.mov

Use Case

No response

Proposed Solution

No response

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this feature request.

  • I have searched the existing feature requests to make sure this is not a duplicate.
  • I have provided a detailed description of the requested feature.
  • I have explained the use case or scenario for this feature.
  • I have included any relevant technical details or design suggestions.
  • I understand that this is a suggestion and that there is no guarantee of implementation.

[bug] after logout, organisation name in login page still remains

Description:
After the user logs out, the organization's name persists on the login and signup pages.
(I noticed that after I'd logged out of my previous account, my organization name still appeared on the login and signup page until I refreshed my page.)

Steps to reproduce:

  1. Navigate to the settings section in your dashboard.
  2. Select the "log out" button.

Acceptance Criteria:
Upon a successful log-out, the organization's name and details should no longer be visible.

Screenshot 2023-11-23 at 23 36 38 Screenshot 2023-11-23 at 23 34 37

[design] Add code snippet and image to an exercise question

Feature Description

The idea is that users can add code snippets or upload images to any question in an exercise

This is the view of the an exercise page
image

Use Case

No response

Proposed Solution

No response

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this feature request.

  • I have searched the existing feature requests to make sure this is not a duplicate.
  • I have provided a detailed description of the requested feature.
  • I have explained the use case or scenario for this feature.
  • I have included any relevant technical details or design suggestions.
  • I understand that this is a suggestion and that there is no guarantee of implementation.

[lw1] Implement Billing/Pricing

  • Charge users depending on plan
  • Allow users charge for courses.

Compare between Lemonsqueezy and Stripe to implement payment payout for teachers using ClassroomIO

Course Waitlist

Summary: Send students a link, they answer some questions, they enter their email and we send them the result of the form they just filled.

Source: 1-on-1 with Yucheng

MVP Goal:

  1. Create a form with questions and selected answers
  2. Add welcome page
  3. Ask for email at the end to get result
  4. Get result in email
  5. Add email of applicant into waitlist

Duplicate Invite Issue

Issue Description

After sending an invite to a specific user, attempting to send another invite using the same credentials does not return the expected error message indicating that the user already exists. The system shows the duplicate user details, and even after the user has accepted the invite, the system can still regenerate a new invite.

Screenshot 2023-12-08 at 16 34 54

Steps to Reproduce

Log in to the application.
Navigate to the "Settings" feature.
Navigate to the invite section.
Send an invite to a specific user by entering their email address.
Attempt to send another invite to the same user with the same credentials.

Expected Behavior

An error message should be displayed, indicating that the user already exists and preventing the duplicate invite.
The absence of the error message may lead to confusion and potential duplicate user entries.

Current Behavior

No error message is shown, and the application allows the sending of a duplicate invite using the same credentials.

Screenshots (optional)

No response

Operating System [e.g., Windows 10]

No response

Browser [e.g., Chrome, Firefox]

No response

Environment (locally, production, selfhosted)

No response

Please check the boxes that apply to this issue report.

  • I have searched the existing issues to make sure this is not a duplicate.
  • I have provided steps to reproduce the issue.
  • I have included relevant environment information.
  • I have included any relevant screenshots.
  • I understand that this is a voluntary contribution and that there is no guarantee of resolution.
  • I want to work on creating a PR for this issue if approved

[lw1] Multi translation support

Acceptance criteria

  1. Implement language support in repo

  2. The whole UI should support at 5 languages

    1. English
    2. Chinese
    3. Hindi
    4. French
    5. Portuguese
  3. Implement a language switcher

Document and Implement local setup of supabase.

Acceptance criteria:

People should be able to setup supabase locally with some mock data.

With this setup they should be able to connect it to their local env and everything should work fine.

After onboarding, prompt user to create a new course

Below is the sequence of event on signup

  1. After signup -> 2. Onboarding -> 3. Welcome modal -> 4. ⭐️ Go to new course modal ⭐️

This task is about adding step 4.

  • When the user closes the Welcome Modal
  • Redirect them to /org/org_slug_name/courses?create=true

Google auth for students, redirects to app.classroomio.com

Issue Description

When you publish a course and students want to join, they'd need to signup. If they choose to signup on Google, after successfully authenticating, instead of redirecting the student back to the subdomain (*.classroomio.com), the student is redirected to app.classroomio.com

Steps to Reproduce

No response

Expected Behavior

Redirect the user back to the subdomain
Redirect the user back to the course invite page.

Current Behavior

Redirects to app.classroomio.com
User never gets to join a course.

Screenshots (optional)

No response

Operating System [e.g., Windows 10]

No response

Browser [e.g., Chrome, Firefox]

No response

Environment (locally, production, selfhosted)

production

Please check the boxes that apply to this issue report.

  • I have searched the existing issues to make sure this is not a duplicate.
  • I have provided steps to reproduce the issue.
  • I have included relevant environment information.
  • I have included any relevant screenshots.
  • I understand that this is a voluntary contribution and that there is no guarantee of resolution.
  • I want to work on creating a PR for this issue if approved

Gitpod setup of ClassroomIO

Following the setup guide in the README, come up with a Gitpod setup where people can click one button and get started contributing to the repo from their browser.

[design] Implement Favourite Courses Feature

Feature Description

User should be able to mark a course as favourite and it should be shown on the home page

image

Use Case

No response

Proposed Solution

No response

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this feature request.

  • I have searched the existing feature requests to make sure this is not a duplicate.
  • I have provided a detailed description of the requested feature.
  • I have explained the use case or scenario for this feature.
  • I have included any relevant technical details or design suggestions.
  • I understand that this is a suggestion and that there is no guarantee of implementation.

When I right click on a course card, open a drop down showing several options

Feature Description

When I right click on a card, ONLY on the Dashboard, show the following options:

  1. Clone
  2. Share
  3. Delete
  4. Invite
image

For the UI behavior, use this component: https://carbon-components-svelte.onrender.com/components/ContextMenu

Screen.Recording.2023-12-07.at.19.51.32.mov

Use Case

No response

Proposed Solution

No response

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this feature request.

  • I have searched the existing feature requests to make sure this is not a duplicate.
  • I have provided a detailed description of the requested feature.
  • I have explained the use case or scenario for this feature.
  • I have included any relevant technical details or design suggestions.
  • I understand that this is a suggestion and that there is no guarantee of implementation.

Exercise Date Discrepancy

Issue Description

There is a discrepancy where the exercise date does not correspond with today's date as expected.
The exercise date not matching today's date may cause confusion for users.

today.s_bug.webm

Steps to Reproduce

Log in to your dashboard by clicking and entering your credentials in the email and password fields.
Navigate to the "Courses" feature on your dashboard.
Choose a specific course from your created list.
Select the "Lessons" feature.
Navigate to the exercise section
Observe the exercise date displayed.

Expected Behavior

The exercise date should correspond with today's date.

Current Behavior

The exercise date is displaying a date that does not align with today's date.

Screenshots (optional)

today.s_bug.webm

Operating System [e.g., Windows 10]

No response

Browser [e.g., Chrome, Firefox]

No response

Environment (locally, production, selfhosted)

No response

Please check the boxes that apply to this issue report.

  • I have searched the existing issues to make sure this is not a duplicate.
  • I have provided steps to reproduce the issue.
  • I have included relevant environment information.
  • I have included any relevant screenshots.
  • I understand that this is a voluntary contribution and that there is no guarantee of resolution.
  • I want to work on creating a PR for this issue if approved

Implement unit test into the dashboard app

Can we setup unit tests for the following:

  1. Utility functions: apps/dashboard/lib/utils
  2. UI components: apps/dashboard/lib/components
  3. Pages/Routes: apps/dashboard/lib/routes

[design] Redesign Exercise list page

Feature Description

It should show the following info:

  1. Title
  2. Deadline

Only for Teachers show:
4. Total Students Submitted,
5. Total students pending

Only for students show:
6. The status of the exercise, graded or in progress

image

Use Case

No response

Proposed Solution

No response

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this feature request.

  • I have searched the existing feature requests to make sure this is not a duplicate.
  • I have provided a detailed description of the requested feature.
  • I have explained the use case or scenario for this feature.
  • I have included any relevant technical details or design suggestions.
  • I understand that this is a suggestion and that there is no guarantee of implementation.

Move supabase auth from local storage to cookies

Feature Description

Right now we have a local storage based authentication, the tokens are stored in local storage however the problem with this is spinners on the client side to get auth data before using the app.

Cookies based auth would make it faster for a user to see content faster.

Use Case

No response

Proposed Solution

No response

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this feature request.

  • I have searched the existing feature requests to make sure this is not a duplicate.
  • I have provided a detailed description of the requested feature.
  • I have explained the use case or scenario for this feature.
  • I have included any relevant technical details or design suggestions.
  • I understand that this is a suggestion and that there is no guarantee of implementation.

Replacing cover image button on the landing page is not responsive

Issue Description

When the user clicks the "Replace" button on the landing page to replace the default cover image for a specific course, the button is not active.

Steps to Reproduce

  1. Log in to your dashboard by clicking and entering your credentials in the email and password fields.
  2. Navigate to the "Courses" feature on your dashboard.
  3. Choose a specific course from your created list.
  4. Access the "Landing Page" option.
  5. On the Page Builder page, click the "Header Section" option.
  6. Opt for the "Replace Cover Image" button.

Expected Behavior

The user should be able to successfully replace the default cover image without encountering any glitches.

Current Behavior

The user can't replace the default cover image.

Screenshots (optional)

replace.webm

Operating System [e.g., Windows 10]

Macbook

Browser [e.g., Chrome, Firefox]

Chrome, Safari

Environment (locally, production, selfhosted)

Production

Please check the boxes that apply to this issue report.

  • I have searched the existing issues to make sure this is not a duplicate.
  • I have provided steps to reproduce the issue.
  • I have included relevant environment information.
  • I have included any relevant screenshots.
  • I understand that this is a voluntary contribution and that there is no guarantee of resolution.
  • I want to work on creating a PR for this issue if approved

Setup testing environment

Improvement Description

We need a separate environment for testing

Rationale

To avoid mixing testing data to production data

Proposed Solution

We would need a way to trigger deploys to a testing environment on vercel.
Setup a different supabase project that replicates prod db

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this improvement suggestion.

  • I have searched the existing issues and improvement suggestions to avoid duplication.
  • I have provided a clear description of the improvement being suggested.
  • I have explained the rationale behind this improvement.
  • I have included any relevant technical details or design suggestions.
  • I understand that this is a suggestion and that there is no guarantee of implementation.

[design] Course analytics

Feature Description

Total countries: Unique Countries list
Lesson Views: Lesson by View count
Most active student: Student by Lesson views
Difficult Lesson: Complexity metric

image

Use Case

No response

Proposed Solution

No response

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this feature request.

  • I have searched the existing feature requests to make sure this is not a duplicate.
  • I have provided a detailed description of the requested feature.
  • I have explained the use case or scenario for this feature.
  • I have included any relevant technical details or design suggestions.
  • I understand that this is a suggestion and that there is no guarantee of implementation.

Generate analytics for each org

A script that runs as a cron job to generate some analytics data for each organization

  1. How many students, courses, teachers and lessons

More features TBD

Add project/workspace versioning and automatic changelog generation.

Improvement Description

I was thinking we should add semantic releases and changelogs to the project.

Rationale

No response

Proposed Solution

No response

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this improvement suggestion.

  • I have searched the existing issues and improvement suggestions to avoid duplication.
  • I have provided a clear description of the improvement being suggested.
  • I have explained the rationale behind this improvement.
  • I have included any relevant technical details or design suggestions.
  • I understand that this is a suggestion and that there is no guarantee of implementation.

Add a "restart" icon, that when clicked regenerates the slug of a course

Feature Description

From the image below, you need to add a restart icon, (we use carbon icons) just beside the "Course Link" text.

When clicked it should regenerate the slug of a course.

The slug of a course is everything after this https://ciodevs.classroomio.com/course/{SLUG_HERE}.

image

IMPORTANT

  1. Pay attention to how we implement icons in the project, we first import a component call IconButton, pass some props to it and then wrap the icon around it. See this code for example

    <IconButton onClick={handleAddOptions} contained={true} size="small">
    <Add size={16} />
    </IconButton>

  2. The icon to use is this one from Carbon Icons - Refresh and the prop size should be 16

image **Note**: Make sure you look at other places how we import carbon icons: like here

  1. The generate slug functionality already exists, see an example of how it is used on the course landing page. There is an imported function called generateSlug

import generateSlug from '$lib/utils/functions/generateSlug';

And then it is used here:

course.slug = course.slug || generateSlug(course.title);

Use Case

If you rename the title of the course and you want a new slug

Proposed Solution

Already explained above

Alternatives (optional)

No response

Additional Context

Already explained above

Please check the boxes that apply to this feature request.

  • I have searched the existing feature requests to make sure this is not a duplicate.
  • I have provided a detailed description of the requested feature.
  • I have explained the use case or scenario for this feature.
  • I have included any relevant technical details or design suggestions.
  • I understand that this is a suggestion and that there is no guarantee of implementation.

Create the main image on classroomio.com

Feature Description

can any designer here come up with an image like this if I provide you with a light and dark mode image?

I got this attached image from this article

I want to use this kind of image on classroomio.com's landing page, instead of the video that shows the dark/light mode.

image

Use Case

It shows a key part of the web application in dark/light mode

Proposed Solution

No response

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this feature request.

  • I have searched the existing feature requests to make sure this is not a duplicate.
  • I have provided a detailed description of the requested feature.
  • I have explained the use case or scenario for this feature.
  • I have included any relevant technical details or design suggestions.
  • I understand that this is a suggestion and that there is no guarantee of implementation.

Add project/workspace versioning and automatic changelog generation.

Improvement Description

I was thinking we should add semantic releases and changelogs to the project.

Rationale

This feature can help

  • Keep logs of major and minor releases on each projects in the repo
  • Setup GitHub actions that handles deployment, tests, etc for each release type.
  • Help determine which features/changes should come first (I thinkπŸ€”)

Limit file size to upload in Course banner image

Issue Description

Right now users can upload any size of images as their banner cover image

Steps to Reproduce

Watch this jam video: https://jam.dev/c/2044bdfc-638f-4e1c-b0dd-0f5f4a903946

image

Expected Behavior

  1. Click upload image
  2. If more than 500kb don't upload to supabase and show error
  3. Text button should change to try again
  4. If user clicks try again and same issue, go back to step 2
  5. else upload the image to supabase and the existing flow should remain the same

Also make sure to update the text saying file limit is 500KB

Current Behavior

Any file size can be uploaded

Screenshots (optional)

No response

Operating System [e.g., Windows 10]

All

Browser [e.g., Chrome, Firefox]

All

Environment (locally, production, selfhosted)

All

Please check the boxes that apply to this issue report.

  • I have searched the existing issues to make sure this is not a duplicate.
  • I have provided steps to reproduce the issue.
  • I have included relevant environment information.
  • I have included any relevant screenshots.
  • I understand that this is a voluntary contribution and that there is no guarantee of resolution.
  • I want to work on creating a PR for this issue if approved

feat: supabase setup locally

Expectance criteria:

  1. You should be able to run a command and a local supabase should come up.
  2. Add documentation to the README on how to use the command.

Replacing cover image button on the landing page is not responsive

Issue Description

When the user clicks the "Replace" button on the landing page to replace the default cover image for a specific course, the button is not active.

Steps to Reproduce

  1. Log in to your dashboard by clicking and entering your credentials in the email and password fields.
  2. Navigate to the "Courses" feature on your dashboard.
  3. Choose a specific course from your created list.
  4. Access the "Landing Page" option.
  5. On the Page Builder page, click the "Header Section" option.
  6. Opt for the "Replace Cover Image" button.

Expected Behavior

The user should be able to successfully replace the default cover image without encountering any glitches.

Current Behavior

The user can't replace the default cover image.

Screenshots (optional)

Screenshot 2023-11-24 at 13 39 49

Operating System [e.g., Windows 10]

Macbook

Browser [e.g., Chrome, Firefox]

Chrome, Safari

Environment (locally, production, selfhosted)

Production

Please check the boxes that apply to this issue report.

  • I have searched the existing issues to make sure this is not a duplicate.
  • I have provided steps to reproduce the issue.
  • I have included relevant environment information.
  • I have included any relevant screenshots.
  • I understand that this is a voluntary contribution and that there is no guarantee of resolution.
  • I want to work on creating a PR for this issue if approved

Add more how to guides

Feature Description

Add the following how to guides into the docs without any content

  • How to Update Organization
  • How to Update Profile
  • How to create a Course
  • How to Add Lesson
  • How to setup Course landing page
  • How to Create a Poll
  • How to Grade an Exercise
  • How to Create an Exercise
  • How to Take Attendance
  • How to Generate Certificates
  • How to Invite Teachers
  • How to Invite Students

Use Case

No response

Proposed Solution

No response

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this feature request.

  • I have searched the existing feature requests to make sure this is not a duplicate.
  • I have provided a detailed description of the requested feature.
  • I have explained the use case or scenario for this feature.
  • I have included any relevant technical details or design suggestions.
  • I understand that this is a suggestion and that there is no guarantee of implementation.

[design] Redesign Exercise submission flow of a student

Feature Description

Screen.Recording.2023-12-07.at.20.16.44.mov

Also redesign the UI of the result page, Graded or Pending

image

Use Case

No response

Proposed Solution

No response

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this feature request.

  • I have searched the existing feature requests to make sure this is not a duplicate.
  • I have provided a detailed description of the requested feature.
  • I have explained the use case or scenario for this feature.
  • I have included any relevant technical details or design suggestions.
  • I understand that this is a suggestion and that there is no guarantee of implementation.

Selfhost ClassroomIO

Feature Description

A user should be able to run the whole classroomio stack via docker.

Use Case

Anyone interested in selfhosting can do that in a few steps

Proposed Solution

Alternatives (optional)

No response

Additional Context

No response

Please check the boxes that apply to this feature request.

  • I have searched the existing feature requests to make sure this is not a duplicate.
  • I have provided a detailed description of the requested feature.
  • I have explained the use case or scenario for this feature.
  • I have included any relevant technical details or design suggestions.
  • I understand that this is a suggestion and that there is no guarantee of implementation.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.