MediQueue is a specialized Next.js web application designed for medical students to find, book, and manage 1-on-1 tutoring sessions with expert medical mentors in core subjects like Anatomy, Physiology, Biochemistry, and more.
The platform connects seamlessly to an external REST API and uses Better Auth paired with MongoDB to ensure secure, reliable account and session management.
🔗 Live Deployment: https://b13-a9-client.vercel.app
- Hero Carousel: Interactive banner built with Swiper featuring autoplay, smooth navigation, and direct call-to-actions (CTAs).
- Featured Tutors: Dynamic showcase highlighting top-rated medical mentors loaded straight from the API.
- 3-Step Workflow: Interactive guide illustrating the core user journey: Find Specialist → Book Date → Live Learning.
- Trust Badges: Highlights verification status, automated scheduling, and high-quality mentorship.
- Advanced Search: Real-time search filtered by tutor name, subject, or institution with built-in query debouncing.
- Dynamic Filters: Refine choices effortlessly by Subject, City (District), Price Range (BDT), and Teaching Mode (Online / Offline / Both).
- Detailed Profiles: In-depth tutor detail pages featuring stats, biographical about section, and an integrated booking widget.
- Favorites System: Interactive "Favorite" toggle directly on tutor cards (UI-state).
- Appointment Modal: Modal with date selection and session confirmation.
- Automated Slot Deductions: Real-time update that automatically decreases available tutor slots upon successful booking.
- Student Dashboard: "My Booked Sessions" tab to track active bookings, fees, and reservation statuses.
- Cancellation Support: Immediate booking cancellation with built-in confirmation dialogs.
- Creation Form: Add comprehensive tutor listings including image URL, experience, subjects, location, and fees.
- Personal Management Panel: "My Tutors" hub displaying all active listings published by the logged-in user.
- Full CRUD Operations: Edit listing details via inline modals and safely delete listings with confirmation states.
- Credential Sign-In: Standard Email and Password registration/login flow.
- Social Auth: One-click Google OAuth login integration.
- Route Protection: Strict middleware guard rails blocking unauthenticated access to
/add-tutor,/my-tutors, and/booked-sessions.
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router), React 19 |
| Styling & UI | Tailwind CSS 4, DaisyUI, HeroUI components |
| Authentication | Better Auth + MongoDB adapter |
| State & API Handling | TanStack Query (React Query) / Axios |
| UI Enhancements | Swiper (Carousel), Lucide React (Icons), React Hot Toast |
Make sure you have an .env.local file configured in your client root folder with the following variables:
NEXT_PUBLIC_API_URL=your_backend_api_url
NEXT_PUBLIC_BETTER_AUTH_URL=your_auth_base_url- Clone the repository:
git clone [https://github.com/your-username/mediqueue-client.git](https://github.com/your-username/mediqueue-client.git)
- Install the necessary dependencies:
npm install
# or
yarn install
- Run the development server:
npm run dev
# or
yarn dev
Open [http://localhost:3000](https://www.google.com/search?q=http://localhost:3000) inside your browser to explore the app locally!
---
## 🌐 Deployment & Scripts
- **Build:** `npm run build` — Compiles the production application.
- **Start:** `npm run start` — Starts a Next.js production server.
- **Lint:** `npm run lint` — Runs integrated ESLint checks.
This project is fully optimized for hosting on the **Vercel Platform**.