Two Chapters at Deponet: Components, a Migration, and a Design System

Deponet is a full-featured e-commerce platform with a storefront and an admin panel, and it's the company I've worked with twice: nine months from April 2023 to January 2024, and then — after a few months of animation-heavy work at Bacham — a second, more ambitious six-month stint from May to November 2024. The first chapter was about building the hard components a product team usually reaches for a library to avoid. The second was about rebuilding the platform itself.

Chapter one: components, maps, and an AI image editor

E-commerce admin panels are component-hungry, and the interesting ones don't exist off the shelf in the shape you need:

• TreeView — single and multiple selection with intermediate (partially checked) states, renderable both inline and inside a popover. Category management lives and dies by this component.
• Sorting — a drag-and-drop ordering component with a concise API, supporting flex and grid layouts and full keyboard operation.
• Scrollspy tabs — tabs that track scroll position via the Intersection Observer API, so long product forms always show where you are.
• Alert dialogs — a single dialog component with success, warning, delete, info, and confirm variants, replacing a zoo of one-off modals.

The image editor

The piece I'm proudest of from that first year is the product image editor. Sellers upload photos in every imaginable state, so the editor lets them crop, resize, convert formats, stamp a logo — and remove the background with AI. Watching a messy phone photo turn into a clean catalog image in a few clicks is the kind of feature users actually thank you for.

Maps and geocoding

I integrated Neshan maps with search, geocoding, and reverse geocoding, so address entry became "tap the map" instead of "type your address and hope."

And one good bug hunt

The team had lived with a mystery for months: in development mode the app would hard-refresh, losing state. I tracked it down to a misconfigured Redux Persist setup and fixed it — a one-line lesson in how much developer experience is worth.

Chapter two: rebuilding the platform

In May 2024 I came back for the second chapter: modernizing the entire platform, both the storefront and the admin panel.

Restructuring before rebuilding

The first thing I did wasn't code — it was structure. I restructured the project's folders and naming conventions end to end, so that finding a module stopped requiring tribal knowledge. It's the least visible work of the whole stint and probably the highest leverage: every migration step after it went faster because the codebase finally had a predictable shape.

Pages Router → App Router

The centerpiece was migrating the application from Next.js 12's Pages Router to Next.js 14's App Router, updating every dependency along the way. That meant rethinking data fetching around Server Components, moving layouts out of _app.tsx into nested layouts, and untangling client-only code from code that could now run on the server.

Alongside the router migration, I moved the map stack from Neshan's Leaflet to Parsimap's Mapbox — a swap that touched every address-picking flow in the app.

A design system worth composing with

The largest single piece of work was a new design system: composable, polymorphic, and slottable components with drag and drop, swipe gestures, keyboard navigation, virtualization, and accessibility built in — with an API concise enough that using a component correctly is easier than using it incorrectly. The whole application was then redesigned on top of it, giving the storefront and admin panel a unified look, multi-theme support, and a consistent interaction language.

A few components I'm particularly fond of:

• An advanced file uploader with an upload queue, manual triggers, per-file progress, and abort support — you can keep appending files while others are mid-flight.
• A gallery dialog that behaves like the operating system's file picker, with async loading and filtered views.
• Breadcrumbs that handle both static and dynamic (async) segments, with images, icons, labels, and paths.

SSR and technical SEO

Finally, I implemented server-side rendering across the storefront and applied technical SEO throughout — including JSON-LD structured data on key pages — which measurably improved both performance and search visibility.

The result

+4

Fifteen months across two chapters: a component library built the hard way, one router migration, one design system, and a platform that's faster to use and far faster to build on. You can see it live at deponet.ir.