openedx / frontend-app-learner-dashboard

Learner Dashboard MFE

frontend-app-learner-dashboard

The Learner Home app is a microfrontend (MFE) course listing experience for the Open edX Learning Management System (LMS). This experience was designed to provide a clean and functional interface to allow learners to view all of their open enrollments, as well as take relevant actions on those enrollments. It also serves as host to a number of exposed "widget" containers to provide upsell and discovery widgets as sidebar/footer components.

Quickstart

To start the MFE and enable the feature in LMS:

1. Start the MFE with npm run start. Take a note of the path/port (defaults to http://localhost:1996).

From there, simply load the configured address/port. You should be prompted to log into your LMS if you are not already, and then redirected to your home page.

Plugins

This MFE can be customized using Frontend Plugin Framework.

The parts of this MFE that can be customized in that manner are documented here.

Contributing

A core goal of this app is to provide a clean experimentation interface. To promote this end, we have provided a silo'ed code directory at src/widgets in which contributors should add their custom widget components. In order to ensure our ability to maintain the code stability of the app, the code for these widgets should be strictly contained within the bounds of that directory.

Once written, the widgets can be configured into one of our widget containers at src/containers/WidgetContainers. This can include conditional logic, as well as Optimizely triggers. It is important to note that our integration tests will isolate and ignore these containers, and thus testing your widget is the response of the creator/maintainer of the widget itself.

Some guidelines for writing widgets:

• Code for the widget should be strictly confined to the src/widgets directory.
• You can load data from the redux store, but should not add or modify fields in that structure.
• Network events should be managed in component hooks, though can use our data/constants/requests:requestStates for ease of tracking the request states.

License

The code in this repository is licensed under the AGPLv3 unless otherwise noted.

Please see the license for more info.

Getting Help

If you're having trouble, we have discussion forums at https://discuss.openedx.org where you can connect with others in the community.

Our real-time conversations are on Slack. You can request a Slack invitation, then join our community Slack workspace. Because this is a frontend repository, the best place to discuss it would be in the #wg-frontend channel.

For anything non-trivial, the best path is to open an issue in this repository with as many details about the issue you are facing as you can provide.

https://github.com/openedx/frontend-app-learner-dashboard/issues

For more information about these options, see the Getting Help page.

Resources

Additional info about the Learner Home MFE project can be found on the Open edX Wiki.

The Open edX Code of Conduct

All community members are expected to follow the Open edX Code of Conduct.

Reporting Security Issues

Please do not report security issues in public. Please email [email protected].

frontend-app-learner-dashboard's Issues

Footer component

During discovery work with @cintnguyen, we noticed a large gap between the footer and the end of the page.

This becomes an issue around 1080px in height. We need to make sure the container for all of the content we're showing accounts for the header and footer and supports the viewport.

Use configured platform name in email reminder, not "edX"

This string should use the configured platform name instead of edX:

frontend-app-learner-dashboard/src/containers/LearnerDashboardHeader/ConfirmEmailBanner/messages.js

Line 12 in 272870f

defaultMessage: 'Remember to confirm your email so that you can keep learning on edX! {confirmNowButton}.',

PRs

Beta Give feedback

1. fix: Remove edX-specific reference #359
   +0
2. [Backport] fix: Remove edX-specific reference #360
   +0

Create components for `PluginSlots`, standardize id naming

Move tests to RTL

Enzyme is deprecated, we've moved other repos to React Testing Library, we should migrate our tests as well. This would likely allow us to remove the following dependencies:

• "@wojtekmaj/enzyme-adapter-react-17"
• "enzyme-to-json"
• "whatwg-fetch"
• "axios-mock-adapter"
• "fetch-mock"

Tasks

Beta Give feedback

1. feat: migrate enzyme to react-unit-test-utils #276
   +0

Node 20 upgrade

Description

See the parent ticket for the general description and motivation, openedx/public-engineering#267. Make sure to follow its recommendations for each step of the process.

Tasks

Beta Give feedback

1. test: Add Node 20 to the CI matrix (example PR)
2. [build|refactor]: Upgrade to Node 20 (example PR)
3. test: Remove Node 18 from the CI matrix (example PR)

Replace edx.org brand with openedx brand in dependencies

The latest master depends on edx.org brand package which is not open source.

Similar issues in other MFEs:

• ORA Grading
• Gradebook

i18n issues in frontend-app-learner-dashboard

During discovery, noticed that certain strings were not being extracted to be translated:

• Refine
• Switch dashboard
• Personal

None of these show up in the transifix_input.json file generated by running make extract_translations

Missing internationalization

As per https://discuss.openedx.org/t/translations-issues-with-the-frontend-app-learner-dashboard/12287, @sambapete writes:

(...) not all string ids in the various messages.js files found in the repository are properly harvested, collected and sent to Transifex for translations.

If you look at the course card on the dashboard, you will see for example that the string “Begin Course” and other strings remain in English for all languages. You can easily check that by switching languages in edx.org or in your own Open edX instances running Quince for example.

That’s because the strings in src/containers/CourseCard/components/CourseCardActions/messages.js never made it to src/i18n/messages/fr_CA.json or any other files that would be used for translating various languages in the MFE. Check for the id learner-dash.courseCard.actions.beginCourse and you will not find it in the strings that the Translations Working Group needs to translate in Transifex.

Make Upgrade button optional in Learner Dashboard

There are a lot of things in Learner Dash that need to be made optional (Related Programs, Recommendations for You, Upgrade, Grade Required to Pass the Course, and Social Media Buttons), but the Upgrade button is rather critical.

Ensure compatibility of frontend-app-learner-dashboard with @edx/brand theming style

I tested frontend-app-learner-dashboard using the openedx brand theme and the style changes looked great. Nothing stuck out to me as a concern.

Here's the MFE with the openedx brand:

And here is it with edx.org brand. (default at the moment: #183)

Changes noticed when using openedx brand

• the header seems like it's doing the right things
  • the following items change from a more rounded appearance to a more straight lined appearance
    • the line below courses
    • the avatar button edges
    • view as: bar and submit buttons
  • there's also shading above and below the view as bars and submit button
• 'submit' button changes color from a purple-y to a muted red (overlay look)
• 'My Courses'/'Looking for a new challenge?'/'Explore our courses to add them to your dashboard.' - font weight and decreases and become a lighter black/dark gray
• 'Refine' button loses it's border and has overlay appearance
• 'Explore courses' button changes from rounded edges to sharp corners and the button color changes from a magenta purple to red
• 'Find a course' color change

Upgrade React JS to v17

This repo is currently using React JS v16. We need to upgrade it to React 17 before moving to latest React version(v18).
React 17 doesn’t add any new developer-facing features, so its upgrade might not cause any breaking changes. Our end goal is to upgrade React to v18 but v18 no longer support enzyme, so we are upgrading to React 17 and then we’ll migrate from enzyme.

Epic Link

React 17 upgrade

Not able to un-enroll

Description:

When a learner tries to un-enroll from a course, the URL shows it's successful, but there is no change.
The record remain active in admin model and the enrollment is unchanged.

** Steps to reproduce **

• Go to Dashboard

• Click on 3 buttons & Click on Unenroll
  

• Click on "Unenroll"
  

• Fill or don't fill the survey and submit
  

• Check on URL in request and click "Return to dashboard"
  

Expected Behavior

• Should unenroll from that course

Actual behavior

• The course is still present and the user is still enrolled

This issue is raised as result of discussion from this forum post

Specs

Tutor :- 17.0.1 & 17.0.2
Open edX :- quince.1 & quince.2
Frontend-app-learner-dashboard :- quince.1 & quince.2

Overhangio/openedx-learner-dashboard-dev, repository does not exist?

Hi,

I am using tutor 17.0.0

I’m changing the underlying code for some of the MFEs in tutor. I changed the authn MFE successfully by forking it and then mounting my authn repo and running it in dev environment. When I try to do the same for learner-dashboard (I forked quince.1: https://github.com/openedx/frontend-app-learner-dashboard/releases/tag/open-release%2Fquince.1):

clone my repo
run npm install inside repo directory
add a mount by running tutor mounts add "$(tutor config printroot)"/frontend-app-learner-dashboard
run tutor dev launch
I get:

docker compose -f /home/silidrone/.local/share/tutor/env/local/docker-compose.yml -f /home/silidrone/.local/share/tutor/env/dev/docker-compose.yml --project-name tutor_dev up --remove-orphans -d
[+] Running 0/1
⠿ learner-dashboard Error 1.8s
Error response from daemon: pull access denied for overhangio/openedx-learner-dashboard-dev, repository does not exist or may require ‘docker login’: denied: requested access to the resource is denied
Error: Command failed with status 18: docker compose -f /home/silidrone/.local/share/tutor/env/local/docker-compose.yml -f /home/silidrone/.local/share/tutor/env/dev/docker-compose.yml --project-name tutor_dev up --remove-orphans -d

How am I supposed to change the code of the learner-dashboard MFE? Is this a bug or am I missing something? The exact same procedure worked for frontend-app-authn.

NoticeWrapper

During discovery with @httpsmenahassan, found hard coded references to a private plugin. Should have the plugin be public and usable by the community or removed/deprecated.

https://github.com/openedx/frontend-app-learner-dashboard/blob/82ff0d7ddb95e316ef6c0251de49bafebe0b93d9/src/components/NoticesWrapper/index.jsx

[Console Warning]: Cannot update a component (`DashboardLayout`) while rendering a different component (`WidgetSidebar`).

This is visible in console while running the master, quince.2, quince.1 branches.

Warning: Cannot update a component (`DashboardLayout`) while rendering a different component (`WidgetSidebar`). 

To locate the bad setState() call inside `WidgetSidebar`, follow the stack trace as described in https://reactjs.org/link/setstate-in-render

Filter Form header (Course Status) is not marked for translation

Hello everyone. The "Course Status" expression, used as title of the filter form, is not marked for translation and thus stays the same in all languages. The screenshot below is a side by side comparison between Persian and English:

Authenticated user dropdown `personal` dashboard redirects to hardcoded edX reference

Description

As an authenticated student/instructor, when you do User dropdown > Switch dashboard > Personal redirects to /edx-dashboard.

Possible solutions

First, a few context questions:

What's the purpose of the personal dashboard?
How does it work for edX? What does it do?
How would that look like for the community?

As for the Quince release, we could hide the Switch dashboard behind a feature flag here:

frontend-app-learner-dashboard/src/containers/LearnerDashboardHeader/ExpandedHeader/AuthenticatedUserDropdown.jsx

Lines 32 to 49 in 1a51ac0

	<Dropdown.Header>SWITCH DASHBOARD</Dropdown.Header>
	<Dropdown.Item as="a" href="/edx-dashboard" className="active">
	Personal
	</Dropdown.Item>
	{!!dashboard && (
	<Dropdown.Item as="a" href={dashboard.url} key={dashboard.label}>
	{dashboard.label} {formatMessage(messages.dashboard)}
	</Dropdown.Item>
	)}
	<Dropdown.Divider />
	{!dashboard && getConfig().CAREER_LINK_URL && (
	<Dropdown.Item href={`${getConfig().CAREER_LINK_URL}`}>
	{formatMessage(messages.career)}
	<Badge className="px-2 mx-2" variant="warning">
	{formatMessage(messages.newAlert)}
	</Badge>
	</Dropdown.Item>
	)}

I'll be opening a PR with this proposed change.

PRs

• #237

Change request: switch to the frontend-component-header

The problem

Instead of using the frontend-component-header the MFE uses its own LearnerDashboardHeader component. Main pain points here:

• it’s a third header on the platform (including the legacy header and the header component used by other MFEs) which is confusing for users
• it has hardcoded edx’s values, like the edx logo, which I believe will be a violation of the trademark policies if used elsewhere
  

Proposal

It would be great to replace it with the easily-brandable frontend-component-header.

Additional info

• openedx discussion post

Banner Component using Alert vs CardStatus

During discovery work of ensuring this MFE passed accessibility (a11y) standards and using Paragon components whenever possible, found that frontend-app-learner-dashboard is using Alert to do what is essentially the function of CardStatus. Using Alert has accessibility concerns since it includes aria-live="assertive", which would only allow the last message to be read aloud. This presents a problem since the user potentially will have multiple course card banner messages with the need to read all aloud.

Is there something about this usage of Alert that is being used because CardStatus isn’t satisfying another need here? How can we/how should we expand the functionality of CardStatus to cover use cases like this?

export const Banner = ({
  children, variant, icon, className,
}) => (
  <Alert variant={variant} className={className} icon={icon}>
    {children}
  </Alert>
);

https://github.com/cintnguyen/frontend-app-learner-dashboard/blob/e95e633459a0d0bf00f92f14d79d8f79e657bfb0/src/components/Banner.jsx#L7-L13

(Enroll in a course and you’ll be shown an example of CourseCardBanner that uses Alert below the course listed with the course info displayed under ‘My Courses’. Image attached below to show that CourseCardBanner component is "Grade required to pass the course: 60%")

Rename this repo to learner-home

The configuration/toggles for this MFE are referred as mfe_home however the repo name is leaner-dashboard.

This might create confusion. as typically (as observed) the pattern that is uesed that toggles/settings for each MFE are named as to what the MFE is called in it's repo.

So I suggest either:

1. rename this repo to frontend-app-leaener-home
2. rename its related toggle namespace to learner_dashboard

No translations for Persian language

Hi all. Translations for Persian language (fa and / or fa-ir) is not currently available neither in Quince nor in master. As leaner dashboard is set as default dashboard by tutor, it would be great to have translations for Persian as well.

This issue was originally discussed in this topic in the forum

EmailLink Component

Discovery done with @cintnguyen:

The EmailLink component is covering for the use case of if there isn’t an email address provided. It’s being tightly coupled with Paragon’s MailToLink, returning null when the address is not provided. Seen here. It's being used throughout the code base and seems redundant.

We addressed this in Paragon’s WG meeting for further clarification on if we should build out MailToLink in Paragon to handle this use case. You can find those meeting notes here.

The takeaways from the WG are that If you’re using MailtoLink, we expect that an email address will exist to send. Currently, none of the following props are required: to, cc, and bcc. We could possibly make one of these required.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	redux-devtools-extension

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update dependency @openedx/frontend-build to v14.0.10
• fix(deps): update dependency dompurify to v2.5.5
• fix(deps): update dependency prop-types to v15.8.1
• fix(deps): update dependency @openedx/paragon to v22.6.1
• fix(deps): update dependency history to v5.3.0
• fix(deps): update dependency query-string to v7.1.3
• fix(deps): update dependency react-intl to v6.6.8
• fix(deps): update dependency react-router-dom to v6.23.1
• fix(deps): update dependency redux to v4.2.1
• fix(deps): update dependency redux-thunk to v2.4.2
• fix(deps): update dependency regenerator-runtime to ^0.14.0
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update dependency copy-webpack-plugin to v12
• chore(deps): update dependency fetch-mock to v10
• chore(deps): update dependency husky to v9
• chore(deps): update dependency node to v20
• chore(deps): update dependency react-dev-utils to v12
• chore(deps): update dependency semantic-release to v24
• chore(deps): update dependency ubuntu to v22
• chore(deps): update testing-library monorepo (major) (@testing-library/jest-dom, @testing-library/react, @testing-library/user-event)
• fix(deps): update dependency @edx/frontend-enterprise-hotjar to v7
• fix(deps): update dependency @optimizely/react-sdk to v3
• fix(deps): update dependency @reduxjs/toolkit to v2
• fix(deps): update dependency axios to v1
• fix(deps): update dependency dompurify to v3
• fix(deps): update dependency filesize to v10
• fix(deps): update dependency html-react-parser to v5
• fix(deps): update dependency query-string to v9
• fix(deps): update dependency react-pdf to v9
• fix(deps): update dependency react-redux to v9
• fix(deps): update dependency react-share to v5
• fix(deps): update dependency redux to v5
• fix(deps): update dependency redux-thunk to v3
• fix(deps): update dependency reselect to v5
• fix(deps): update dependency universal-cookie to v7
• fix(deps): update font awesome to v6 (major) (@fortawesome/fontawesome-svg-core, @fortawesome/free-brands-svg-icons, @fortawesome/free-solid-svg-icons)
• fix(deps): update react monorepo to v18 (major) (react, react-dom, react-test-renderer)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): replace dependency redux-devtools-extension with @redux-devtools/extension 3.0.0

Detected dependencies

github-actions

.github/workflows/add-depr-ticket-to-depr-board.yml

.github/workflows/add-remove-label-on-comment.yml

.github/workflows/ci.yml

• actions/checkout v3
• actions/setup-node v3
• codecov/codecov-action v4
• dawidd6/action-send-mail v3
• ubuntu 20.04

.github/workflows/commitlint.yml

.github/workflows/lockfileversion-check.yml

.github/workflows/npm-publish.yml

• actions/checkout v3
• actions/setup-node v3
• ubuntu 20.04

.github/workflows/self-assign-issue.yml

npm

package.json

• @edx/brand ^1.2.2
• @edx/browserslist-config ^1.1.0
• @edx/frontend-enterprise-hotjar 3.0.0
• @edx/frontend-platform 8.0.4
• @edx/openedx-atlas ^0.6.0
• @edx/react-unit-test-utils 3.0.0
• @fortawesome/fontawesome-svg-core ^1.2.36
• @fortawesome/free-brands-svg-icons ^5.15.4
• @fortawesome/free-solid-svg-icons ^5.15.4
• @fortawesome/react-fontawesome ^0.2.0
• @openedx/frontend-plugin-framework ^1.2.0
• @openedx/frontend-slot-footer ^1.0.2
• @openedx/paragon ^22.2.2
• @optimizely/react-sdk ^2.9.2
• @redux-beacon/segment ^1.1.0
• @reduxjs/toolkit ^1.6.1
• @testing-library/user-event ^13.5.0
• axios ^0.28.0
• classnames ^2.3.1
• core-js 3.37.1
• dompurify ^2.3.1
• email-prop-type ^3.0.1
• file-saver ^2.0.5
• filesize ^8.0.6
• font-awesome 4.7.0
• history 5.0.1
• html-react-parser ^1.3.0
• jest ^29.7.0
• jest-environment-jsdom 29.7.0
• jest-when ^3.6.0
• lodash ^4.17.21
• moment ^2.29.4
• prop-types 15.8.0
• query-string 7.0.1
• react ^17.0.2
• react-dom ^17.0.2
• react-helmet ^6.1.0
• react-intl 6.4.7
• react-pdf ^7.0.0
• react-redux ^7.2.4
• react-router-dom 6.15.0
• react-share ^4.4.0
• react-zendesk ^0.1.13
• redux 4.1.1
• redux-beacon ^2.1.0
• redux-devtools-extension 2.13.9
• redux-logger 3.0.6
• redux-thunk 2.3.0
• regenerator-runtime ^0.13.9
• reselect ^4.0.0
• universal-cookie ^4.0.4
• util ^0.12.4
• whatwg-fetch ^3.6.2
• @edx/reactifex ^2.1.1
• @openedx/frontend-build 14.0.9
• @testing-library/jest-dom ^5.14.1
• @testing-library/react ^12.1.0
• axios-mock-adapter ^1.20.0
• copy-webpack-plugin ^11.0.0
• fetch-mock ^9.11.0
• husky ^7.0.0
• identity-obj-proxy ^3.0.0
• jest-expect-message ^1.1.3
• react-dev-utils ^11.0.4
• react-test-renderer ^17.0.2
• redux-mock-store ^1.5.4
• semantic-release ^20.1.3

nvm

.nvmrc

• node 18.20

---

• Check this box to trigger a request for Renovate to run again on this repository

Review on package dependencies

When referencing requirements for an MFE here , 13 is to only have hard dependencies on libraries that are either in the open edX organization or a commonly used third-party (generic NPM package) . During discovery found that:

• "@optimizely/react-sdk" requires API keys making it not readily accessible to the community, referenced here. Is this something we can remove and replace? On npm, it states that it is an "A/B testing and feature management tool for product development teams that enables you to experiment at every step"
• "react-zendesk" issues outlined in #225 , wanted to bring attention to it. Not sure if we have something internal to replace
• "@wojtekmaj/enzyme-adapter-react-17" is the unofficial adapter for react 17 from enzyme. Currently an inactive project. Can this be removed?

Includes ten separate copies of the Paragon SCSS

This repo uses a bit of an SCSS anti-pattern... it has many separate SCSS files which each start with @import "@openedx/paragon/scss/core/core";

The net result is that Paragon's SCSS rules are included 10 times. If you go to https://home.edx.org/ and use the browser's Inspect tool, you can easily confirm this:

The fix is any of the following:

1. Replace the use of the deprecated @import with the newer @use which avoids this problem. (Edit: or so I thought... but in testing, I can't get it to work. It still duplicates all the rules. I think it only works if you also take approach 2 below).
2. Centralize all your SCSS includes, like course-authoring does so you have one file that includes paragon and then includes all the other SCSS files from your app; or
3. Instead of importing all of Paragon in each file, just import the variables/functions/mixins. I took this approach when I needed to fix this issue for the frontend shell - see the fix for learner-dashboard in this commit. However, Paragon doesn't fully support this yet - so in some cases you have to do "private" imports as you can see in that commit.

Bug: Course filter displays an extra value

How to reproduce?
Go to learner dashboard, click Refine, tick one of the course statuses.

Could be a paragon related problem.

Course image height

The course image takes up the actual height of the image.

Ideally the height of the course image should be fixed.

Reimplement "Looking for a new challenge" panel

The recommendations panel implementation was removed as part of #311. We should re-add the basic component as default content for the corresponding slot:

New MFE: Learner Dashboard

Description

Make sure this MFE follows all the community requirements. Sub-tasks are listed below.

Links

• Related forum thread

Sub-tasks

• #176
• #178
• #183
• #210
• Update frontend-platform to 5.5.1+

Pre-existing PRs

• #180
• #205
• #209

Missing translation for Quince

The messages from src/containers/CourseCard/components/CourseCardBanners/messages.js

are not included in the Transifex resource file.

Check for learner-dash.courseCard.banners.passingGrade for example.

Unenrolling from Course is not working

When I try to unenroll from a course, the API gives error. As the API is requesting the default .env.development variable which is http://localhost:18000. But it should request to LMS_BASE_URL provided in the MFE_CONFIG settings. When printing the getConfig().LMS_BASE_URL , it is printing the correct URL.

Brand logo URL is hardcoded and bypasses URL overrides for custom branding

Description:

While working on an MFE branding/customization and testing the dashboard MFE locally, I noticed that the brand logo wasn't being overridden.

I tried overriding the logo with both possible options:

1. Added a URL for LOGO_URL in the environment variable through .env.development
2. Replaced the logo asset/image in the brand repository that I created

Possible Cause

Further digging into this, I noticed that the logo URL in the dashboard MFE's BrandLogo component is hardcoded. I assume this means it would never care for any logo URLs added through environment vars.

Steps to reproduce

• Setup learner dashboard MFE locally, add a value for LOGO_URL in the .env.development
• Load the dashboard, You should see the edX logo instead of the one from the manually added URL in step# 1.

Expected behavior

• The Brand logo is overridable through the URL added in the environment variables

Uncaught TypeError if undocumented environment variable is unset

Description

If the environment variable EXPERIMENT_08_23_VAN_PAINTED_DOOR is unset, the MFE fails with a console error.

To reproduce

On a devstack, simply check-out master and try to npm start as-is. You will run into an uncaught TypeError.

Potential solutions

As far as simple solutions go, the preferred one would be for this variable to be treated as false if unset.

It's possible to work around the issue by setting EXPERIMENT_08_23_VAN_PAINTED_DOOR=false (or true) in .env.development.

However, a more important conversation to have is if these experiments should be in the codebase at all.

The dashboard doesn't respect the language cookie setting

Steps to reproduce

• Go to account setting
• Change the language
• Go to the learner dashboard MFE

Expected results

• The UI should be translated into the selected language

Actual result

• The UI stays in English

ZendeskFab

During discovery with @httpsmenahassan - found that ZendeskFab is an external subscription base that we need to access a proprietary API for, which does not have a wide adoption inside the community. Wanted to stray away from recommending a third party service or company like this as part of an open source project. Can we remove and replace this?

Has multiple hardcoded edX strings (example here).

When referencing requirements for an MFE here , 13 is to only have hard dependencies on libraries that are either in the open edX organization or a commonly used third-party (generic NPM package)

README to-dos

I reviewed this repo's README against these specifications and outlined what's currently included and what needs to be added below.

When making any changes or updates, note that ideally we should stick to the exact section order shown below with additional sections added where it makes sense based on the maintainers' judgement.

Tasks

• Title - The name of the component.
• Badges - A set of badges that quickly let visitors review the health of the project. The badges section should contain at minimum the following badges:
  • License - Indicating the license of the repo.
  • Maintenance Status - One of maintained, deprecated, unsupported, experimental.
  • CI Status - The status of CI testing on the main branch.
  • Package Published Status - If the component is a library, then a badge indicating whether publishes to the relevant package index are passing. For example, has the latest version been successfully published to PyPI yor NPM?
• Purpose - A paragraph or two summarizing the purpose of this component. This should be oriented towards people who are new to the Open edX project.
• Getting Started - A section that details various aspects of getting started with this component. Some common use cases include, getting started with development or how to deploy this component.
  • Quickstart section doesn’t isn’t include npm install or nvm use
  • It also doesn’t mention that devstack should be running in the background. Not sure if we need that explicitly listed but if the goal of the README is to be as beginner friendly as possible, it’d be good to have that be clearly stated
• Getting Help - A section to indicate where and how the user can get help with the component, including how they should go about reporting issues with the component. It should link to relevant docs as well as places where the users can get help from other humans.
• Contributing - A section to indicate how new users can contribute to this component. This section should at the very least contain a link to the general How to Contribute documentation for the Open edX Project.
• The level of contributions that the maintainer is willing to accept should also be clearly described here. Some possible values might be:
  • fixes only - no new features are being accepted at this point, but fixes and maintenance updates welcome.
  • new features accepted - please discuss your new ideas with the maintainers before you write code to increase the changes that features are accepted.
  • security only - no changes accepted except for security fixes.
• Open edX Code of Conduct - A section that links to the Open edX Code of Conduct
• People - A section that tells people how they can find the current maintainers of this component. Usually a link to the Backstage page for the component.
• Reporting Security Issues - A link to the e-mail address where security issues can be reported.