How I Built Drs Kart: Building a B2B Medical Equipment Marketplace with React, Vite and Supabase

Disha Sonigra — Fri, 21 Aug 2026 14:30:04 +0000

Building Drs Kart: Technical Architecture, Technology Stack, and Lessons Learned

Building a marketplace is very different from building a simple website.

A marketplace needs to handle multiple types of users, different workflows, product listings, communication, authentication, database relationships, and business requirements — all while keeping the interface simple for users.

While working on Drs Kart, a B2B marketplace for medical and healthcare equipment, I had the opportunity to work on many of these challenges.

In my previous article, I introduced Drs Kart and its main features. In this article, I want to focus more on the technical side of building Drs Kart, the technologies I used, the architecture decisions, and some of the challenges I faced during development.

What Is Drs Kart?

Drs Kart is a B2B marketplace for medical and healthcare equipment.

The platform connects buyers and sellers so that businesses can discover equipment, create product listings, communicate with other businesses, negotiate requirements, and manage marketplace activities.

The basic workflow is:

Register → Verify → Discover → Communicate → Negotiate → Manage

Instead of treating Drs Kart as a simple product catalog, I designed it as a two-sided marketplace where buyers and sellers have different responsibilities and workflows.

Choosing the Technology Stack

One of the first decisions in any web application is choosing the right technology stack.

For Drs Kart, I wanted a stack that could provide:

Fast frontend development
Reusable UI components
Responsive design
Secure authentication
Relational database support
Easy development and deployment
Scalable backend services

The main technologies I used were:

Frontend: React.js + Vite
Styling: Vanilla CSS
State Management: Zustand
Backend Services: Supabase
Database: PostgreSQL
Authentication: Supabase Authentication
Version Control: Git + GitHub
Development Environment: VS Code

Each technology had a specific role in the application.

1. Building the Frontend with React.js

React was used to build the frontend of Drs Kart.

Since a marketplace contains many reusable elements, React's component-based architecture was useful for structuring the application.

For example, different parts of the application could be organized into reusable components such as:

Navigation bar
Product cards
Search interface
Filter components
Product details
User dashboards
Forms
Authentication screens
Seller listing interfaces

Instead of creating every page independently, reusable components helped maintain consistency across the application.

A product card, for example, can be reused in different areas such as the homepage, search results, category pages, and latest products.

This makes the frontend easier to maintain as the application grows.

2. Using Vite for Development

I used Vite as the development and build tool for the React application.

One of the main reasons for choosing Vite was its fast development experience.

During development, quick feedback is important. When making UI changes, I wanted the application to update quickly so I could test different layouts and interactions without unnecessary waiting.

Vite also provides a straightforward setup for a modern React application.

The development workflow became:

Write Code → Run Development Server → Test UI → Make Changes → Repeat

This made frontend development more efficient.

3. Managing State with Zustand

A marketplace application has many pieces of information that need to be shared across different components.

For example:

Logged-in user information
User role
Selected filters
Product information
Marketplace state
Application-level UI state

For state management, I used Zustand.

One reason I found Zustand useful was its relatively simple API and lightweight approach compared with more complex state-management solutions.

Instead of passing data through many levels of components, shared state could be managed centrally where required.

This helped keep the frontend structure cleaner.

4. Authentication and User Roles

Authentication is especially important for a B2B marketplace.

Drs Kart needs to distinguish between different types of users and provide functionality according to their role.

For authentication, I used Supabase Authentication.

The general flow is:

Register → Login → Authenticate → Identify Role → Load Appropriate Dashboard

After authentication, users can access marketplace functionality according to their requirements.

For example, a seller may need to:

Add products
Manage listings
Respond to inquiries
Communicate with buyers
Manage business requests

A buyer may need to:

Search products
Apply filters
View product information
Contact sellers
Discuss requirements
Submit requests

This role-based approach was an important part of designing Drs Kart.

5. PostgreSQL Database with Supabase

For the database layer, Drs Kart uses PostgreSQL through Supabase.

A marketplace naturally contains relationships between different types of data.

For example:

User → Business → Product → Inquiry → Conversation → Request

These relationships are easier to manage with a relational database.

