Zoom Meetings Portal

Updated on 24th April 2024

A simple meeting portal built with Next.js and Express.js.

Introduction

Meeting Portal Home Page

This portal syncs with my Zoom account and automatically updates whenever I create, start, stop, or delete a meeting. When a meeting is created, I as the host can assign it a shortened public URL. This shows the live status including the real-time participant count of the meeting, and anyone can join the meeting by clicking the join button.

Meeting Portal Join Meeting

Moreover, frequent users can also create an account and view all of their meetings assigned to them on the dashboard, and as an administrator, I can assign and unassign meetings to users. This dashboard also shows the live status of the meetings including the real-time participant count of the currently live meeting.

Meeting Portal User Dashboard

You can see a demo of the project in the below video.

Methodology

This project was built with Next.js and Express.js. The frontend is built with Next.js and the backend is built with Express.js. Both the web application and the REST API were hosted on a VPS. The database used is MySQL.

I have created a WebHook in Zoom that sends a POST request to the REST API whenever a meeting is created, started, stopped, or deleted. The REST API then updates the database accordingly. The frontend then fetches the data from the REST API and displays it to the user. For authentication, I have used JWT tokens. The frontend and the backend are hosted on the same server, so CORS was not an issue.

For SSL, I used Cloudflare to proxy all the requests to the server. Cloudflare provides a free SSL certificate, so I didn't have to worry about that.

Initially, this project was built with HTML, CSS, JavaScript and PHP. Then I learned Node.js and Express.js so I decided to rebuild the project. Ultimately, I also decided to use Next.js for the frontend because it is a very powerful framework and it is very easy to use.

Final Thoughts

I believe that I was able to learn a lot about web development in common and helped me understand important concepts like Webhooks, REST APIs etc. Moreover, as this project originally was built with simple HTML and PHP, I was able to learn a lot about how to build a web application from scratch. Progressing through different versions, from a monolithic PHP application to a modern web application with a totally separated frontend and backend, I was able to learn how modern web applications work.