.commitlintrc.json (68, 2023-01-06)
.husky/ (0, 2023-01-06)
.husky/commit-msg (78, 2023-01-06)
.husky/pre-commit (182, 2023-01-06)
.husky/prepare-commit-msg (63, 2023-01-06)
.lintstagedrc.json (56, 2023-01-06)
.npmrc (28, 2023-01-06)
.nvmrc (8, 2023-01-06)
.vscode/ (0, 2023-01-06)
.vscode/extensions.json (255, 2023-01-06)
LICENSE (11558, 2023-01-06)
Makefile (769, 2023-01-06)
client/ (0, 2023-01-06)
client/.dockerignore (68, 2023-01-06)
client/.editorconfig (152, 2023-01-06)
client/.eslintignore (147, 2023-01-06)
client/.eslintrc.json (8948, 2023-01-06)
client/.prettierrc (350, 2023-01-06)
client/.storybook/ (0, 2023-01-06)
client/.storybook/main.cjs (971, 2023-01-06)
... ...
[](https://nodejs.org/en/)
[](https://www.javascript.com)
[](https://GitHub.com/Naereen/badges/)
[](https://html.com/html5/)
[](https://en.wikipedia.org/wiki/CSS)
[](https://www.json.org/json-en.html)
[](https://getbootstrap.com/)
[](https://www.mongodb.com/)
[](https://github.com/omar-sherif9992)
[](https://analytics.google.com/analytics/web/provision/#/provision)
Welcome to CanCham
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
- [Frontend](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/client/Readme.md)
- [installation](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/client/Readme.md#installation)
- [process](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/client/Readme.md#process)
- [Color Reference](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/client/Readme.md#color-reference)
- [Tools and Frameworks](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/client/Readme.md#tools-and-frameworks)
- [Development Tools and Libraries](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/client/Readme.md#development-tools-and-libraries)
- [Environment Variables](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/client/Readme.md#environment-variables)
- [Folder Structure](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/client/Readme.md#folder-structure)
- [Screenshots](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/client/Readme.md#screenshots)
- [Help](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/client/Readme.md#help)
- [Backend](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/server/README.md)
- [Installation](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/server/README.md#installation)
- [Database Models](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/server/README.md#database-models)
- [Ideas for Scalability](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/server/README.md#ideas-for-scalability) - [Scaling](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/server/README.md#scaling)
- [Scaling Scheme](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/server/README.md#scaling-scheme)
- [Balancing](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/server/README.md#balancing)
- [Caching](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/server/README.md#caching)
- [Data Partitioning](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/server/README.md#data-partitioning) - [CAP](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/server/README.md#cap)
- [Environment Variables](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/server/README.md#environment-variables)
- [Screenshots](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/server/README.md#screenshots)
- [Folder Structure](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/server/README.md#folder-structure)
- [Code Samples](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/server/README.md#Code-Samples)
- [End to End Testing](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/tree/development/end-to-end%20testing/Readme.md)
- [Motivation](#motivation)
- [How To Use the System](#how-to-use-the-system)
- [Objectives](#objectives)
- [Code Styles](#code-styles)
- [Tools and Frameworks](#tools-and-frameworks)
- [Postman Testing](#postman-testing)
- [Build Status](#build-status)
- [Features](#features)
- [Installation](#installation)
- [Authors](#authors)
- [License](#license)
- [Credits](#credits)
- [Contributing](#contributing)
- [Feedback](#feedback)
(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](https://www.mongodb.com/), [express](https://expressjs.com/), [React](https://reactjs.org/), [Node.js](https://nodejs.org/en/))
(back to top)
## How To Use the System
- As a Contributer : https://youtu.be/mnZLnAFufjI
- As an Admin : https://youtu.be/1tdg1lanSSA
- As a Trainee : https://youtu.be/bSulL488dFc
- As a Instructor : https://youtu.be/YFIs-zrOzlE
- As a Corporate Trainee : https://youtu.be/e0eYnUe2plg
- As a Guest : https://youtu.be/u5LHIeMTTkI
(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](https://cancham.org.eg/) that provided us with Requiremenets .
(back to top)
## Code Styles
- [Eslint](https://eslint.org/docs/latest/user-guide/getting-started) : 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](https://prettier.io/) : 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](https://dev.to/murtuzaalisurti/creating-git-hooks-using-husky-5fbk): 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](https://github.com/features/actions) : runs before each pull request to test if the code is matching Eslint Rules
- [.editorconfig](https://editorconfig.org/): 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](https://nodejs.org/en/) 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](https://stackoverflow.com/questions/32127524/how-to-install-and-use-make-in-windows) 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.
```bash
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.
```bash
cd Hungry-for-Grades/server
yarn
yarn run dev
```
(back to top)
## API Documentation
- Check out our API Documentation on Postman by clicking [here](https://documenter.getpostman.com/view/17286684/2s8Z6zzC3R)
- Check out our API Workspace on Postman by clicking [here](https://www.postman.com/crimson-escape-923343/workspace/acl-team-workspace/collection/17286684-0dc5a3aa-0a42-4d4a-9e2b-cca9f820817a?action=share&creator=24014344)
## Postman Testing
Delete Review Route Testing
Getting Instructor Reviews Route Testing
Getting Instructor Courses Route Testing
Get Instructor Data Route Testing
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
## [Authors](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/graphs/contributors)
- [Omar Sherif Ali](https://www.github.com/omar-sherif9992)
- [Omar Sherif Elmeteny](https://github.com/omar-elmeteny)
- [Ahmed Wahba](https://github.com/AWahba1)
- [Hussein Yasser](https://github.com/HusseinYasser)
- [Mohamed Shams](https://github.com/Abo4ams)
## License
- The software is open source under the [Apache 2.0](https://github.com/Advanced-Computer-Lab-2022/Hungry-for-Grades/blob/development/LICENSE) License.
- The Stripe is licensed under the Apache License 2.0
## Credits
- [Clean code](https://www.amazon.com/Clean-Code-Handbook-Software-Craftsmanship/dp/0132350882)
- [Systen Design](https://www.youtube.com/watch?v=MbjObHmDbZo)
- [Mongoose with typescript docs](https://mongoosejs.com/docs/typescript.html)
- [Express docs](https://expressjs.com/)
- [Typescript](https://www.typescriptlang.org/)
- [ReactJs docs](https://reactjs.org/)
- [NodeJs docs](https://nodejs.org/en/)
- [Stripe docs](https://stripe.c ... ...
