Vaccine Portal by Nauman KhanVaccine Portal by Nauman Khan

Vaccine Portal

Nauman Khan

Frontend Engineer

React Native Developer

Fullstack Engineer

Axios

Framer

Radix UI

Healthcare

Vaccine Portal (Frontend)

A modern, scalable frontend built with Vite, React 19, and TailwindCSS 4, designed for enterprise-level applications.

🚀 Tech Stack

Core

React 19

React Router v7

Vite 6

State & Data

TanStack React Query

Axios

Zod

Authentication

Azure AD (MSAL)

UI & UX

TailwindCSS 4

Radix UI

Framer Motion

Lucide Icons

ShadCN-style utilities

Utilities

Embla Carousel

React Day Picker

React Select

Resizable Panels

XLSX Export

FileSaver

cmdk

Google Maps API

📁 Project Structure

src/
├── assets/        # Static assets
├── components/    # Reusable UI components
├── context/       # Global context providers
├── hooks/         # Custom hooks
├── layouts/       # App layouts
├── pages/         # Route-level pages
├── routes/        # Route definitions
├── services/      # API & external services
├── utils/         # Helpers & utilities
└── main.jsx       # Application entry point

🛠️ Setup

pnpm install
pnpm dev

🏗️ Build

pnpm build:dev
pnpm build:prod
pnpm preview

🔐 Authentication (MSAL)

import { MsalProvider } from "@azure/msal-react";

<MsalProvider instance={msalInstance}>
  <App />
</MsalProvider>

🌍 Environment Variables

VITE_API_BASE_URL=
VITE_AZURE_CLIENT_ID=
VITE_AZURE_TENANT_ID=
VITE_GOOGLE_MAPS_API_KEY=

📦 Commands

Command Description pnpm dev Start development server pnpm build:dev Build for testing pnpm build:prod Production build pnpm preview Preview build pnpm lint Run linting