[C4GT] - Search / Discovery widget for sunbird ED

[coolbung]

Project Details

Currently the search filters in SB only supports the BMGS values. This is a problem, which will impact the discoverability of the contents in scenarios where the framework is using other categories. Additionally, it should be possible to filter the content by other other schema fields like audience etc.

Features to be Implemented

Create a component that will show filters and search results, similar to Algolia Instantsearch. This component should allow configuration that will specify which fields to allow filtering on (framework categories as well as other fields)

What needs to be built

• Component for showing a list of content / courses
• Component for showing the filter options. The filter values should be automatically fetched via the search API
• Parent component that displays above 2 components, and the list component will show content as per the selected filters
• Component for both Angular & React
• Responsive UI
• Documentation for using the component (how to use, configure, customise and extend)

Learning Path

1. Sunbird Knowlg - composite search API, schemas for various entities like content, collection
2. Creating reusable components with angular & react

Complexity Medium

Skills Required

• Javascript & Typescript
• Angular
• React
• Using APIs

Name of Mentors

@gouravmore @komalm

Project size 12 Weeks

Product Set Up

Acceptance Criteria

• List Page rendering properly and showing the content type, image etc
• Changing filters updates the list
• Responsive support
• Documentation
• Telemetry generated for actions

Technical Design areas

1. Can the same code be written that will work for both angular and react
2. CSS framework selection OR can the implementation be CSS framework agnostic
3. Design of the component configuration (inputs, events)

[swastiksuvam55]

Hello @gouravmore I'm interested in working in the project but currently facing issues installing it including the error:0308010C:digital envelope routines::unsupported while running ng build --watch=true in src/app/client , I tried to update it using set NODE_OPTIONS=--openssl-legacy-provider but the problem still persists, it'd be great if I could communicate with you and discuss my problem and proposal. Thank you very much.

[gouravmore]

@swastiksuvam55 Thanks for showing the interest in this project. Here is the list of items you can start building it

• Start creating the new individual component for search and filter the list of items. similar to Algolia Instantsearch. This component should allow configuration that will specify which fields to allow filtering.
• Try to build and packge this component and use it in another seperate project.

For this error:0308010C:digital envelope routines::unsupported error share your node version details.

[aceta-minophen]

Hello @gouravmore I am really interested in working on this project and creating a proposal. I have started with the project setup. As I am very new to open source, I seek further guidance with contributions and drafting the proposal. Thank you!

[swastiksuvam55]

@swastiksuvam55 Thanks for showing the interest in this project. Here is the list of items you can start building it

• Start creating the new individual component for search and filter the list of items. similar to Algolia Instantsearch. This component should allow configuration that will specify which fields to allow filtering.
• Try to build and packge this component and use it in another seperate project.

For this error:0308010C:digital envelope routines::unsupported error share your node version details.

Thanks for your reply @gouravmore currently am using node version 18.12.1, the problem I faced was when I was trying to run the SunbirdEd-portal code after cloning it. As for creating a new component, should I create 2 different for react and angular and use algolia's library to implement the component code or write original code with the same logic for the component? Also, while going through the composite search API, it shows required some authorization key to use it, it'd be really helpful of you can sort this out. Thank you.

[kanisshka]

hello @swastiksuvam55 , how did you solve that error because I recounter the same error while running the command.

Hello @gouravmore I'm interested in working in the project but currently facing issues installing it including the error:0308010C:digital envelope routines::unsupported while running ng build --watch=true in src/app/client , I tried to update it using set NODE_OPTIONS=--openssl-legacy-provider but the problem still persists, it'd be great if I could communicate with you and discuss my problem and proposal. Thank you very much.

[aceta-minophen]

hello @gouravmore @komalm I am interested in the project, however I am facing difficulties in setting up locally, despite many errors I was able to install all the dependencies via yarn install in WSL system however I am unable to understand what to do in the “Edit the Application Configuration” step. How do I generate the API token? What urls am I supposed to enter?

Kindly guide me through this as I am really interested in contributing to this project and have started with drafting a proposal

[mustafaazad03]

Hi @gouravmore , @komalm,
I am Mustafa Azad. Currently, I am MERN Stack Developer with some experience in Angular Js. As I have build many projects around this technologies and learned many efficient techniques to implement functionality. This project grabs my interest and I would love to contribute in this.
Looking forward for you valuable advice in the future.