Offer to come, dig friends take it! I am participating in the 2022 Spring Recruitment series of activities – Experience review, click to view the details of the activities.

Project introduction

This is a back-end separation project: an online programming written test platform. It is divided into two parts according to the user role, namely, the interviewer side and the candidate side. The main function is that the candidate completes the code writing online, and the interviewer can view the programming result.

Disassemble project tasks

  1. Login/registration module
  • Support email login and registration
  • The Logout and Login function is supported
  1. Interview question module
  • The interviewer can fill in the interview questions
  • Each interview question has a fixed link
  • Support to create and modify interview questions
  • Support inviting a candidate to program
  • Interview questions support rich text format
  1. Online programming module
  • Candidates can write code online
  • Code supports multiple language highlighting 111
  • Candidate side submits final programming code 111
  • Refresh the interviewer side to see the final code 111
  1. The online programming module supports automatic refresh
  • The candidate side code supports automatic saving
  • The code on the interviewer side is refreshed automatically
  1. Real-time text chat module
  • Candidates and interviewers can chat by text in real time
  • Anyone else who gets a connection can participate in the text chat
  1. Online voice chat module
  • Candidates and interviewers can chat by voice in real time
  1. The online programming module supports running JS code
  • Candidates and interviewers can run the JS code online and view the output
  1. Online programming module supports co-editing
  • Candidates and interviewers can co-program in real time
  1. Video chat module
  • Candidates and interviewers can live video chat

Technology stack

React + TypeScript front end, Node.js + MySQL + Koa back end

Project implementation

  • In order to realize the login/registration module, cookies are used to verify user information, localStorage is used to save the login state, NodeMailer sends the verification code to the user’s mailbox, and the login or registration button is used to set anti-shaking, realizing the functions of login, registration, forgetting the password and no login within 15 days.
  • In order to create the exam module, Ant Design is used to complete the UI Design, wangEditor supports the interviewer to edit the interview questions, calls the back-end interface when modifying information to get data for initialization, and NodeMailer sends emails informing candidates of the exam information. So that the interview officer can carry on the examination paper and the examination questions to add and delete check and change, as well as email notification of examination information.
  • In order to realize the online programming module, the react-Monaco-Editor is used to support candidates to edit the code and submit it. The Filter API is used to complete multiple screening of test questions, realizing the programming function.
  • In order to realize the real-time text chat module, WebSocket is used to monitor the chat information between the client and the server, and the back end responds to the front end after receiving the processing, so that candidates and interviewers can carry out real-time text communication.
  • To quickly complete project deployment, the front end uses SCP to connect to the server and upload files to the specified directory under the server nginx. The back-end uses FS to read and write local files, node-SSH to connect to the server and upload the specified files to the specified directory under Tomcat, run the locally written deploy.sh script to start the back-end service, and use PM2 real-time monitoring to realize automatic project deployment.

Scalable point

  • Performance optimization.
  • Users can provide answers to questions and support comments.
  • Achieve language internationalization, support a variety of language switching.
  • Perfect security measures can prevent XSS, CSRF and other network attacks.
  • Graphical user data, intuitive display of users to do questions, pass rate and other information.
  • Realize video and voice chat module, support real-time video call and voice chat.

Project highlights (only the first point has been achieved so far)

  1. Automated deployment
  2. Support for running JS code
  3. Resolving editing conflicts
  4. Supports text, voice, and video chat
  5. Performance optimization
  6. Support internationalization
  7. Adaptive mobile terminal

Projects show

PC

  1. Login/Registration

The interviewer side

  1. Test question management

3. Marking management

4. Interview room management

5. Entrance to the interview room

The candidate side

The project address

GitHub front-end repository address: github.com/HCYETY/reac…

GitHub backend repository address: github.com/HCYETY/node…

Project demo address: www.syandeg.com

Write in the back

This project is the first internship project of the author, the author completed both the front and back end independently, spent a lot of time and energy, readers feel good if you can give a star support, thank you ~ ^_^

The author intends to continue to improve and maintain this project and make it bigger. If readers are interested in this project, want to participate in the implementation of a certain function, or have any good ideas, you can also leave a message in the comment section or issue on Github, I will reply in time if I see it. Thank you for your support!

In addition, for this project, the follow-up will be relevant articles to introduce the specific implementation process, you can also pay attention to it!

Online programming written test platform

  • The front and rear end separated projects are deployed online