Back to projects

April 2025 · Frontend developer

RIML Lab Website

The site for Sharif's Robust and Interpretable Machine Learning Lab, built with Next.js and Django with infinite-scroll data loading and skeleton states.

Next.jsDjangoPostgreSQLTanStack QueryTailwind CSSDocker

Overview

The Robust and Interpretable Machine Learning Lab at Sharif needed a public site for its research output, people, and publications. I built the frontend under the supervision of Dr. Mohammad Hossein Rohban, with Next.js against a Django backend.

Loading a growing publication list

A research lab's publication list only grows, and it is the page visitors actually come for. Loading all of it up front gets slower every year; paginating it with numbered pages makes browsing feel like filing.

Infinite scroll through TanStack Query's infinite query support fits the browsing behaviour better. The backend exposes cursor-based pagination rather than offset-based — with offsets, new entries inserted while someone is scrolling shift the window and cause items to repeat or vanish. A cursor points at a stable position, so the sequence stays consistent regardless of what is added mid-scroll.

Perceived performance

Each loading state is a skeleton shaped to the dimensions of the content that will replace it. This is partly about perceived speed and mostly about layout stability: a skeleton with the wrong height causes the page to jump when real content arrives, which is worse than a spinner. Getting the dimensions right means the fill-in is invisible.

Styling uses Tailwind with nested CSS where component-scoped rules read more clearly than long utility chains — mostly the skeleton and responsive breakpoint work.

Deployment

Containerized with Docker behind Nginx, with the Django API and PostgreSQL running as separate services.