Nwachukwu Ujubuonu

SPPG Dashboard

A web-based dashboard that shows students status through out the academic program. (Full-Stack)

Nextjs

Tailwind

React

Firebase

TypeScript

Airtable API

Apps Script

Google Sheets

The School of Politics, Policy, and Governance (SPPG), an institution training new political leaders, required a website that granted students access to their data. I built a platform that pulled information from their database, empowering students and administrators with key insights.

The database was Airtable, which had a lot of integrations and built-in automations. However, the team preferred to stay with Airtable rather than migrate to a more robust database. Additionally, the Airtable API limited requests to just five per second. Another challenge was that direct authentication to the table was not possible. Lastly, students checked their status at roughly the same time twice a day, creating a surge in requests.

Using Nextjs, I developed the front-end of the application. I made some improvements to the pre-existing UI designs making the app more user friendly.
My initial solution to the Airtable rate limit was to add a simple Google Sheets layer to store Airtable data and use Apps Script to create API endpoints for the frontend. This approach worked during the demo stage, but after three months of deployment, over 50% of users could not see their data.
To improve reliability, I used Apps Script as a cron job to fetch data from Airtable and update Firebase every hour. However, the architecture built around Google Sheets didn't translate well to Firebase—I kept hitting the 50,000 daily read quota. I redesigned the way the data was stored for a faster look up time.
For authentication, I implemented an OTP system. Users enter their matriculation number, triggering an email containing a one-time password to the associated email address.

After making architectural improvements, I reduced the reads to fewer than 2,000 per day, ensuring a more stable solution. [See Last slide]