Skip to content
hudamnhd.dev

School Social Media Platform

I contributed to stabilizing and improving a school social media platform used by students and staff, focusing on performance, data reliability, and maintainability.

UI Inconsistency (Legacy Handoff Issue)

Section titled “UI Inconsistency (Legacy Handoff Issue)”

Problem

Section titled “Problem”

The project was inherited from a previous developer, resulting in inconsistent UI patterns, component duplication, and styling mismatches.

Solution

Section titled “Solution”
  • Refactored layout structure for consistency
  • Standardized reusable UI components
  • Reduced duplicated styling logic
  • Improved overall visual coherence

Impact

Section titled “Impact”
  • Cleaner codebase
  • Easier feature expansion
  • Improved user experience consistency

Slow Performance on Large Data Sets

Section titled “Slow Performance on Large Data Sets”

Problem

Section titled “Problem”

Feeds and chat lists contained large datasets, causing noticeable lag and rendering delays.

Solution

Section titled “Solution”

Implemented React Virtualization to render only visible items in the viewport.

Impact

Section titled “Impact”
  • Significant performance improvement on home feed
  • Smooth scrolling in chat messages
  • Reduced DOM rendering cost

This was one of the most impactful optimizations in the project.

Chat Did Not Display Latest Messages (PubNub Limitation)

Section titled “Chat Did Not Display Latest Messages (PubNub Limitation)”

Problem

Section titled “Problem”

The chat feature failed to consistently display the latest messages because PubNub limits the number of channels fetched per request (max 100).

In real usage:

  • Users could have ~400 channels
  • PubNub only allows fetching 100 per request

Solution

Section titled “Solution”
  • Implemented batched fetching (looping per 100 channels)
  • Merged responses
  • Applied client-side sorting to ensure correct chronological order

Impact

Section titled “Impact”
  • Reliable latest message display
  • Accurate chat preview list
  • Eliminated inconsistent message ordering

This required understanding third-party API constraints and designing a scalable workaround.

Attendance Report Data Was Hard to Interpret

Section titled “Attendance Report Data Was Hard to Interpret”

Problem

Section titled “Problem”

Raw attendance dataset was poorly structured and difficult to summarize meaningfully.

Solution

Section titled “Solution”
  • Built filtering utilities
  • Aggregated and combined dataset logic
  • Created readable summary structures

Impact

Section titled “Impact”
  • Reports became easier to understand
  • Improved decision-making for school staff
  • Reduced manual interpretation effort

State Management Complexity → Migrated to Remix

Section titled “State Management Complexity → Migrated to Remix”

Problem

Section titled “Problem”

The project originally used React with additional state management complexity, making server/client state handling confusing and difficult to maintain.

Solution

Section titled “Solution”

Migrated to Remix, leveraging:

  • Built-in data loading
  • Native server actions
  • Cookies for server-side state handling
  • Reduced dependency on external state libraries

Impact

Section titled “Impact”
  • Simpler mental model
  • Reduced state-related bugs
  • Cleaner architecture
  • Faster feature development

Tech Stack

Section titled “Tech Stack”
  • Remix (React Framework)
  • Tailwind CSS
  • Prisma with Sqlite for caching
  • Backend API integration