Skip to content

A complete Online Learning System for the CSEN704 Course (Advanced Programming Lab) in GUC (German University in Cairo). An OnlineLearning System is a web application through which individuals can attend pre-recorded courses online. Existing web applications include but are not limited to Coursera, Udemy, LinkedIn Learning.

License

Notifications You must be signed in to change notification settings

Advanced-Computer-Lab-2022/Hungry-for-Grades

Repository files navigation

Nodejs javascript Express HTML CSS Json Bootstrap MongoDB Git Analytics GitHub Markdown


Welcome to CanCham

Logo

CanCham Academy

An Educational Website !
·Team Requirements·Published API Documentation ·API WorkSpace·Report Bug · Be a Contributer

A complete Online Learning System for the CSEN704 Course (Advanced Programming Lab) in GUC (German University in Cairo). An OnlineLearning System is a web application through which individuals can attend pre-recorded courses online. Existing web applications include but are not limited to Coursera, Udemy, LinkedIn Learning, Great Learning and Udacity.

Table of Contents

(back to top)

Motivation

The project was created as a part for the CSEN704 Course (Advanced Programming Lab) in GUC (German University in Cairo). The goals is to learn fullstack web application development using MERN Stack (MongoDB, express, React, Node.js)

(back to top)

How To Use the System

(back to top)

Objectives

  • Learn how to properly use the Agile Methodology to plan out a project and develop the software.
  • Learn the process of following a given set of System Requirements to develop a software.
  • Learn to research and master the use of the MERN Stack.
  • Learn how to work together as a team on GitHub.
  • Work under Project Manager and do feedback sessions to make more imporvments .
  • Work with real company Cancham that provided us with Requiremenets .

(back to top)

Code Styles

  • Eslint : in the backend and the frontend to write the most optimum clean code possible and to define rules for the team to be able to write code in the same code style
  • Prettier : it is a code formatter that runs automatically before each commit on the whole code so that the codes looks well formatted across the whole project
  • Husky: They are used to verify everything is as expected before or after executing a git command or action to make sure is error-free before commiting so dont distrubt the rest of the team and to run prettier to format and eslint checks.
  • Github actions with eslint : runs before each pull request to test if the code is matching Eslint Rules
  • .editorconfig: This file specifies our coding practices and ensures they are maintained throughout the entire project.

(back to top)

Tools and Frameworks

This project is fully implemented using the MERN Stack and docker. MERN stands for MongoDB, Express, React, Node, after the four key technologies that make up the stack.

  • MongoDB is an open source NoSQL database management program. NoSQL is used as an alternative to traditional relational databases. NoSQL databases are quite useful for working with large sets of distributed data. MongoDB is a tool that can manage document-oriented information, store or retrieve information.
  • Express is a Node. js web application server framework, designed for building single-page, multi-page, and hybrid web applications. It is the de facto standard server framework for node.
  • ReactJS is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It's used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components. NodeJS is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser.
  • Docker is a platform designed to help developers build, share, and run modern applications. We handle the tedious setup, so you can focus on the code.

(back to top)

How does the MERN stack work?

  • The MERN architecture allows you to easily construct a 3-tier architecture (frontend, backend, database) entirely using JavaScript and JSON.

  • React.js Front End

The top tier of the MERN stack is React.js, the declarative JavaScript framework for creating dynamic client-side applications in HTML. React lets you build up complex interfaces through simple Components, connect them to data on your backend server, and render them as HTML.

React’s strong suit is handling stateful, data-driven interfaces with minimal code and minimal pain, and it has all the bells and whistles you’d expect from a modern web framework: great support for forms, error handling, events, lists, and more.

  • Express.js and Node.js Server Tier

The next level down is the Express.js server-side framework, running inside a Node.js server. Express.js bills itself as a “fast, unopinionated, minimalist web framework for Node.js,” and that is indeed exactly what it is. Express.js has powerful models for URL routing (matching an incoming URL with a server function), and handling HTTP requests and responses.

By making XML HTTP Requests (XHRs) or GETs or POSTs from your React.js front-end, you can connect to Express.js functions that power your application. Those functions in turn use MongoDB’s Node.js drivers, either via callbacks for using Promises, to access and update data in your MongoDB database.

  • MongoDB Database Tier

If your application stores any data (user profiles, content, comments, uploads, events, etc.), then you’re going to want a database that’s just as easy to work with as React, Express, and Node.

