Vaccine Portal by Nauman KhanVaccine Portal by Nauman Khan

Vaccine Portal

Nauman Khan

Nauman Khan

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

โœจ Key Features

Azure AD authentication
Fast Vite-based development
Modern, accessible UI
API caching with React Query
Google Maps integration
Excel export support
Fully responsive design

๐Ÿ“„ License

Private project โ€“ internal development use only.

๐Ÿ“ธ Screenshots

Homepage

Contactus

Aboutus

FilterScreen

Vaccine Point Screen

Like this project

Posted Jan 1, 2026

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