Online Learning Website

The goal of the project is to build a full online learning system. An online learning system is a website where people can take courses that have already been recorded. The Scrum Agile Methodology was used to create this project using the MERN stack (MongoDB, Express JS, React JS, and Node JS). We used Java Script as our main language.

Motivation 🔥

The project's main goal is to serve as a helpful tool for those who want to develop their skills and expand their horizons. Taking use of its online classes and exercises is a simple and accessible way to improve one's knowledge and abilities. The project aids students in not just acquiring new knowledge but also putting that knowledge to the test, increasing the likelihood that it will be retained. This project has always wanted to be the best it could be, and it remains committed to this ideal,as we also want to improve our skills in full stack development

Table of contents

• Technologies
• Environment Variables
• Screenshots
• Build status
• Code style
• Features
• Run Locally Installation
• How to use
• Code Examples
• API Reference
• Tests
• Contribute
• Feedback
• Authors
• License

Technologies

Screenshots

Homepage

user login

Admin dashboard

Reports

View all courses

Forget Password

Instructor balance

Create Course

back to top

Build status

• The project is currently in development as there are UX validations to avoid spamming requests to the backend
• corporate trainee needs some improvments
• unit test needs to be added
• messaging platform needs to be added

back to top

Code style

• The code styling using ESlint and prettier.
• Naming conventions are written using camelCase.
• The project implemented using the MVC design pattern, Which is commonly used for developing user interfaces that divides program logic into inter-connected elements.

back to top

Features

Our Webstie User Types

Admin ,Instructor ,Individual Trainee ,Corporate Trainee and Guest

Admin's Features

As an admin you can

• view reported problems and mark them as "resolved" or "pending"
• refund an amount to a trainee to their wallet
• add another administrator with a set username and password
• add instructors and create their usernames and passwords
• add corporate trainees and create their usernames and passwords
• view course requests from corporate trainees and grant their access to specific courses
• set a promotion (% sale) for specific courses, several courses or all courses

Instructor's Features

As an instructor you can

• log in using a username and password and log out
• view and accept the website/ company refund/ payment policy while signing up
• view all the titles of the courses given by you
• filter the courses given by you based on a subject or price
• search for a course given by you based on course title or subject
• view the ratings and reviews on all your courses
• view the amount of money owed per month
• view and accept the contract which includes all the rights to the posted videos and materials as well as the % taken by the company on each video per registered trainee
• create a new course and fill in all its details inclding title, subtitles, price and short summary about the entire course
• upload a video link from YouTube under each subtitle and enter a short description of the video
• upload a video link from YouTube as a preview to the course
• create a multiple choice exam with 4 choices per question
• set the answers (not visible for the trainee) for multiple choice exercises
• view your rating and reviews
• edit your mini biography or email
• define a promotion for the course (% discount) and for how long

Individual trainee's Features

As an individual trainee you can

• log in using a username and password and long out
• view and accept the website/ company refund/ payment policy while signing up
• enter your credit card details to pay for a course they want to register for
• pay for a courses
• view the amount available in your wallet from refunded courses
• request a refund only if less than 50% of the course has been attended

Corporate trainee's Features

As an corporate trainee you can

• request access to a specific course you do not have access to

Guest trainee's Features

As an guest trainee you can

• sign up for an account as an individual trainee using a username, email, password, first name, last name and gender
• view and accept the website/ company refund/ payment policy while signing up

Individual and Corporate trainees' Features

As an individual or corporate trainee you can

• open all the items inside a course you are registered for including videos and excercises
• rate an instructor or a course
• solve a multiple choice exercise by choosing the correct answer
• submit the answers to the exercise after completing it
• view your grade from the exercise
• view the questions with the correct solution to view the incorrect answers
• watch a video from a course you are registered for
• see your progress in the course as a percentage of how much of the course has been completed so far
• receive a certificate as a PDF after completing the course via email and download it
• write notes while watching the video and download it
• see a list of all the courses you are enrolled in on your profile

Instructor ,Individual and Corporate trainees' Features

As an Instructor, individual or corporate trainee you can

• change your password
• receive an email to change a forgotten password
• report a problem with a course. The problem can be "technical", "financial" or "other"
• see all previously repoted problems and their statuses
• follow up on an unresolved problem

Guest,Instructor,Individual and Corporate trainees' Features

As a guest,instructor,individual or corporate traiee you can

