Edurizon is a one-stop fully functional hosted web application for smooth and extensive collaboration and engagement between teachers and students in this virtual era of learning and education. This prototype is built using agile methodologies as a part of the Microsoft Engage Mentorship Program 2021. From seamless video conferencing for classes and submitting assignments to a discussion’s forum and an interactive office hours meet, this application has some of the most essential features required to make teaching and learning a fun process remotely!
- Hosted Web Application
- 5 min Demo Video (Kindly consider this video instead of Microsoft Form Submission Video)
- Documentation
- UI
- Frontend Repo
- To run the web app, cd into the frontend directory then run -
yarn start- To run development server, first cd into the backend directory then run -
nodemon server- To run unit tests
npm run tests- Login for Student :-
- Institute ID - STUD01
- Password - saloniparekh
- Login for Teacher :-
- Institute ID - TEACH001
- Password - teacher
A. Courses
a) Course Page - Displays list of courses allotted to both students and teachers.
b) Course Details Page -
(i) Displays list of students in the course
(ii) Displays faculty details
(iii) Displays virtual class meeting link
(iv) Displays course-wise announcements i.e class schedule and class messages that are posted by the teacher.
(v) Teachers have an additional functionality to add and remove students to a particular course
B. Assignments
a) Student’s Assignments Page - Shows list of pending and submitted assignments for the students with relevant details like Assignment Title, Question Link, Due Date, attaching and submitting file option.
b) Teacher’s Assignments Page - Allows teachers to post assignments through forms and view the posted assignments for each course of theirs.
C. Grade Assignments
a) Teacher’s Grade Assignments Page - Allows teachers to view the student submission course-wise and allot/update marks to each of the students who have posted the assignment.
b) Student’s View Grades Page - Students can view the grades for all their courses here along with their submitted assignment document.
D. Student Forum
a) Students can search for relevant questions they are looking for(fuzzy search enabled) and their answers on this page.
b) They can post a question if they do not find any question that they were looking for. They can answer any question on this page, on an ongoing thread or create a thread of answers to a particular question.
c) This page is exclusively for the student community and their related discussions. Teachers do not have access to this page.
d) In order to maintain the decorum amongst students, I have enabled a sentiment-analysis feature while posting any question or answer. This will prevent any student from posting/writing inappropriate words or using foul language by showing a popup and restricting them to post.
E. Note Taking
a) Note taking comes in very handy, especially when you are in a teaching and learning environment. Therefore a note-taking feature has been added on every page of the website for quicker and easier access.
b) Notes have the auto-saving ability along with normal text formatting options of bold, italic and underline.
F. Office Hours - USP Feature
In the virtual mode of education, it often becomes very difficult for the students to reach out to their teachers for doubts and difficulties, as per their convenient timings. This increases complexities and hampers their learning, even self-esteem of students in some cases. Keeping this in mind, this feature has been built with the following functionality:
a) For Students View -
(i) Course Faculty Cabins are displayed on the layout with course names and the free office hours of the teachers.
(ii) The red light turns to green once the office hours become active.
(iii) The student user(circular element with initials) can easily move to the desired cabin during the active hours with the help of arrow keys of the keyboard.
(iv) Once the student is inside the cabin, a popup appears, enabling them to join the meeting, where the teacher will be available.
(v) The Student Breakout Room is a space where students can enjoy their break and chill with friends. Teachers do not have access to this breakout room.
b) For Teacher’s View -
(i) The Teacher needs to post office hours for each of their allotted courses through a form.
(ii) Once the office hours are posted, cabins appear displaying the office hours and joining meeting link. Green indicates that their office hours have started.
This feature will enable the students and teacher to connect efficiently as per schedule and decrease the inconvenience of not being able to reach out and ask for availability, hence saving a lot of time and effort.
G. Video Conference Meeting
A simple video conference meet call with very basic features:
a) Turn camera off and on
b) Turn microphone off and on
c) Screen share
d) Exit the meeting
e) View Participants List
- Technical Stack Used: HTML, CSS, JavaScript
- Framework Used: Bootstrap
- Parcel.js for packaging code to yield better performance
- Editor used: VS Code
- The Project can be run by opening the the index.html file leading to the home page.
- Technical Stack Used: NodeJS, MongoDB, ExpressJS, JWT
- Postman for testing APIs
- Editor Used: VS Code
Link to backend repo: https://github.com/saloni0104/Engage-Edurizon-BE
- Database : Atlas MongoDB
- The Project is hosted on Netlify and is live at http://edurizon.netlify.app/
- Backend Server is deployed using Heroku
- Chai
- Mocha
- Cloudinary
The software was developed using scrum framework in agile methodology.
This was done to ensure that the main focus was on the software product. The exact list of features were not exactly known since the start and hence it was very necessary that the whole process was able to accommodate change easily.
The project was released in 3 sprints, and each sprint was further divided into 3 phases-
- Planning and prototyping: The UI prototype was first designed on Figma for each sprint and then the front-end was coded out on the web application.
- Implementation: The Database structure and model was constructed as per requirements along the sprints and back-end APIs were written and integrated with the front-end.
- Testing and review: After each sprint, a test-suite was written for the APIs and both manual and automated tests were run to check for bugs, and resolved as a whole.
Last two days were taken for regression testing after completing the three sprints and the whole application was tested all-together. Minor improvements of UI were also made, along with documentation and video making.
The back-end of the web application has been deployed on Heroku. The CI/CD pipeline has been followed for deployment wherein, a successful push made to the master branch of the github repository, runs a github action. A series of unit tests are then run after. Only after the passing of these tests successfully, the latest code is deployed positively on Heroku. This approach has been adopted to ensure better development practices which involve continuous and quick delivery of the right code and new features into production along with regular constrained checks of bugs and fixing them simultaneously.
Automated Testing for the project was done by using Chai and Mocha. Chai is a TDD assertion library for Node.js and the browser. Mocha is a test framework of Javascript that runs on Node.js. Both of these paired up turn out to be quite effective in terms of test driven development methods. A total of 28 routes were tested against 55 test cases.
 Saloni Parekh |
Made with ❤️ by Saloni Parekh