A headless hook-based exam proctoring system with React

What I built

I built a headless online exam proctoring system using React.

Features

1. Force full-screen mode
2. Warns when user switches tabs
3. Prevents user from opening the context menu (menu opened by pressing right-click from the mouse)
4. Prevents user from copying website content
5. Works well with custom proctoring logic (which you might want to implement separately)
6. Webcam detection (Coming Soon)

Category Submission

SaaS Superstars✨

App Link

Checkout the demo app here

Screenshots

Description

This is a headless proctoring library which only gives you some flags. What you do with that information is totally upto you. The UI for handling various use cases is completely in your hands. For more details, check out the project README.

Link to Source

ansh-saini / react-proctoring

Headless proctoring system for react

Overview

This is a headless library which only gives you some flags. What you do with that information is totally upto you. The UI for handling various use cases is completely in your hands.

Features

1. Force full-screen mode
2. Warns when user switches tabs
3. Prevents user from opening the context menu (menu opened by pressing right-click from the mouse)
4. Prevents user from copying website content
5. Works well with custom proctoring logic (which you might want to implement separately)
6. Webcam detection (Coming Soon)

Why should you use this?

There are lots of browser specific issues that show up when you are working with browser APIs. This package tries to cover most if not all of them. So you can focus on whats actually important for your business. All features are set up in a way that you can opt out of any feature that you do not wish to use.

Why do

…

View on GitHub

Background

I was looking for a ready-to-use proctoring system for an online exam. I found a few solutions but all of them were coupled very closely with the UI. I could not find a headless proctoring system. So, I decided to build my own. It is perfect for having full control over the UI while reaping all the benefits of a proctoring system.

How I built it

• I utilized Linode's web server to deploy the demo application to the web. I had never configured a web server before. I learnt how to do that from Linode's awesome documention.
• I'm thinking of adding a face detection feature to this library. I'm planning to host machine learning models on Linode then use it as an API in this library.
• I learned about various browser APIs. Like page visibility detection, requesting camera permissions, requesting full screen permission from the browser etc.
• I learned about ways of getting around cross-browser issues when it comes to native APIs.

Final thoughts

This was my first time using Linode. Things were very easy to setup. I followed this guide to understand how to deploy my application. I think Linode is a great platform and I'm definitely going to figure out how to utilize my free $100 credit in a better way 😁