• select your country
• view all the titles of the courses available including the total hours of the course and course rating
• view the price of each course
• view the most viewed/ most popular courses
• filter the courses based on a subject and/or rating and choose a course from the results and view (but not open) its details including course subtitles, excercises , total hours of each subtitle, total hours of the course and price (including % discount if applicable) according to the country selected
• search for a course based on course title or subject or instructor

back to top

Code Examples 🐱‍💻

Email sending

emailjs
    .send(
        "service_5di6lsf",
        "template_mo9m7xe",
        data,
        "hIXXOv4x76p3JXKWU"
        )
        .then(
            (result) =>
            message.success("An Email has been sent successfully!! ", 1),
            (error) => {
            message.error("Oops... " + error.response.data);
            console.log(JSON.stringify(error));
            }
        );

Layout

 <Layout className="layout">
      <MainHeader values={[isModalOpen, setIsModalOpen]} />
      <Layout
        style={{ minHeight: "90vh", backgroundColor: "white" }}
        theme="dark"
      >
        <Content
          style={{
            margin: "0 0px",
            padding: "5%",
            minHeight: "200vh",
          }}
        >
          {children}
        </Content>
      </Layout>
      <Footer style={{ padding: 0, textAlign: "center", margin: "0 0px" }}>
        <FooterWrapper />
      </Footer>
    </Layout>

Breadcrumb Example

   <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>
              <Link to="/">Home</Link>
            </Breadcrumb.Item>

            <Breadcrumb.Item>{pageName}</Breadcrumb.Item>
          </Breadcrumb>
          

Taking notes

  <Button
        type="link"
        style={{
          width: "200px",
        }}
        onClick={showModal}
      >
        Take Notes <EditOutlined />
      </Button>
      <Drawer
        title="Taking Note.."
        placement="left"
        width="25vw"
        onClose={handleCancel}
        open={isModalOpen}
        extra={
          <Space>
            <Button onClick={handleCancel}>Cancel</Button>
            <Button type="primary" onClick={downloadTxtFile}>
              save
            </Button>
          </Space>
        }
      >
        <Form style={{ width: "100%", height: "100%" }}>
          <Form.Item
            style={{
              height: "50vh",
            }}
          >
            <Input.TextArea id="input" placeholder="Type here........" />
          </Form.Item>
        </Form>
      </Drawer>

back to top

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

Add your Mongo database url at Mongo_URI=

Add your backend server Port at Backend_Port=

back to top

Run Locally Installation

Install the used libraries for the backEnd

  cd backend
  then
  npm install

Install the used libraries for the frontEnd

  cd frontend
  then
  npm install

To run the backEnd

  node backend/main.js

To run the frontEnd

  cd frontend/myapp 
  then
  npm start

How to use

You are welcome to be one of the four primary users of our website (Admin, instructor, trainee, and corporate trainee). You can make an account and login to the website as a trainee by using the sign up page to create an account, or if you are an instructor, the company will create an account for you on its own. After that, you will be able to utilise our features, log in, and change your password.

back to top

API Reference

Get all Reports

  GET /getAllReports

Get user information

  GET /getUser/:username/:userType

Parameter	Type	Description
username	string	Required. username of user to fetch
userType	string	Required. usertype of user to fetch

Get top courses

  GET /getTopCourses

Get user quizzes grades

  GET /getmygrade/:id/:usertype

Parameter	Type	Description
id	string	Required. the id of user to fetch
userType	string	Required. usertype of user to fetch

Get the result of a search

  GET /search/:key

Parameter	Type	Description
key	string	Required. key like title or subject to fetch

Get the prices of all the courses

  GET /coursePrice

Get the result of an instructor searches

  GET /searchmycourses/:user/:key

Parameter	Type	Description
user	string	Required. Instructor's username to fetch
key	string	Required. key like title or subject to fetch

Get individual or corporate trainee's courses

  GET /getMyCourses/:usertype/:username

Parameter	Type	Description
usertype	string	Required. trainee usertype
username	string	Required. trainee username

Get all the courses

  GET /viewCourses

Get the result of a search

  GET /getCourse/:id

Parameter	Type	Description
id	string	Required. course's id to fetch

Get instructor's courses

  GET /instViewCourses/:userId

Parameter	Type	Description
userId	string	Required. instructor's id to fetch

Get the filtered courses

  GET /filter/:filterType/:key

Parameter	Type	Description
filterType	string	Required. filter type like title or subject to fetch
key	string	Required. search info to fetch

Get instructor's rate and reviews

  GET /viewReviewAndRating/:username

