[13/10/2022]: FRONTEND DEVELOPMENT FOR OSCSA MOOCs PLATFORM

[sandygudie]

Summary

Open Science Community would like to develop Massive Open Online Courses (MOOCs) platform, which makes free online courses available for anyone to enroll in. We will develop our own materials and will also reuse materials from Open Life Sciences and Turing Way. In order to do that, we need to develop a platform where a participant can log in, and view videos and written materials as lessons. This will be similar to Udemy and other platforms for MOOCs.

GOAL: WE ARE DEVELOPING THE FRONTEND FOR OSCSA MOOC PLATFORM

Technology/Tools

• ReactJs
• CSS
• ESlint/Prettier

User Stories

• User should be able to signup, login, reset password and forgot password,
• User can access the dashboard if authenticated
• User can get all the available courses
• User clicks on a course to view course details
• User can download lesson materials
• User should have a history of all the courses they watched
• User can update profile data, i.e name, password, (excluding email address)

Available Tasks/ pages

• [x] Set up Project structure issue https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/issues/20 PR https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/pull/21
• [x] Set up Eslint/Prettier issue https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/issues/66 PR https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/pull/69
• [x] Set up color variables and types to ensure color consistency. issue https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/issues/82 PR https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/pull/83
• [x] Set up Husky and lint-staged issue https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/issues/66 PR https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/pull/69
• [x] Add a detailed README .md file to the dev_team2 branch issue https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/issues/70 PR https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/pull/90
• [x] Landing page issue https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/issues/36 PR https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/pull/43
• [x] Header issue https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/issues/19 PR https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/pull/37
• [x] Footer issue https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/issues/19 PR https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/pull/37
• [x] Login issue https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/issues/24 PR https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/pull/31
• [x] Sign up page issue https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/issues/24 PR https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/pull/31
• [ ] Reset Password
• [ ] Forgot Password
• [ ] Categories ( List of available courses) Dashboard
• [ ] Profile page
• [ ] History page
• [ ] Course details page
• [ ] Settings page
• [ ] Admin board
• [ ] FEEL FREE TO SUGGEST RELEVANT PAGES

Resources : DESIGN TEMPLATE , APIs , Feel free to come up with any design template

Who wants to work on this issue?/ Contributions

• Everyone is invited to collaborate on this issue,
• Indicate interest in a task.
• Create an issue(multiple people can collaborate on an issue, avoid duplicates)

Contribution Guide

• Clone thedev_team2 branch to your Local machine.
• Create a new branch(git checkout -b feat/<name related to the issue you are solving>),
• Navigate to the Frontend folder, and solve the issue(Do not work on multiple tasks).
• For consistency, useyarn install to install node modules
• You can run the frontend project using yarn run dev
• Create a PR to thedev_team2 branch using the PR TEMPLATE; each PR should solve a task
• Remember to ALWAYS pull updates

And Tag me for PR reviews

[Tammy-Ajoko]

@sandygudie I'd like to Set up color variables and type for the project to ensure color consistency.

[sandygudie]

@JulianaSau That's great;👍 please use separate PRs to solve different tasks. @Tammy-Ajoko Please go ahead Thanks

[adetyaz]

@sandygudie @BatoolMM @okerekechinweotito I want to work Categories ( List of available courses) Dashboard, can it be assigned to me to avoid conflicts with someone else.

[okerekechinweotito]

@adetyaz sure , No-one else is working on it. please go ahead and make an issue

[adetyaz]

Alright thanks @okerekechinweotito

[adetyaz]

Alright thanks @okerekechinweotito

[ladyami]

@adetyaz I am working on it check the issues

[adetyaz]

@ladyami I see you're working on more than two pages, Can I work on this one while you work on the others?

[ladyami]

@adetyaz can you please work on the profile card instead? because I am about to finish the dashboard if you don't understand what I mean by profile card please let me know so I can direct you on where to get ideas to make one.

[adetyaz]

Alright then, direct me to the profile cards or profile page.

Let me see the ideas @ladyami

[ladyami]

@adetyaz when you search on google "Profile card UI design Ideas" you will get a lot to give you ideas is just like when a teacher clicks on a student's name a card pop up that tells little info about the student or student click teachers name or the Admin can also see both student and teachers info I hope you get me?

[adetyaz]

alright , I'll do that and tailor it to the figma design provided to get it to fit

@ladyami thanks

[Cadeau1]

@sandygudie @BatoolMM @okerekechinweotito Please I'd like to work on the Reset Password and Forgot Password. Can it be assigned to me?

[okerekechinweotito]

@Cadeau1 please go ahead and create an issue for it

[Cadeau1]

@Cadeau1 please go ahead and create an issue for it

Okay. Thanks

[Tammy-Ajoko]

@sandygudie I'd like to work on the course details page