PharmaCare.
A high-performance healthcare storefront on Next.js 16 + React 19. End-to-end checkout, persistent cart, role-based admin — built without Redux.
Overview
PharmaCare is a full-stack pharmacy web application engineered to deliver a frictionless e-commerce experience. A dynamic storefront for browsing and purchasing, paired with a secure, role-gated administrative dashboard for real-time catalog management.
Built end-to-end on Next.js 16's App Router with React 19 and strict TypeScript for zero-latency routing and type safety. Instead of reaching for a heavy state library, the system uses a decoupled proprietary state engine built entirely on the React Context API — isolating Auth, Cart, and Store into memoized layers.
The interface runs on Tailwind v4 with a cohesive custom design language. Eight medical categories, each with its own color palette and typographic treatment. Native INR (₹) localization. Pre-configured Admin and Customer demo accounts ship out of the box.
The interesting design choices.
Decoupling state without Redux
Engineered a proprietary state engine using the React Context API. Strictly isolated AuthContext, CartContext, and StoreContext into distinct, memoized layers. Cart updates avoid triggering storefront render cycles, resulting in a lighter payload and snappier UX.
Architecture evolution (roadmap)
Designed with modularity for enterprise scale. Next steps: migrating to PostgreSQL via Prisma ORM, transitioning to NextAuth.js for JWT-based auth, wiring Razorpay for live transactions, and integrating IoT sensors for cold-storage telemetry.
10 screens, cover to cover.
Trust, first impression.
The landing page projects trust, speed, and modern accessibility through a clean, ultra-responsive hero. Eight primary medical categories surface immediately as color-coded gradient cards that guide the eye — no learning curve for first-time visitors.
Optimized for conversion.
The second fold is engineered for rapid discovery and conversion. A dynamic "Featured Medicines" grid with zero layout shift, clear pricing, subtle hover states, and immediate "Add to Cart" accessibility. Bridges browsing into purchase.
Filter in milliseconds.
Highly responsive catalog. Filter across eight visually distinct medical categories — emerald for Digestive Health, sky blue for Cold & Flu — with consistent color-coding for instant recognition. Real-time text search and price sorting on the client, via React 19.
Persistent, no Redux.
Frictionless review phase before checkout. Instant quantity adjustments, item removals, live total calculations natively localized to ₹. The Context-based cart engine persists globally across routes without re-rendering the app — feels like a native mobile app.
Single-page, no abandonment.
UX friction during checkout means cart abandonment. The flow is a streamlined single-page progression — shipping address, payment method, final summary — all on one screen. Localized validation, no multi-page reloads. Speed, security, confidence.
Receipt, on the spot.
On a successful transaction, the user gets a secure confirmation with a unique cryptographic Order ID. A pixel-perfect, printable digital invoice renders with itemized lines, INR formatting, shipping details. Behind the scenes, inventory mutates instantly.
A medical ledger.
"My Orders" acts as a personal medical ledger. Track current shipments, review historical purchases with one-click invoice retrieval, quickly reorder recurring supplies. Transparent, audit-ready paper trail — long-term trust.
Role-gated at the root.
Security and isolation through a strict RBAC architecture on top of React Context. The system renders entirely different app environments based on whether the token belongs to a B2C customer or an admin. Pre-configured demo accounts for testing.
Not a bureaucracy.
The signup flow feels less like a form, more like onboarding. Real-time client-side validation gives instant feedback on password strength and email format. Once validated, the profile is committed and the user is seamlessly dropped into shopping.
The command center.
Behind the consumer storefront: a data-dense administrative dashboard. Full CRUD over the catalog, a high-velocity quick-action table for bulk price/stock updates. Active inventory telemetry throws visual low-stock alerts so managers can restock before a customer sees an out-of-stock badge.