Parameter	Type	Description
username	string	Required. instructor's username to fetch

Get corporate trainee's requests

  GET /getAllRequests

Get filtered courses based on price or rate

  GET /filterByPriceOrRate/:type/:min/:max

Parameter	Type	Description
type	string	Required. rate or price to fetch
min	number	Required. min rate or price to fetch
max	number	Required. max rate or price to fetch

Get filtered courses based on category

  GET /filterByCategory/:category

Parameter	Type	Description
category	string	Required. course category to fetch

Get all courses' catrgories

  GET /getCategory

Get individual trainee balance

  GET /getMyBalance/:username

Parameter	Type	Description
username	string	Required. individual trainee's username to fetch

Get course subtitles

  GET /getAllSubtitles/:id

Parameter	Type	Description
id	string	Required. course id to fetch

Get instructor's filtered courses based on price or rate

  GET /instructorfilterByPriceOrRate/:username/:type/:min/:max

Parameter	Type	Description
username	string	Required. instructor's username to fetch
type	string	Required. rate or price to fetch
min	number	Required. min rate or price to fetch
max	number	Required. max rate or price to fetch

Get instructor's filtered courses based on category

  GET /instructorFilterByCategory/:username/:category

Parameter	Type	Description
username	string	Required. instructor's username to fetch
category	string	Required. course category to fetch

Get instructor's filtered courses

  GET /instructorFilterCourses/:username/:filterType/:key

Parameter	Type	Description
username	string	Required. instructor's username to fetch
filterType	string	Required. filter type like title or subject to fetch
key	string	Required. search info to fetch

Get user's all data

  GET /login/:username

Parameter	Type	Description
username	string	Required. user's username to fetch

Get all refund requests

  GET /getAllRefundRequests

Get user's refund request for a certain course

  GET /getRefundRequestsByCourseIdUsername/:username/:courseId

Parameter	Type	Description
username	string	Required. user's username to fetch
courseId	string	Required. the course id the user wants to refund

Admin create corporate trainee

  POST /createCorporateTrainee

Body	Type	Description
admin	string	Required. admin's username
username	string	Required. corporate trainee username
password	string	Required. corporate trainee username

Admin create admin

  POST /createAdmin

Body	Type	Description
admin	string	Required. admin's username
username	string	Required. the new admin's username
password	string	Required. the new admin's password

create course

  POST /createCourse

Body	Type	Description
id	string	Required. instructor's id
title	string	Required. course title
subject	string	Required. course subject
totalHours	number	Required. course total hours
price	number	Required. course price
subtitles	string	Required. course subtitles can be multiple than one
exercises	string	Required. course exercises
summary	string	Required. course summary
discount	number	course discount
date	date	discount end date
image	string	image for a course
prerequisite	string	Required. course prerequisite
previewURL	string	Required. preview video url
category	string	Required. course category

Admin create instructor

  POST /createInstructor

Body	Type	Description
admin	string	Required. admin's username
username	string	Required. the instructor username
password	string	Required. the instructor password

create individual trainee

  POST /createIndividualTrainee

Body	Type	Description
username	string	Required. trainee username
password	string	Required. trainee password
firstname	string	Required. trainee first name
lastname	string	Required. trainee last name
age	string	Required. trainee age
gender	string	Required. trainee gender
email	string	Required. trainee email

create report

  POST /createReport

Body	Type	Description
username	string	Required. user's username
usertype	string	Required. user's password
description	string	Required. report description
reportType	string	Required. report type can be technical

create request to access a course

  POST /createIndividualTrainee

Body	Type	Description
username	string	Required. trainee username
password	string	Required. trainee password
firstname	string	Required. trainee first name
lastname	string	Required. trainee last name
age	string	Required. trainee age
gender	string	Required. trainee gender
email	string	Required. trainee email

back to top

Tests

• There are no tests yet, and they should be added as soon as possible. 

Contribute

There may be user experience problems on our website that can be handled; perhaps enhancing the website with more features that are satisfying can help it stand out more.

Feedback

If you have any feedback, please reach out to us at Our linkedin page or email us via gmail

back to top

Authors

• @Ali Ghieth
• @Abdelrahman Ali

Credits

• Stack Overflow was extremely useful in debugging.
• w3Schools, MDN and any technology documentation mentioned helped us understand and use more of its functionality.
• As this is a university project, there is a credit to the teaching assistant Nada and Noha who helped us with any question we had and provided clear ways to improve.

License

The project is licensed under the Apache License 2.0, see the license file for details