Samuel Bayer
Frontend developer
Based in Spain, open to remote roles, full-time or contract.
I build web apps with React, Next.js and TypeScript. My latest project queries 3.7 million rows entirely in the browser.
NYC Taxi Data Explorer
Filter and explore 3.7 million NYC taxi trips. No backend: everything runs in your browser.
React 19, TypeScript, Vite, Tailwind v4, DuckDB-WASM, TanStack Virtual, Comlink
Live demo (opens in a new tab)Source code (opens in a new tab)
- Kept the UI responsive by running every SQL query in a Web Worker (DuckDB-WASM + Comlink) and discarding stale responses.
- Rewrote the Parquet file (7 columns, integer cents, zstd, sorted by pickup): 61 MB → 24.7 MB.
- Rendered only about 30 DOM rows at a time with TanStack Virtual, using fixed row heights per breakpoint to keep scrolling smooth.
NYC Taxi Data Explorer in action
Open the recording in a new tab- Typical query
- About 40 ms
- First load (loading phases shown)
- About 33 MB
- Backend
- None
What I got wrong, and what I measured
Filtering in the wrong place
My first filters only hid the 90 rows already loaded in JavaScript, so they never touched the other 3.7 million. I moved them into SQL WHERE clauses with a filtered COUNT(*), so the scrollbar matches the results.
One query per scrolled row
Every row I scrolled past fired a new query, and old answers overwrote newer ones. Fixed blocks of 500 rows, and discarding stale responses, fixed it.
A speedup I chose not to ship
HTTP range reads cut the first visit from 37 s to 15 s but made cached revisits slower, from 2.3 s to 5.8 s. I measured both and left it out until I can combine them.
About
I'm a self-taught frontend developer based in Spain. Over the past 18 months I've learned through freeCodeCamp, a React/TypeScript bootcamp and, mostly, by building things and digging into how they work.
- Frontend
- React, Next.js, TypeScript, Tailwind CSS
- Tools
- Git, Vite, Vercel
- Languages
- Spanish (native), English (B2–C1)
- Availability
- Open to remote roles with US and EU teams (CET), full-time or contract.
Contact
The fastest way to reach me is email.