Amazon Wholesale Distributor Directory
React · Client-Side Data App
A client project built for a business owner who needed to search, filter, and export a list of 2,437 Amazon wholesale distributors that originally existed only as a screenshot. Converted the raw data into a structured JSON dataset and built a React directory app with 15+ live filters, column visibility toggles, and CSV export — deployed live on Netlify.
Project Overview
This project started with an unusual constraint: a client handed me a screenshot containing roughly 2,437 rows of Amazon wholesale distributor data — company names, websites, emails, phone numbers, locations, founding years, employee counts, and social links — and asked for a website that would let him find any distributor instantly. There was no spreadsheet, no CSV, no database — just an image of a table. I first transcribed the data into a structured JSON file, carefully preserving every field: SNO, industry, company, website, description, contact, email, city, state, country, timezone, founded year, employee count, revenue, Facebook, LinkedIn, Twitter, postal address, and street address. Then I built a React app around it with a fully client-side filter engine. Users can search globally across all fields, drill down with advanced filters (industry, country, state, city, timezone, contact, email, social presence, founded-year range, employee range, revenue range), toggle which columns are visible, and export the filtered result set as CSV or Excel. Because all 2,437 records load into the browser, filtering is instant — no server round-trips, no pagination lag. The app is deployed live on Netlify and is actively used by the client.
Key Features
- 2,437 structured distributor records loaded entirely client-side
- Global search across all fields (company, website, email, city, and more)
- 15+ advanced filters — industry, country, state, city, timezone, contact, email, social, founded-year range, employee range, revenue range
- Multi-filter stacking — quick and advanced filters combine together
- Column visibility toggles so users can hide fields they don't need
- Instant client-side filtering — no server round-trips, no lag
- Pagination handling thousands of rows smoothly (98 pages of results)
- CSV / Excel export of the currently filtered result set
- Fully responsive layout for desktop and mobile
- Live deployment on Netlify
Challenges & Solutions
The client's source data existed only as a screenshot — no CSV, no Excel, no database. Extracting 2,437 rows of multi-column data from a static image would normally require manual re-typing or fragile OCR that would inevitably corrupt fields like emails and website URLs.
Transcribed the data into a structured JSON file with a carefully designed schema, verifying emails, URLs, and numeric fields row by row. The JSON became the single source of truth for the app, and any future update is just a JSON edit.
The client needed to search by very different criteria at different times — sometimes by industry, sometimes by location, sometimes by founding year or revenue range. A single search box wasn't enough.
Designed a two-tier filter panel: a global search box across all text fields, plus 15+ dedicated filters grouped by category (business, location, contact, financials, social, and columns). Filters stack together and combine with the global search in real time.
Rendering 2,437 records in a browser table would freeze or lag if all rows were mounted into the DOM at once.
Implemented client-side pagination (roughly 25 rows per page, ~98 pages total) so only a slice is rendered at a time. All filtering still happens against the full in-memory dataset, so results stay accurate and instant — but the DOM stays light.
Different users care about different columns — some want just company + email, others need the full 19-field set including revenue and social links.
Added a column visibility panel where users toggle exactly which of the 19 fields appear in the table. The selection persists while filtering and is reflected in the CSV/Excel export, so exports always match what the user sees.
The client frequently needs to share filtered subsets with colleagues and partners, but copying rows out of a web table is tedious and error-prone.
Built one-click CSV / Excel export that dumps the currently filtered and column-selected result set — so the client can apply any combination of filters and instantly get a spreadsheet of exactly the rows and fields they need.
Project Info
- RoleFull-Stack Developer (Solo — Client Project)
- StatusCompleted / Live