Transparency in Real Time.
ROLE
Developer
TIMELINE
Fall 2023
FRONTEND
Next.js + React
Tailwind
BACKEND
Node.js + Express
MongoDB
Cornell AppDev's suite of products boasts a user base exceeding 15,000 individuals. However, the lack of a dedicated communication channel hindered our ability to keep users informed about service disruptions, bugs, and maintenance. Our reliance on Instagram for updates left a significant portion of our users in the dark. Recognizing the need for a more transparent and accessible solution, my team spearheaded the development of a real-time status platform to provide timely updates on the state of our services.
In this project, I collaborated with two other developers and a designer, taking on the role of full-stack developer. Within a 13-hour hackathon, we set out to create a comprehensive status platform that would bridge the communication gap between AppDev and its users.
Leveraging our existing technology stack, we built the backend using MongoDB as our database and Express.js with Node.js for the REST API. The database schema consisted of three core collections:
This collection stored essential details about each application, including its name, image, and any downtime intervals.
This collection housed user-submitted bug reports, capturing information like the reporter's email, the report description, and relevant timestamps.
This collection maintained a list of users who opted to receive email notifications regarding app status updates.
This well-structured backend enabled us to implement essential CRUD (Create, Read, Update, Delete) operations for the frontend, as well as an email notification system to keep subscribers informed.
On the frontend, we utilized Next.js with React and Tailwind CSS to craft a responsive web app that worked seamlessly across desktop, tablet, and mobile devices. We meticulously integrated the frontend with the backend API, ensuring a smooth and efficient flow of data. Once the platform was thoroughly tested, we deployed the backend to Digital Ocean servers and the frontend using Vercel. To streamline future updates and maintenance, we also implemented an automated deployment pipeline via GitHub Actions, leveraging Docker for containerization.
☝🏻 The home page of the status platform (left) and bug report form (right).
One of the most significant challenges we encountered was ensuring the accuracy of real-time status updates, particularly when displaying service downtime intervals. We needed to provide this information down to the millisecond while also accounting for timezone variations to ensure that users received accurate and relevant updates based on their location. Through careful consideration and testing, we were able to overcome these challenges and provide users with a reliable and precise view of our services' status.
☝🏻 Hovering over a time interval bar, each representing a precise temporal component.
The successful deployment of the status platform, coupled with a targeted marketing campaign on Instagram, resulted in an immediate and noticeable improvement in communication with our user base. We began receiving bug reports through the platform, allowing us to address issues proactively and keep users informed about our progress.
While the initial launch of the status platform was a success, we identified several areas for future enhancement. To further streamline the management of the platform, we plan to develop a dedicated admin page for AppDev members. This interface will provide a centralized hub for managing app status, reviewing bug reports, and managing subscribers, eliminating the need to rely on external tools like Postman.
Additionally, we aim to implement a notification system that will automatically alert the AppDev team whenever a new bug report is submitted. This will enable us to respond to user feedback more promptly and effectively, further enhancing our commitment to transparency and user satisfaction. This admin page will seamlessly integrate with the existing status platform, providing a comprehensive and user-friendly experience for both users and administrators.
☝🏻 Me (middle), Zach Seidner (left), and Archit Mehta (right) in the last hour of our 13-hour hack.
VinBot
Hi!
I’m VinBot. An AI assistant here to answer your questions about Vin Bui's portfolio.
How can I help you today?
Unleash our creativity and make something extraordinary happen. Send me a message and let's explore the possibilities.