The database needs to represent information such as:

Users
Businesses
Products
Categories
Product details
Requests
Conversations
Marketplace activities

Designing the database required thinking about how these entities would interact with each other.

The goal was not just to store data but to structure it in a way that supports the marketplace workflow.

6. Designing the Product Listing System

One of the core parts of Drs Kart is the medical equipment listing system.

Sellers need a way to publish equipment that buyers can discover.

A listing can contain information such as:

Product name
Description
Category
Price
Images
Specifications
Availability
Seller information

The listing system creates the foundation of the marketplace.

A simplified flow looks like this:

Seller → Create Listing → Add Product Details → Publish → Buyer Discovers Product

This also required designing forms that are simple enough for sellers while still collecting useful product information.

7. Search and Filtering

A marketplace becomes difficult to use if users cannot quickly find what they need.

Medical equipment can belong to different categories and have different specifications, prices, and availability.

Therefore, search and filtering were important parts of the frontend.

The basic idea was:

Search → Filter → Narrow Results → View Product → Contact Seller

Instead of forcing users to manually browse through every listing, filters can help them reduce the number of relevant results.

This also makes the marketplace experience more organized as the number of products increases.

8. Buyer-Seller Communication

A major difference between a normal e-commerce website and a B2B marketplace is communication.

In B2B transactions, buyers may have questions about:

Product specifications
Availability
Pricing
Quantity
Delivery
Custom requirements

Because of this, Drs Kart includes communication functionality between buyers and sellers.

The idea is to keep the conversation connected to the marketplace instead of forcing users to depend entirely on external communication channels.

This creates a more connected workflow:

Discover Product → Contact Seller → Discuss Requirement → Negotiate

9. Negotiation in a B2B Marketplace

Another important consideration was pricing.

B2B transactions do not always follow a simple fixed-price model.

Depending on the equipment, quantity, business requirements, and supplier, the final price may require discussion.

Therefore, Drs Kart was designed to support communication and negotiation between marketplace participants.

The goal is to make the platform more aligned with real-world B2B procurement rather than treating every transaction like a standard online retail purchase.

10. Business Verification and KYC

Trust is one of the biggest challenges in any marketplace.

This becomes even more important when businesses are dealing with medical and healthcare equipment.

Drs Kart includes business verification and KYC-related functionality to help establish trust between participants.

The overall concept is:

Register → Submit Information → Verification → Participate in Marketplace

The purpose is to create a more reliable environment where businesses can interact with greater confidence.

11. Dashboard-Based Marketplace Management

Another important part of Drs Kart is the dashboard.

Instead of making users navigate through multiple disconnected pages, dashboards provide a centralized view of their marketplace activities.

Depending on the user's role, the dashboard can include information related to:

Products
Listings
Inquiries
Conversations
Requests
Business activities

This approach makes it easier for users to manage their work from one place.

For a marketplace application, dashboards are especially useful because users can have multiple ongoing activities at the same time.

12. Challenges I Faced While Building Drs Kart

Building Drs Kart was not only about writing frontend code.

One of the biggest challenges was understanding how different marketplace workflows should work together.

A buyer and seller may interact with the same product, but their actions and requirements are different.

For example:

Seller:

Create Product → Manage Listing → Receive Inquiry → Communicate → Negotiate

Buyer:

Search Product → View Details → Contact Seller → Discuss Requirement → Negotiate

Designing these workflows required thinking about both sides of the marketplace.

Managing Application State

Another challenge was deciding which information should be local to a component and which information needed to be shared across the application.

Using Zustand helped simplify the management of shared state.

It also encouraged me to think carefully about how data flows between components instead of simply passing information everywhere through props.

Designing the Database

The database was another important part of the project.

A marketplace contains many connected entities.

For example, one business can have multiple products, a product belongs to a seller, buyers can create inquiries, and conversations can involve multiple marketplace participants.

Designing these relationships properly is important because poor database structure can create problems as the application grows.

Working with PostgreSQL helped me understand the importance of relational data modeling in real-world applications.

13. Responsive UI Development

Since users can access marketplace platforms from different devices, responsive design was also an important consideration.

The interface needed to work across:

