SDProctor

A Exam proctoring website bootstrapped with Create React App.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources

Overview

The challenge

Users should be able to:

• Create an account and face capture
• Login and face validation
• Take exams
• Be monitored via camera when taking the exams (proctoring)
• Ensure that no one is impersonating
• Navigate to the cart page

Screenshot

Links

• Solution URL: (https://github.com/faozziyyah/sdproctor)
• Live Site URL: (coming up soon)

My process

Built with

• CSS
• React - React: JS library
• React-webcam - React Library
• React-paginate - React Library for pagination
• Ant-design

What I learned

• React Authentication and Authorization
• Consuming backend and ML APIs

useEffect(() => {
    const setupCamera = async () => {
      const video = videoRef.current;

      try {
        const stream = await navigator.mediaDevices.getUserMedia({ video: true });
        video.srcObject = stream;
      } catch (error) {
        console.error('Error accessing camera:', error);
      }
    };

    setupCamera();
  }, []);

  const offset = currentPage * n;
  const paginatedData = questions.slice(offset, offset + n);

  const navigate = useNavigate()

  function logout () {
    localStorage.clear()
    navigate('/')
  }

Useful resources

In the project directory, you can run:

npm install

then...

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.