DocFinder is a sleek, responsive web app built using Next.js and Tailwind CSS, leveraging API calls to enable users to search, explore, and connect with doctors effortlessly. With a modern design, real-time search suggestions (including doctor images), and smooth UI animations, the app provides a seamless healthcare discovery experience.
- 🔍 Smart Doctor Search – Real-time suggestions with names and profile images.
- 📱 Fully Responsive – Mobile-friendly layouts for all screen sizes.
- 🎨 Gradient Headers – Visually appealing gradient headings with subheading.
- 💬 Lucide Icons – Intuitive, modern SVG icons for better UX.
- 🎞️ Framer Motion Animations – Smooth transitions and UI effects.
- 🖼️ Doctor Cards – Detailed cards with photos, specialties, and availability.
- 🌐 Live Data Fetching – Integrated with a mock API for live doctor data.
| Tech | Description |
|---|---|
| Next.js | React-based framework for SSR & fast rendering |
| Tailwind CSS | Utility-first CSS for rapid UI development |
| Lucide Icons | Modern SVG-based icon library |
| Framer Motion | Animation library for React |
| Mock API | View API – Used to fetch doctor data |
To run the project locally, follow the steps below:
-
Clone the repository:
git clone https://github.com/your-username/docfinder.git
-
Navigate to the project directory:
cd docfinder -
Install dependencies:
npm install
-
Run the development server:
npm run dev
The app will be available at
http://localhost:3000.
The data used for doctors' search and profiles is fetched from the following mock API: