Developing just-LINK: A WebRTC-Based Educational Video Conferencing Software

Developing just-LINK: A WebRTC-Based Educational Video Conferencing Software

Photo by Gabriel Benois / Unsplash

As a software engineer, I had the opportunity to work on the development of just-LINK, a WebRTC-based educational video conferencing software. The project was a collaboration between our PLASS lab team and Unique UX Co., Ltd., with the aim of developing a system that would seamlessly integrate with their learning management system, enabling educators to deliver an interactive and engaging learning experience to their students remotely.

Role and Contributions

My role as a software engineer involved developing 40% of the frontend React web application and 20% of the backend Node.js and MySQL development. I used various tools and technologies such as TypeScript, JavaScript, ES6, Node.js, ExpressJS, MySQL, Redis, Nginx, CloudFlare, Webpack, Babel, Sass, CSS3, HTML5, React, Redux, Redux-Thunk, Redux Persist Utilities, reselect, Socket.IO, WebRTC, Lodash, Moment.js, Axios, Passport, Postman, Git, GitHub, Vim, Visual Studio Code, WebStorm, Xcode, npm, Yarn, nodemon, pm2, and TURN server to accomplish my responsibilities.

Features Implemented

The following are some of the features that I implemented in just-LINK:

Server Management:

  • Configured Nginx configuration files to ensure seamless server operation.
  • Installed and established a TURN server for reliable and secure communication.

General:

  • Developed efficient and concise code for various HTTP requests utilizing Axios.
  • Implemented multiple REST API endpoints using Express.js.
  • Utilized multiple socket.io to incorporate multiple websocket emitters and listeners for real-time communication.
  • Designed and modified database tables to store data using node-mysql2, thereby achieving efficient data management.
  • Created state management instances using Redux and related tools such as Redux-Thunk.

Meeting Room Component Development:

  • Integrated React-Toastify to facilitate in-app notifications of user entry/exit for an enhanced user experience.
  • Developed a feature to enable instructors to approve/deny student entry to the meeting room for better control.
  • Constructed a dropdown menu within the video component to ensure easy access to settings.
  • Implemented a feature to enable users to update their displayed names within the meeting room.

Landing Page Component Development:

  • Designed the user interface for the landing page component based on the provided Zeplin design to create a cohesive and attractive UI.
  • Developed a sound meter component to visually represent microphone sound levels on the landing page for a better user experience.
  • Created a camera and microphone selector component to manage audio/visual input options on the landing page for improved functionality.
  • Designed a setting to allow instructors to preset student camera and microphone settings in the meeting room settings page for better customization.

User List Component Development:

  • Developed the user interface design for the user list component based on the provided Zeplin design.
  • Incorporated a sliding transition effect when switching between user list views with React Transition Group to create a smooth user experience.
  • Differentiated user avatars based on host permissions to provide a clear indication of host status.
  • Designed the user list to pin the current user and added functionality for other users to pin the list for better organization.

Chat Component Development:

  • Implemented the user interface design for the chat component based on the provided Zeplin design.
  • Designed a feature to cancel downloads to enhance usability.
  • Incorporated direct/private messaging functionality for better communication.
  • Integrated a feature to download files from a chat window for a better user experience.
  • Improved the user interface of image and file transfers for better visual display.

Collaboration and Communication

Working on just-LINK provided me with the opportunity to collaborate with multicultural teams, as our team members came from 4 different countries. Effective communication and feedback were crucial for the project's success. We learned how to communicate effectively, provide feedback regularly, and work toward a common goal. Through this experience, I developed my communication skills and learned how to work in a team effectively.

Agile Software Development

Just-LINK was developed using an agile software development approach, allowing us to deliver the software in increments and continuously refine the features based on user feedback. Working with an agile team taught me how to prioritize tasks, break them down into smaller, more manageable components, and adapt to changes quickly.

Conclusion

In conclusion, developing just-LINK was an incredible learning experience that allowed me to gain valuable experience in software development, collaboration, communication, and agile software development. The skills I have acquired during this project will be beneficial in my future endeavors. I am proud to have been part of the team that developed just-LINK, a system that empowers educators to deliver an interactive and engaging learning experience to their students remotely.

Ethan Yu

Ethan Yu

A software engineer with expertise in TypeScript, React, Node.js, Python, C++, MATLAB, etc. I share my tech experiences on my blog, with a focus on Linux, macOS, and Docker.