🩺 HEALIO

Next-Gen Healthcare Management & Digital Pharmacy Nexus

Healio is a cutting-edge healthcare platform designed to bridge the gap between patients, healthcare providers, and pharmacies. Engineered with the latest Next.js 16 architecture, it features a bespoke design system called "Identity Nexus", delivering a high-performance, visually stunning, and secure user experience.

The frontend is built on a foundation of speed, reliability, and modularity.

• Framework: Next.js 16 (App Router, Server Actions, Parallel Intercepted Routes)
• Language: TypeScript (Type-safe schemas, interfaces, and API responses)
• Styling: Tailwind CSS 4 (Modern CSS variables, advanced utility-first design)
• Animations: Framer Motion 12 (Orchestrated scroll-reveal, staggered lists, and micro-interactions)
• Auth: Better Auth (Highly secure session management, role-based access control)
• Toasts: Sonner (Interactive, premium feedback system)
• State: React Context + TanStack Form (Optimized state management and form validation)

src/
├── app/                  # Routing & Layout Hierarchy
│   ├── (commonLayout)/   # Public pages (Medicines, Wellness, About)
│   ├── (dashboardLayout)/# Role-based secure views (@admin, @seller, @user)
│   └── (auth)/          # Premium Signup & Login flows
├── components/           # UI Component Ecosystem
│   ├── ui/               # Core low-level primitives (Radix UI + Shadcn)
│   ├── shared/           # Reusable system components (Navbar, Footer)
│   └── modules/          # Feature-specific complex components
├── services/             # Axios/Fetch abstraction for Backend Sync
├── providers/            # Context Providers (Cart, Auth, Theme, Toast)
├── types/                # Global TypeScript declarations
└── lib/                  # Auth clients, utils (cn), and configurations

• Real-time Metrics: Interactive stats for revenue, users, and orders.
• Revenue Trajectory: Dynamic SVG-based visualizations of fiscal performance.
• Node Sync: Intelligent multi-node synchronization tools for database consistency.

• Premium Plans: Tiered membership (Basic, Pro, Elite) with feature comparisons.
• Health Tips Hub: A central node for expert medical briefings and vitality guides.
• Integration: Real-time "Coming Soon" toast notifications for future premium modules.

• Countdown Sync: High-performance timers for time-sensitive pharmaceuticals.
• Real-time Inventory: Automatic stock-level synchronization during sales.

• Inventory Matrix: Sophisticated CRUD for medications with categorized listings.
• Order Tracking: Comprehensive lifecycle management from placement to fulfillment.

git clone https://github.com/HabiburRahmanZihad/healio-web.git
cd healio-web/Frontend
npm install

Create a .env file in the root directory:

NEXT_PUBLIC_BASE_URL=your_api_url
BETTER_AUTH_URL=your_auth_url
# See .env.example for more

npm run dev

The Identity Nexus system is built on three pillars:

1. Glassmorphism: Using backdrop-blur-xl and bg-white/[0.02] to create depth and transparency.
2. Ambient Lighting: Animated background glows that react to user interaction.
3. Micro-Feedback: Every button, input, and state change triggers a purposeful visual response (e.g., Lucide icon morphs, Sonner toasts).

Developed with 💎 Precision & ❤️ Care by Habibur Rahman Zihad

Licensed under the ISC License. All rights reserved.