[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

• Set up Project structure
  issue [14/10/2022]: Frontend Project Structure setup/dev_team2 branch #20
  PR Added frontend_project structure #21
• Set up Eslint/Prettier
  issue [20/10/2022]: Set up Husky and Lint-staged #66
  PR Setup husky and lint-staged #69
• Set up color variables and types to ensure color consistency.
  issue 23/10/2022]: Set up color variables and types to ensure color consistency #82
  PR Set up color variables and types to ensure color consistency #83
• Set up Husky and lint-staged
  issue [20/10/2022]: Set up Husky and Lint-staged #66
  PR Setup husky and lint-staged #69
• Add a detailed README .md file to the dev_team2 branch
  issue [21/10/2022]: Add a detailed README .md file to the dev_team2 branch #70
  PR Update readme.md to include important info #90
• Landing page
  issue [15/10/2022]: Implement the landing page for MOOCs (dev_team2) #36
  PR [17/10/2022] Develop the landing Page #43
• Header
  issue [14-10-2022]: Develop Header and Footer for MOOC App #19
  PR [17/10/2022]Develop Header and Footer Section #37
• Footer
  issue [14-10-2022]: Develop Header and Footer for MOOC App #19
  PR [17/10/2022]Develop Header and Footer Section #37
• Login
  issue [14/10/2022]: Create a Login Page and Sign Up Page (dev_team2 branch) #24
  PR [14/10/2022]: add login-page , signup page , add routing and improve file structure #31
• Sign up page
  issue [14/10/2022]: Create a Login Page and Sign Up Page (dev_team2 branch) #24
  PR [14/10/2022]: add login-page , signup page , add routing and improve file structure #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 the dev_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, use yarn 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

[okerekechinweotito]

I will be working on the Header , Footer and Sign Up Page

[mufidat3250]

I would love to work on this issue

[mufidat3250]

i will be working on the landing page

[okerekechinweotito]

@sandygudie maybe we should have another meeting before going ahead to pick issues. We should properly assign the issues , to know who is working on what. To avoid multiple duplicates and dragging of issues

[mufidat3250]

I am stuck on how to create sub issue Please i need more enlightenment

[Teslimsama]

@sandygudie Can we start

[victorvictoria-maker]

@sandygudie, I would love to contribute to this project. Can I add a detailed README and also design the sign up, Course details page, Profile page?

[mufidat3250]

we need do create the react app should i do the project set up at my end

[sandygudie]

Thank you Team,
@mufidat3250 we need to finalize on how contributions(branch, PR, Review etc) would be made

[oEbuka]

I will be working on Login, Sign up page, Reset Password, and Forgot Password pages. Also is there a design template we can work with? @sandygudie

[mildrette]

@sandygudie I would love to work on the Landing page
Header
Footer

[Teslimsama]

@sandygudie I would love to work on the history page

[mildrette]

Thank you Team, @mufidat3250 we need to finalize on how contributions(branch, PR, Review etc) would be made

I think the we need to have a Main/Master branch,
a dev branch which all approve PR go first before they are send to the Main/Master
and everyone needs to create a personal branch with their respective names where the push their code before opening a PR

[Teslimsama]

And is the template ready

[Teslimsama]

I will this on

[sandygudie]

@mildrette I agree
Hopefully @BatoolMM or the mentors will create a dev branch for development

[mildrette]

@sandygudie should I wait for approval of the task we pick or should I start working on them??

[mufidat3250]

sandygudie thanks for the response i want to also know if we will be working on the existing design before other screens are completed. and how do we get started.

[sandygudie]

@Mufidat We start working on the existing designs
@mildrette I will suggest waiting for approval

[victorvictoria-maker]

@Mufidat We start working on the existing designs @mildrette I will suggest waiting for approval

Alright. We await approval

[mufidat3250]

alright

[BatoolMM]

Thank you all for your work I created a dev branch in case you would like to use it.

Looking forward to seeing your contributions!

[mildrette]

@BatoolMM we are waiting for your approval on the task we pick so we can start working on them

[Meekunn]

@sandygudie I would love to set up Prettier/ESlint and work on the SignUp/SignIn Pages.
Also, you can add a FAQs page.

[Meekunn]

@mufidat3250 Should we wait for you to set up the react project? Or Can I go ahead with it? @sandygudie @BatoolMM

[Dhei-vid]

I will be working on Login, Sign up page, Reset Password, and Forgot Password pages. Also is there a design template we can work with? @sandygudie

Have you started with the Login and signup pages? I want to work with you on that. You can handle the signup and I will handle the login or vice versa. And we are using MongoDB right? with just google authentication.

[okerekechinweotito]

@sandygudie Update the checkboxes to appear checked just like they did here #5 . So we would know which issues have been completed and which ones are free to be picked

[JesperKawuma]

Hello @sandygudie, can you please direct me to the project repo you working on. I can't find it

[sandygudie]

Hi @JesperKawuma here is the link to the branch https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/tree/dev_team2

[JesperKawuma]

Got it, thanks @sandygudie

[JulianaSau]

Hi @sandygudie, I'd like to work on setting up automation of linting and formatting using husky and lint-staged. And updating the README.md file to the dev_team2 branch

[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