Practo Clone

A full-stack web application that replicates the core functionalities of Practo, allowing users to find doctors using location and specialization.

Tech Stack

Features

• Doctor Search: Find doctors based on location and specialization.
• Core functionality replicating Practo.
• User-friendly interface for easy navigation.
• Responsive design for optimal user experience.

API Endpoints

The backend server provides the following API endpoints:

Autocomplete

• Method: GET
• Path: /api/autocomplete
• Parameters:
  • q (string): The search query.
  • isregion (boolean): A flag to specify whether the search is for a region.
• Description: Provides autocomplete suggestions for cities, localities, or general queries.

Suggestions

• Method: GET
• Path: /api/suggestions
• Parameters:
  • city (string): The city for which to get suggestions.
  • query (string): The type of query.
• Description: Provides top suggestions based on a city and query type.

Search Doctors

• Method: POST
• Path: /api/search/doctors
• Request Body: A JSON object containing the search criteria.
• Description: Searches for doctors based on the provided criteria in the request body.

Getting Started

Prerequisites

• Node.js and npm
• Java Development Kit (JDK)
• Maven

Backend Setup (practo_demo_server)

1. Navigate to the practo_demo_server/practo-demo directory:

   cd practo_demo_server/practo-demo

2. Run the Spring Boot application:

   ./mvnw package

3. Run the Spring Boot application:

   java -jar target/practo-demo-0.0.1-SNAPSHOT.jar

Frontend Setup (practo-frontend)

1. Navigate to the practo-frontend directory:

   cd practo-frontend

2. Install the dependencies:

   npm install

3. Run the development server:

   npm run dev

Project Structure

• practo_demo_server: Contains the Spring Boot backend application.
• practo-frontend: Contains the Next.js frontend application.

Screenshots

Practo Clone UI

Search Results

Live Demo

A live demo of the application is available here: https://practo-clone-ui.onrender.com.

Api Endpoints

• https://practo-clone-9wxf.onrender.com/api/autocomplete?q=delhi
• https://practo-clone-9wxf.onrender.com/api/suggestions?city=delhi&query=doctors
• https://practo-clone-9wxf.onrender.com/api/search/doctors

Development Journey

This project was built incrementally, starting with the backend API and then developing the frontend user interface. Key milestones in the development process include:

• Initialization: Set up the initial Spring Boot and Next.js applications. (2 hours)
• Backend Development: Implemented the core API endpoints for doctors and appointments using webclient and custom object mapper. (15 hours)
• Frontend Development: Built the user interface for searching doctors and booking appointments, and mimicked the Practo user interface. Made it better responsive and smoother. (25 hours)
• UI Enhancements: Made several improvements to the user interface and fixed bugs. (5 hours)
• Finalization: Completed the UI and integrated the frontend with the backend. (10 hours)

Total development time: 42 hours.