That’s where MongoDB comes in: JSON documents created in your React.js front end can be sent to the Express.js server, where they can be processed and (assuming they’re valid) stored directly in MongoDB for later retrieval. Again, if you’re building in the cloud, you’ll want to look at Atlas. If you’re looking to set up your own MERN stack, read on!

(back to top)

Installation

  • clone the project git clone https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades
  • make sure you have latest version of Node.js installed on your machine
  • run nvm use make sure you have Node Version Manager

Run Locally

You can use either use Makefile or yarn to install dependencies and run the whole project

Using Makefile

1 - make sure tfhat you have MakeFile installed on your machine

2 - run make installall to install dependencies

3 - run make run to run the project (Server and Client Concurrently)

Using yarn

1 - make sure that you have yarn npm i -g yarn installed on your machine

2 - run yarn run install to install dependencies

3 - run yarn dev to run the project (Server and Client Concurrently)

Start the frontend alone

  • Change to the client directory and run yarn to install packages then yarn dev.
cd Hungry-for-Grades/client
yarn
yarn run dev

Start the backend

  • Change to the server directory and run yarn to install packages then yarn dev.
cd Hungry-for-Grades/server
yarn
yarn run dev

(back to top)

API Documentation

  • Check out our API Documentation on Postman by clicking here
  • Check out our API Workspace on Postman by clicking here




Postman Testing

Delete Review Route Testing Sign up User Form Getting Instructor Reviews Route Testing Sign up User Form Getting Instructor Courses Route Testing Sign up User Form Get Instructor Data Route Testing Sign up User Form

More Tests can be Found in the Postman Documentation.

Build Status

  • The project is currently in development.
  • The project needs in the near future to be deployed through AWS Services or alike.
  • The End-to-End tests needs improvments and add more.
  • The Current Build Of the project contains no bugs or malfunctions we corrected the small tweaks in sprint3 evaluation and feedback (Reviews, progress, discounts), other than that all good and the system have many other additional advanced features .

Features

The system serves different roles of users :

  • Admin
  • Instructor
  • Individual Trainee,
  • Corporate Trainee

As an Admin I could

  • See User insights
  • See Top Instructors analytics using a wide range of graphs.
  • See Top Courses analytics by using a wide range of graphs.
  • Send Emails to specific users.
  • Send Newsletter to all subscribed users.
  • Browse, search and filter all the courses published on the website.
  • Add admins, instructors and corporate trainees to the system
  • View Reported problems and resolve them.
  • View access requests from Corporate Trainees and grant access.
  • View Refund Requests from Individual Trainees and their progress and approve or disapprove accordingly.

As an Instructor I could

  • Browse, search and filter all the courses published on the website.
  • Create courses
  • Share my courses via a QR code or on social media.
  • View course analytics using a variety of graphs.
  • Add discounts on my courses for a specific period.
  • Edit my profile.
  • Report an issue.

As an Individual Trainee I could

  • Browse, search and filter all the courses published on the website.
  • Sign up to newsletter
  • Add Courses to Cart
  • Add Courses to wishlist
  • Add, edit, delete and download my notes.
  • Draw and save in boards
  • Pay for a course using wallet or with card using stripe
  • Watch a video and solve exercises in my courses
  • See my progress relative to the course
  • Recieve a certificate by mail, download, and share once course is finished.
  • Request a refund.
  • Rate a course and its instructor.
  • Edit my profile.
  • Report an issue.

As a Corporate Trainee I could

  • Browse, search and filter all the courses published on the website.
  • Sign up to newsletter.
  • Send access requests for specific courses to admins.
  • Add, edit, delete and download my notes.
  • Watch a video and solve exercises from my courses
  • See my progress relative to the course
  • Recieve a certificate by mail, download, and share once course is finished.
  • Rate a course and its instructor.
  • Edit my profile.
  • Report an issue.

As a Guest I could

  • Sign up as an individual trainee.
  • Sign up to newsletter.
  • Browse, search and filter all the courses published on the website.
  • Report an issue

License

  • The software is open source under the Apache 2.0 License.

  • The Stripe is licensed under the Apache License 2.0

Credits

Contributing

Feedback

About

A complete Online Learning System for the CSEN704 Course (Advanced Programming Lab) in GUC (German University in Cairo). An OnlineLearning System is a web application through which individuals can attend pre-recorded courses online. Existing web applications include but are not limited to Coursera, Udemy, LinkedIn Learning.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Sponsor this project

Packages

No packages published