LDM College

Frontend Developer

📅June 2022 – Mar 2023·📍On-site

I architected and built the initial frontend for the college's comprehensive management system, specifically designing disparate dashboards for faculty, administration, and library staff.

ReactPythonPlaywrightPandas
Manual data collection
10 min (automated)
Page load time
<3 seconds
Reporting turnaround
Real-time

What I Did Here

I architected and built the initial frontend for the college's comprehensive management system, specifically designing disparate dashboards for faculty, administration, and library staff. The core design philosophy was total frictionless adoption: because there was no training budget, the interfaces had to perfectly mirror the staff's existing mental models of their workflows. By replacing their weekly, manual spreadsheet aggregations with real-time, live data views, the staff transitioned from guessing about attendance and fee statuses to seeing actionable metrics instantly. A major operational bottleneck was the manual collection of academic data, which consumed two full days per semester; I engineered automated Python scrapers that reduced this entire process to a 10-minute automated job. The most critical technical achievement, however, was performance tuning the React application. Recognizing the college's low-spec hardware, I aggressively optimized the frontend bundle through code splitting, lazy loading, and debouncing, halving the page load times and ensuring the application felt snappy even on 10-year-old machines.

What I Was Accountable For

01

Architected and built role-specific, highly intuitive dashboards for faculty, admin, and library staff.

Because the UI perfectly mirrored their existing workflows, the entire staff adopted the new system daily with zero formal training required.

02

Eliminated the archaic system of weekly manual reporting.

Replaced emailed spreadsheets with real-time, dynamic data views, allowing staff to make immediate decisions based on actual, up-to-the-minute numbers.

03

The administration was losing two full days every semester manually transcribing data from external academic portals.

Engineered automated Playwright scrapers that executed this data collection flawlessly in under 10 minutes.

04

The college's aging hardware was choking on modern web applications.

Hyper-optimized the frontend architecture—utilizing aggressive lazy loading, API debouncing, and bundle tree-shaking—to cut page load times in half on severely constrained machines.

Key Wins

Architected and built role-specific, highly intuitive dashboards for faculty, admin, and library staff.

Because the UI perfectly mirrored their existing workflows, the entire staff adopted the new system daily with zero formal training required.

10 min (automated)
Eliminated the archaic system of weekly manual reporting.

Replaced emailed spreadsheets with real-time, dynamic data views, allowing staff to make immediate decisions based on actual, up-to-the-minute numbers.

<3 seconds
The administration was losing two full days every semester manually transcribing data from external academic portals.

Engineered automated Playwright scrapers that executed this data collection flawlessly in under 10 minutes.

Real-time

How It Was Built

01

Role-Specific Dashboard Design

The primary reason enterprise software requires massive training budgets is that it overwhelms the user with irrelevant options. To ensure the non-technical college staff could use the system immediately, I completely segregated the frontend architecture into strict, role-specific views. When a faculty member logs in, they only see attendance rosters and grading interfaces. When an admin logs in, they see fee collection funnels and enrollment metrics. The library staff see only inventory and dues. By rigorously stripping away any UI elements that were not explicitly required for a user's specific daily workflow, I eliminated the cognitive overhead. The interface perfectly matched how they already thought about their jobs. Consequently, not a single training document was written, and the staff adopted the system seamlessly.

02

Automated Data Collection — 2 Days → 10 Minutes

At the beginning of every semester, the admin staff spent two full, agonizing days manually logging into the state university's archaic portal, copying student enrollment data, and pasting it into local Excel sheets. This process was incredibly prone to human transcription errors. I completely eliminated this toil by engineering automated headless browsers using Python and Playwright. The scripts securely authenticate with the external portal, navigate the deeply nested DOM to locate the relevant data tables, extract the student records, and directly insert them into our new PostgreSQL database. A critical edge case was handling the portal's frequent session timeouts; I implemented robust retry logic and explicit error logging. This automation reduced a 16-hour manual nightmare into a reliable, 10-minute automated cron job.

03

Performance Optimization for Low-Spec Hardware

During initial testing, the React application took over 6 seconds to load on the college's older desktop machines, and typing into the search bar caused the browser to freeze. The monolithic JavaScript bundle was simply too heavy for their limited RAM. I aggressively re-architected the frontend for performance. I implemented React.lazy() and route-based code splitting, ensuring that the heavy charting libraries used in the admin dashboard were never downloaded by the faculty users. I implemented strict debouncing on all search inputs, ensuring that API calls and DOM re-renders only triggered after the user stopped typing, completely eliminating the UI freezing. Finally, I audited our dependencies and tree-shook the bundle, removing massive utility libraries in favor of native JavaScript functions. These optimizations successfully dropped the initial load time to under 3 seconds on the oldest hardware on campus.

What Changed

The frontend deployment was a massive success, achieving 100% daily adoption by the staff without a single hour of formal training required. The Playwright automation completely eradicated the administrative data entry bottleneck, reducing a 2-day manual process down to 10 minutes. Furthermore, the rigorous frontend performance tuning ensured that the application ran flawlessly and loaded twice as fast, even on the college's severely outdated hardware. The system completely modernized the operational visibility of the entire institution.

Manual data collection
2 days/semester
0
~30× faster

Administrative staff are consistently overworked. Giving them back two entire days at the start of the semester by automating the data collection meant they could actually focus on assisting students during the chaotic enrollment period rather than acting as data-entry machines.

Page load time
~6 seconds
0
2× faster

A 6-second page load time on every single click completely destroys user momentum and breeds deep resentment toward the software. Halving that load time made the application feel responsive and modern, which was critical for securing the initial buy-in from the skeptical staff.

Reporting turnaround
Weekly (manual)
0
Instant visibility

Moving from weekly, stale spreadsheets to real-time, interactive dashboards fundamentally changed how the administration operated. They went from reacting to historical data to proactively managing the campus based on exact, up-to-the-minute metrics.

"Staff went from guessing to seeing real numbers. Nobody asked for a training session — which means the design was right."