Desktop
Laptop
Tablet
Mobile

React handled the application structure while CSS was used to manage layouts and responsive behavior.

This was also a reminder that building a web application is not only about functionality.

A feature can work technically but still provide a poor experience if the interface is difficult to use.

14. Version Control with Git and GitHub

I used Git and GitHub throughout development.

Version control was useful for:

Tracking changes
Managing development progress
Recovering previous versions
Organizing project code
Maintaining a remote repository

For a project that continuously evolves, version control becomes especially important.

It also provides a professional workflow for managing code as the project grows.

What I Learned from Building Drs Kart

Working on Drs Kart helped me understand that building a real-world application involves much more than learning individual technologies.

I learned how different parts of a system need to work together:

Frontend + Authentication + State Management + Database + Business Logic + User Experience

Some of the biggest lessons I learned were:

1. Understand the problem before building the feature

A feature should solve a real user problem rather than simply being added because it looks useful.

2. Database design matters

A good database structure can make application development much easier as the project grows.

3. Different users need different workflows

A marketplace cannot treat buyers and sellers exactly the same way.

4. UI and functionality must work together

A technically correct feature is not enough if users cannot understand how to use it.

5. Real-world projects involve continuous iteration

The first version of an application is rarely the final version.

Future Improvements

Drs Kart is still an evolving project.

There are several features I would like to explore in future versions.

Some possibilities include:

AI-powered product recommendations
Intelligent medical equipment comparison
Automated price estimation
Certified refurbished equipment
Equipment servicing and maintenance
Advanced supplier discovery
Business analytics
Personalized dashboards
Smarter procurement workflows
AI-assisted buyer-seller interactions

These features could make Drs Kart more intelligent and useful for businesses.

Final Thoughts

Building Drs Kart gave me the opportunity to work on a project that combines frontend development, backend services, authentication, database design, state management, and real-world business workflows.

The project started with the idea of creating a centralized marketplace for medical equipment, but developing it taught me much more than how to build product listings.

It taught me how to think about:

Users → Workflows → Data → Features → Scalability

The most valuable part of the project was not simply using React, Vite, Zustand, Supabase, or PostgreSQL.

It was learning how to combine these technologies to solve an actual business problem.

Drs Kart is still evolving, and I plan to continue improving its marketplace experience and exploring more intelligent features in the future.

Explore Drs Kart

You can explore the project here:

Drs Kart: https://drskart.tech/

Developed By

Drs Kart is developed by Azyntrex Tech Services Pvt Ltd.

Explore the company: Azyntrex Tech Services Pvt Ltd

If you're also building a marketplace or working with React, Supabase, and PostgreSQL, I'd love to hear about your experience and the challenges you've faced.

Technologies Used

Frontend: React.js, Vite, Vanilla CSS
State Management: Zustand
Backend: Supabase
Database: PostgreSQL
Authentication: Supabase Authentication
Version Control: Git, GitHub
IDE: Visual Studio Code

Drs Kart — Connecting Businesses with Medical & Healthcare Equipment.

Developed by Azyntrex Tech Services Pvt Ltd.

DEV Community: Disha Sonigra

How I Built Drs Kart: Building a B2B Medical Equipment Marketplace with React, Vite and Supabase

Building Drs Kart: Technical Architecture, Technology Stack, and Lessons Learned

What Is Drs Kart?

Choosing the Technology Stack

1. Building the Frontend with React.js

2. Using Vite for Development

3. Managing State with Zustand

4. Authentication and User Roles

5. PostgreSQL Database with Supabase

6. Designing the Product Listing System

7. Search and Filtering

8. Buyer-Seller Communication

9. Negotiation in a B2B Marketplace

10. Business Verification and KYC

11. Dashboard-Based Marketplace Management

12. Challenges I Faced While Building Drs Kart

Managing Application State

Designing the Database

13. Responsive UI Development

14. Version Control with Git and GitHub

What I Learned from Building Drs Kart

1. Understand the problem before building the feature

2. Database design matters

3. Different users need different workflows

4. UI and functionality must work together

5. Real-world projects involve continuous iteration

Future Improvements

Final Thoughts

Explore Drs Kart

Developed By

Technologies Used