danieljancar / chorizo

A versatile, firebase hosted, open-source platform for interactive course management and learning experiences. Tailored for small-group instruction across various disciplines.

Chorizo

A self-hosted course management platform. Manage courses, create entry lists, and share downloadable resources seamlessly. Fully dynamic and tailored for streamlined administration.

---

Table of Contents

• Features
• Usage
• Setup
• Contributing
  • Developer Guidelines and Repository Setup
  • Development Previews
• License
• Credits
  • Special Thanks
  • Contributors

Features

Chorizo is designed to revolutionize course management with its cutting-edge features

• Highly Configurable: Customize Chorizo to your needs with a wide range of configuration options.
• Self-Hosting: Gain full control over your data and course material by hosting Chorizo on your own server.
• Angular Frontend: Enjoy a sleek, responsive user interface designed using Angular, optimized for both desktop and mobile devices.
• Firebase Backend: Benefit from a robust, scalable backend powered by Firebase, ensuring high performance and reliability.
• Efficient Course Management: Create and manage entry lists, share resources, and streamline course administration with ease.
• Downloadable Resources: Offer students and course participants easy access to downloadable course materials.
• Comprehensive Documentation: Find all the information you need in our extensive documentation, making it easier to get started and resolve any issues.

Usage

Detailed instructions on how to use Chorizo for managing your courses will be provided here...

Setup

Detailed instructions on how to set up Chorizo on your own server will be provided here...

Contributing

Contributions are appreciated and needed to make Chorizo the best course management platform out there. If you want to contribute, please read the Contributing Guidelines, Code of Conduct, and Developer Certificate of Origin first.

Developer Guidelines and Repository Setup

We have several documents for developers to help them get started with the project. You can find them in the docs or .github directory. Here are some of the most important ones:

• Contributing Guidelines
• Workflow
• Developer Setup
• Best Practices
• Formatting
• Dev Actions

Development Previews

We deploy the latest development version of Chorizo to Firebase Hosting. You can find the latest preview at:

• Course Development Preview
• AdminUI Development Preview

License

This project is licensed under the MIT License. By contributing to Chorizo, you agree that your contributions will be released under the same license. Also, you agree to the Contributor Covenant Code of Conduct and Developer Certificate of Origin.

Credits

Special Thanks

Thanks to the following projects and their contributors for making Chorizo possible:

• DaisyUI
• FireCMS
• Angular

Contributors

Thanks to the following people for their contributions:

Released under MIT License by @danieljancar.

chorizo's Issues

Define general course types

Description

We need to define our data structure in firebase and appropriate types in course and adminui package

• Package: course, adminui

Additional Information

Let's discuss this in a meeting! 😃

Add role badge to account page

Description

Package

• course
• adminui
• cli
• chorizodev
• architecture
• documentation
• Other

As a User I want to see the current role I have in my document at users/:uid.role in my account.

Expected Behavior

I can see my role somewhere at the first section of the account overview at a/account with the DaisyUI badge here

Actual Behavior

none

Create legal section

Description

