01

Avani

ERP & COMMERCE

My role

Full-stack Developer at Avan Tech — front-end focus, backend APIs, and data modelling

Built with

  • React
  • TypeScript
  • Vite
  • Tailwind CSS
  • Radix UI
  • TanStack Query
  • TanStack Table
  • React Hook Form
  • Zod
  • Zustand
  • Bun
  • Elysia
  • Prisma
  • PostgreSQL

Avani is an ERP platform for product, inventory, and sales operations, connected to Madar Market. At Avan Tech, I developed product catalogue and online sales interfaces and implemented the returns workflow across the front end and back end, including its data model, backend APIs, and admin and branch panel changes.

Visit website

The live panel requires an account. Explore the screenshots below.

Next project
Avani website preview

Development notes

Making everyday operations easier to navigate

My work centred on helping panel users find information, act on products, and handle online orders. It combined front-end development and UX decisions with server-side implementation. For the returns workflow, I defined the data model, implemented the backend APIs, and built the corresponding admin and branch interfaces.

Rebuilding product management

The existing interface lacked a clear structure for product information and quick actions. Starting from an initial design, I developed a new product management workspace and brought over the previous feature set. A main table, a side table for product selection, and tabbed detail pages organized information and actions into a more usable workflow.

Connecting order preparation to customer updates

We established a connection between the panel and the online store so that order status updates follow the preparation workflow automatically. This keeps customers informed about the stage their order has reached as the branch processes it.

Reviewing returns before dispatching a courier

The branch needed enough information to assess a reported product issue before sending a courier. The returns flow lets customers provide descriptions and photos with their request, so branch staff can review the evidence and decide whether to dispatch a courier or reject the request. I defined the implementation specifications, data model, and customer, courier, and branch workflows, then implemented the backend APIs and the admin and branch panel changes.

See it in action

Browse the screenshots below, grouped by product management, inventory monitoring, storefront management, and online orders. The live panel requires an account.

Product management

Avani ERP — The main product table brings catalogue information and quick actions together.
The main product table brings catalogue information and quick actions together.
Avani ERP — A side table keeps product selection available while working through detailed information.
A side table keeps product selection available while working through detailed information.
Avani ERP — Stock information is accessible within the same product detail workspace.
Stock information is accessible within the same product detail workspace.
Avani ERP — Online product details use the same side-table and tabbed layout.
Online product details use the same side-table and tabbed layout.
Avani ERP — Online product settings are organized in a dedicated tab.
Online product settings are organized in a dedicated tab.

Inventory monitoring

Avani ERP — A card view presents product availability for operational review.
A card view presents product availability for operational review.
Avani ERP — Product stock monitoring brings availability indicators into a scannable grid.
Product stock monitoring brings availability indicators into a scannable grid.

Online storefront

Avani ERP — The panel organizes the categories and product sections shown in the online store.
The panel organizes the categories and product sections shown in the online store.

Online orders

Avani ERP — Orders are grouped by stage to support day-to-day order handling.
Orders are grouped by stage to support day-to-day order handling.
Avani ERP — The order board keeps operational stages and order information visible together.
The order board keeps operational stages and order information visible together.
Avani ERP — Order details combine customer and delivery information with the progress timeline.
Order details combine customer and delivery information with the progress timeline.
Avani ERP — Collected quantities, payment details, and fulfilment progress appear in the order workspace.
Collected quantities, payment details, and fulfilment progress appear in the order workspace.
Next project