Borderless Health — Client

A cross-border telemedicine platform that connects patients with verified specialists around the world. Patients browse departments and physicians, request consultations, and leave reviews; physicians manage their profile and respond to patient requests.

🔗 Live demo: https://borderless-app-client.vercel.app/

This is the React frontend. It talks to a separate Express + MongoDB API.

Features

• Authentication — JWT-based login and separate patient / physician sign-up, with client-side validation (Zod).
• Role-aware UI — the navbar, routes, and actions adapt to whether you're a patient or a physician.
• Departments — browse departments with images and specialties, search, and read reviews.
• Reviews — patients can review departments (star rating + comment).
• Physicians & patients — browse and filter (by name and department); view detailed profiles.
• Connections — patients request consultations with physicians (and physicians with patients); recipients accept or decline.
• Profile — view, edit, and delete your own profile.

Tech stack

• React 19 + Vite
• React Router for routing
• Material UI for components and theming
• Axios for API calls (single configured instance with a token interceptor)
• Zod for form validation
• Context API for auth state

Getting started

Prerequisites

• Node.js 18+
• The Borderless API running locally (or a deployed URL)

Setup

npm install

Create a .env file in the project root:

VITE_SERVER_URL=http://localhost:5005

(The client appends /api to this automatically.)

Run

npm run dev      # start the dev server (http://localhost:5173)
npm run build    # production build
npm run preview  # preview the production build

The API's ORIGIN environment variable must match the client's URL (e.g. http://localhost:5173) or requests will be blocked by CORS.

Project structure

src/
├── services/service.config.js   # axios instance + auth token interceptor
├── context/auth.context.jsx      # auth state (user, profile, login/logout)
├── validators/                   # Zod schemas
├── components/                   # NavBar, ProtectedRoute, cards, etc.
├── pages/                        # route pages (home, auth, departments, ...)
└── theme.js                      # Material UI theme (brand colors + defaults)

Future improvements

• Messaging — a conversation thread within an accepted connection so the two parties can continue talking.
• Profile picture updates — allow changing the photo from the profile page (requires image upload on the update routes).
• Editable user fields — let users update name / country / age (currently read-only on the profile).