💊 Medi Store — Frontend

A premium, high-performance online pharmacy platform built with Next.js 15 App Router. This frontend provides a seamless shopping experience for customers, a robust management interface for sellers, and a comprehensive oversight dashboard for administrators.

✨ Key Features

🛒 Customer Experience

• Dynamic Shop: Advanced filtering, search, and category-based navigation.
• Smart Cart: Persistent cart state with synchronized guest-to-account migration.
• Medicine Discovery: Detailed product pages with image galleries, stock status, and expiry information.
• Secure Checkout: Streamlined Cash on Delivery (COD) workflow.
• Personal Dashboard: Track orders, manage profile, and change password securely.

🏪 Seller Dashboard

• Inventory Management: Add, update, and manage medicine listings.
• Order Tracking: Manage incoming orders and update delivery statuses.
• Sales Analytics: Visual overview of revenue and low-stock alerts.

🛡️ Admin Dashboard

• User Management: Control user roles and account statuses (Active/Deactivated).
• Category Control: Dynamic category management with icon uploads.
• System Oversight: Track global statistics and verify seller requests.

🚀 Tech Stack

• Framework: Next.js 15 (App Router)
• Styling: Tailwind CSS & Shadcn UI
• State Management: Zustand (Cart) & TanStack Query (Server State)
• Forms & Validation: React Hook Form & Zod
• Animations: Framer Motion
• Icons: Lucide React

🛠️ Getting Started

Prerequisites

• Node.js 18+
• Bun or NPM

Installation

1. Clone the repository
2. Navigate to the client folder:

   cd client

3. Install dependencies:

   bun install # or npm install

Environment Setup

Create a .env file in the root of the client directory:

NEXT_PUBLIC_API_BASE_URL="http://localhost:5000/api/v1"
NEXT_PUBLIC_SITE_URL="http://localhost:3000"

# Cloudinary (Optional - for direct uploads if needed)
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloud_name
NEXT_PUBLIC_CLOUDINARY_API_KEY=your_api_key

Running Locally

bun dev # or npm run dev

📈 SEO & UX

• Dynamic Sitemaps: Automated sitemap.xml and robots.txt generation.
• Skeleton Loaders: Custom pixel-matched skeleton loaders for all major routes.
• Error Boundaries: Targeted error and loading states for a resilient UX.
• Mobile First: Fully responsive design optimized for all screen sizes.

---

Built with ❤️ for the healthcare community.