We need to create the legal section with routes like /l/terms, /l/privacy, etc. The content of this files should either come from the admin itself (collection: legal with custom document id's like privacy) or our predefined general legal files.

• Package: course

Expected Behavior

There's a overview page on /l about all the important legal documents (privacy, terms, cookies, rules, ...) and the detail view of each of those files, dynamically generated, with either getting the documents content from Firebase based on the custom id in legal collection, if empty, use our predefined general legal documents.

Actual Behavior

none

Additional Information

Make sure to display the files / and get the files dynamically from firebase to ensure best code practices. Create a legal.service.ts, etc.

Logout button has a wrong Label

Logout button in course detail has a wrong label

In Course detail the logout button has the label "Button" which is wrong

• Package: Course

Expected Behavior

The button should have the label "Logout"

Actual Behavior

The button has the label "Button"

Create Mockup for courses page

Create mockup for courses page

Create a mockup for the courses page

Create general footer component

Add Footer to the Project

Create a Footer for the Project

• Package: Course

Create responsive navbar

Implement responsive navbar

Description

Implement a responsive navigation bar similar to the provided design mockups. The navbar should adapt to three different breakpoints: large, medium, and small.

Requirements:

• Large Screens: Display the full navigation bar with course title and navigation links.

• Medium Screens: Show a collapsible menu icon and centralize essential icons.

• Small Screens: Prioritize menu icon and essential features, hide secondary items.

• Package: course

Additional Information

Figma Mockups: Responsive Navbar Design
Ensure the navbar is accessible and follows best practices for usability.

Add @defer loading for loading timeout

Description

Add a way, incase no course is found in the search or in general, to display "Nothing found here" using feedback-message component. The component should be displayed after a certain time 5000ms or similar of loading with the @defer method (https://angular.dev/guide/defer#defer).

• Package: course

Expected Behavior

When searching for a course in the course overview, but nothing is found, display a feedback/error message to the user after a certain amount of loading time with loading-bars component using the feedback-message component.

Actual Behavior

It loads for an infinite amount of time with the loading-bars component.

Possible Fix

Use @defer function from angular (link above) and the feedback-message component.

Create search function for courses documentation navbar

Description

Package

• course
• adminui
• cli
• chorizodev
• architecture
• documentation
• Other

I want to be able to search for course documentation documents in the courses-documenation-navbar component.

Expected Behavior

Searchbar with title value and results. Route based param searching.

Actual Behavior

none

Possible Fix

Use courses component as a reference and start point.

Fix margin on homepage

Description

Package

• course
• adminui
• cli
• chorizodev
• architecture
• documentation
• Other

On the homepage markdown readme there's a weird margin below the dividier.

Expected Behavior

The readme start text is on the same height as the "About" section.

Actual Behavior

The Readme text has a weird space between itself and the above title, not being on the same height as "About".

Additional Information

Create course layout page

Description

Create the course introduction page on path /c/:courseId/ which display the introduction subcollection of a course, also general info, if private, the members participating in the course and so on.

• Package: course

Reroute back if courseId is invalid on course detail

Description

If the courseId on c/:courseId is empty/invalid meaning it doesn't return any data, I want to get rerouted with history.back() and display a toast saying "No course found" or similar.

• Package: course

Expected Behavior

If routing to a invalid courseId on course detail, the user is rerouted back to the page he was before and otherwise to the root route.

Actual Behavior

Empty course detail page.

Possible Fix

Check if course data has data returned if empty reroute the user.

Steps to Reproduce

1. Go on c/:courseId and replace :courseId with an invalid id

Additional Information

Use ToastService and tell the user that there's no course found for this id and make a else route to root if there's no routing history.

Gap between text on the homepage missing

Gap between text on the homepage missing

On the homepage there is a section, which displays the features of chorizo. But after these features there is a gap missing and the text seems to be too close together. In the screenshot you will see what exactly I mean

• Package: Course

Additional Information

Screenshot of the missing space:

Gap between text on the homepage missing space:

Create course resources page

Description

Package

• course
• adminui
• cli
• chorizodev
• architecture
• documentation
• Other

Create a courses resource page where the course admin can upload files like documents, images, codefiles, etc.

Expected Behavior

I see a, by the course admin defined, ordered list of resources to download with appropriate icons, names, etc.

Actual Behavior

none

Add route guard for course detail sections

Description

Add a route guard which protects the routing to sections, if they're disabled in the course's settings and the user tries to manually navigate to it, even tho it's not shown in the course navbar.

• Package: course

Change component library to Preline

Description

Change from angular material to preline.

• Package: course

Introduce blurred image placeholders released in Angular v17.2

https://blog.angular.io/angular-v17-2-is-now-available-596cbe96242d

Implement breadcrumb navigation

Implement breadcrumb navigation

Description

Implement a responsive breadcrumb navigation bar that adapts to different screen sizes as depicted in the provided design mockups. Ensure that the breadcrumb subnavigation is clear and follows a logical hierarchy for easy user navigation.

Requirements:

-Large Screens: Display the full breadcrumb trail (Your Title / Course Title / Home /) with ample spacing.

-Medium Screens: Show a more condensed version of the breadcrumb (Your Title / Course Title / Home /).

-Small Screens: Minimize the breadcrumb to the most essential elements (Course Title / Home /).

• Package: course

Additional Information

Figma Mockups: Responsive Navigation
Ensure the navigation is accessible and follows best practices for usability.

Create course documentation page

Description

Package

• course
• adminui
• cli
• chorizodev
• architecture
• documentation
• Other

Create the course documentation page with proper layout, markdown formatting, page changing on pages.

Create authorization interface and functionality

Description

Create a login component and appropriate authorisation method with Firebase Auth.

• Package: course

Create course detail navbar

Description

We need to have a more detailed and easy to access navbar in the course itself. Routes: Introduction, Agenda, Tasks, Resources, ...

• Package: course

Create login and account component

Description

Create a login and account management component

• Package: course

Create courses overview

Description

We need to create a courses overview in c/ path with multiple options like sort, order, search, etc.

• Package: course

Create courses navbar

Description

create a Navbar for the Courses

• Package: course

Set role field when registering

Description

Package

• course
• adminui
• cli
• chorizodev
• architecture
• documentation
• Other

When registering, we don't assign the user role when creating the firestore document.

Expected Behavior

The user document also gets the user role field created.

Actual Behavior

none

Improve text color styling on dark theme

Description

Currently we haven't used tailwinds property classes correctly on certain containers and text's. Now the goal is to apply the formal classes to each badly styled tag.

• Package: course

Expected Behavior

Correct lighter text on dark screen for certain html-tags.

Actual Behavior

Missing tailwind classes

Additional Information

Example:
/a/account:

Improve courses overview cards

Description

The courses overview cards should be formatted and displayed better, including createdAt date, grid with 2 columns on bigger screens, etc. (At /c route). https://daisyui.com/components/card/

• Package: course

Improve back button on course layout

Description

As a user I want to go to the last page I visited, before I entered the course, when I press the back button on c/:courseId or it's children, instead of going to the / page.

• Package: course

Expected Behavior

I want to navigate back to my last route with browser history.back() utility which isn't a course page but would be c/ or / where I can see the courses. Pretty much just leave the course detail page, no matter how far I've navigated in the c/:courseId, to the route before I entered course detail at c/:courseId.

Actual Behavior

I'm navigating to root route at /

Possible Fix

Use native function https://developer.mozilla.org/en-US/docs/Web/API/History/back

Steps to Reproduce

1. Navigate to a course at c/:courseId
2. Press the back arrow button

Create registration and account page

Description

Create user registration and account page with lib function which creates appropriate user information in users collection.

You can see things like:

• role

• name

• email

• change password

• ...

• Package: course

Create main pages

Description

Create the main needed pages/components and routing configuration for developing new shared components.

• Package: course

Pages

• Courses overview
• Course detail

Improve latest courses on homepage

Description

We need to add a link, to the appropriate course route and improve layout and add additional fields like createdAt date with DatePipe

• Package: course

Tag on homepage not responsive

Tag on homepage not responsive

If tag is to long, then not responsive anymore

• Package: course

Expected Behavior

long tags should be responsive

Actual Behavior

long tags are not responsive

Additional Information

Create course tasks page

Description

Package

• course
• adminui
• cli
• chorizodev
• architecture
• documentation
• Other

Create course tasks page which also can link to documentation documents, resources, etc.

Expected Behavior

I want to see a list of tasks, be able to read and mark them as complete, etc.

Actual Behavior

none

Define Actions for Pull Requests

Description

Define needed github actions / workflows for pull requests code checking, etc. E.g. linting, formatting, deploy, CI/CD

• Package: architecture

Create preferences page and relevant features

Description

Package

• course
• adminui
• cli
• chorizodev
• architecture
• documentation
• Other

I want to be able to set preferences, such as saving the latest course document in the course documentation I have visited and when going to the course documentation I get rerouted back to the document I last visited. In the preferences settings I want to be able allow this feature or not.

Test issue for workflow

Description

Package

• course
• adminui
• cli
• chorizodev
• architecture
• documentation
• Other

Expected Behavior

Actual Behavior

Possible Fix

Steps to Reproduce

Additional Information

Create change password feature and appropriate security handling

Description

In my /a/account section, below the profile personal information forms, I want to be able to change my password or get routed to a subroute where I can change it.

• Package: course

Expected Behavior

I have to enter the old password and the new password twice and get appropriate feedback.

Actual Behavior

none

Upload own profile avatar on account page

Description

Add a feature where you can upload your own avatar image to your profile.

• Package: course

Expected Behavior

Click on the avatar icon, either add image url or upload from filesystem and add the storage/url to avatar field on the user.

Actual Behavior

none

Setup AdminUI with FireCMS

Description

Set up a new FireCMS project as dynamically as possible, to fit the content of the course package.

• Package: adminui

Enchance loading bars component with additional (optional) text below icon

Description

The loading bars component which displays a loading "spinner", which symbolises data or structure loading, should get a optional loading text title and description field.

• Package: course

Expected Behavior

When using the shared loading bars component I want to be able to display a loading title (with ... eg. Loading course...) and provide it with input or manual text to the shared component. *Optional and by default hidden

Actual Behavior

You can only show the loading bars gif icon, without additional information.

Add firebase connection for data management

Description

Add firebase credentials to course app, and make it ignored and provide a setup docs for interns.

• Package: course

Create general/main collection definition

Description

Package

• course
• adminui
• cli
• chorizodev
• architecture
• documentation
• Other

Create the collection definition for the general/main document in the AdminUI.

Expected Behavior

I can edit the main document in the general collection and not create new ones.

Actual Behavior

none

Make menu's disappear on interaction

Description

When using any menu on smaller screens or the sort function on courses overview, the menu doesn't disappear when clicking on one of the items in the menu or selecting a new sort order.

• Package: course

Expected Behavior

When clicking on the menu hamburger icon or one of the items, the menu should disappear.

Actual Behavior

The menu only disappears when clicking on content, not of the relevant dropdown component.

Possible Fix

Create a script or add a new styles tag on the dropdown div

Additional Information

You will probably find the relevant fix on https://daisyui.com

Fix markdown rendering because of firebase ASCII single line fields

Description

The homepage markdown, defined by the administrator, works halfway through - we need to make code rendering and line breaks easier by reading the straight from a markdown (single string) format.

• Package: course

Expected Behavior

I want to be able to define code, line breaks, etc. more easier.

Actual Behavior

Line breaks, code formatting, etc. doesn't work since line breaks aren't read correctly, because firebase saves the general/main.markdown as a single string.

Improve login component to Angular v17 best practices

Description

Improve the login component and appropriate services, etc. to Angular v17 features like signals.

• Package: course

Improve loading state on course introduction

Description

Package

• course
• adminui
• cli
• chorizodev
• architecture
• documentation
• Other

When opening the course introduction page, the data always reloads and shows the loading bars even tho the data should be cached and loaded faster. This probably happens because of the image.

Expected Behavior

Implement a loading container for the image separately and the texts below aswell. For the image replacement while it still loads, we can show a daisyui skeleton.

Actual Behavior

The banner and texts are loaded in the same loading container and should be split up.

Links in course detail not working and wrong label

Links in course detail not working and wrong label

In course detail in the navigation bar the links/ routes have the wrong label, and if you click on them they don't redirect you to the coresponding page

• Package: Course

Expected Behavior

The links should have the correct Label, and redirect you to the coresponding page

Actual Behavior

The Links have the wrong label, and don't redirect you anywhere

Additional Information

Create homepage markdown renderer

Description

• Package: course

Expected Behavior

The course admin can define a homepage description (which should be a longer string) with markdown rendering which will dynamically be displayed/rendered to html on the root of the website.

Actual Behavior

none

Suggestion

We will need a markdown renderer to render the markdown format to HTML and we will get the document from firebase general/main.description document. Markdown renderer package https://www.npmjs.com/package/ngx-markdown

Already implemented it similar over here: https://github.com/danieljancar/portfolio/blob/develop/src/app/features/blog/blog-detail/blog-markdown-renderer/blog-markdown-renderer.component.ts

Fix searchbar inconsistency

Searchbar in the courses tab is inconsistent

when trying to search for a course, you have to type the whole name of the course instead of being able to type any part of the course name

• Package: Course

Expected Behavior

If you type a part of the name of a course, it should find the course with the coresponding part in its name

Actual Behavior

You have to type the whole name of the course

Make courses optionally private by making them password protected

Description

Courses can be made private with the private flag on them, meaning you have to create a password on the course and it can only be entered after it has been typed in correctly.

• Package: course