Documentation

  • Home
  • Documentation
Doccure

Introduction

On sale Doccure - Clinics and Doctors Online Appointment Booking React Template (Practo Clone) - Health & Beauty Retail Live Preview Doccure – Doctor Appointment Booking Template is a appointment management and patient management template.

Requirement

Technologies
React
Typescript
System Requirements
  • Node.js
  • npm
  • Browser: Modern browsers (Chrome, Firefox, Safari, Edge)

Features

  • React 19 + TypeScript + Vite
  • Fast, modern stack for web applications
  • Redux Toolkit
  • Rich UI components and utilities
  • Bootstrap 5.x used
  • Uses React.lazy & Suspense for performance
  • Custom Hooks For theme, debouncing, and more
  • Dynamic RTL/LTR switching with custom overrides
  • Feature-based organization for easy scaling
  • All custom tweaks in src/assets/scss/ and src/assets/css/
  • Charts & Widgets
  • Fully Responsive
  • Compatible with all modern browsers

File Structure

Project Overview

The project follows a modular structure with clear separation of concerns.

			
doccure_react/
└── template/
    ├── admin/                       # Admin React Project
    │   ├── public/
    │   ├── src/
    │   │   ├── assets/
    │   │   │   └── scss/
    │   │   │       └── custom.scss
    │   │   ├── components/
    │   │   ├── core/
    │   │   │   ├── data/
    │   │   │   ├── json/
    │   │   │   └── redux/
    │   │   ├── hooks/
    │   │   ├── layouts/
    │   │   ├── pages/
    │   │   ├── routes/
    │   │   ├── types/
    │   │   ├── utils/
    │   │   ├── i18n.ts
    │   │   ├── environment.tsx
    │   │   ├── main.tsx
    │   │   ├── setupTests.ts
    │   │   ├── vite-env.d.ts
    │   │   └── __tests__/
    │   ├── package.json
    │   ├── tsconfig.json
    │   ├── vite.config.ts
    │   └── README.md
    │
    ├── frontend/                    # Frontend React Project
    │   ├── public/
    │   ├── src/
    │   │   ├── assets/
    │   │   ├── components/
    │   │   ├── core/
    │   │   ├── hooks/
    │   │   ├── layouts/
    │   │   ├── pages/
    │   │   ├── routes/
    │   │   ├── types/
    │   │   ├── utils/
    │   │   ├── i18n.ts
    │   │   ├── environment.tsx
    │   │   ├── main.tsx
    │   │   └── __tests__/
    │   ├── package.json
    │   ├── tsconfig.json
    │   ├── vite.config.ts
    │   └── README.md
    │
    └── pharmacy/                    # Pharmacy React Project
        ├── public/
        ├── src/
        │   ├── assets/
        │   ├── components/
        │   ├── core/
        │   ├── hooks/
        │   ├── layouts/
        │   ├── pages/
        │   ├── routes/
        │   ├── types/
        │   ├── utils/
        │   ├── i18n.ts
        │   ├── environment.tsx
        │   ├── main.tsx
        │   └── __tests__/
        ├── package.json
        ├── tsconfig.json
        ├── vite.config.ts
        └── README.md

Structure

Structure Overview

The src/utils/ directory contains reusable utility functions organized by category for easy maintenance and development.

src/utils/
├── constants/                  # Application constants and configuration
│   ├── api.ts                 # API endpoints and configuration
│   ├── app.ts                 # App-wide constants and settings
│   └── index.ts               # Barrel export
├── formatters/                 # Data formatting utilities
│   ├── currency.ts            # Currency formatting functions
│   ├── phone.ts               # Phone number formatting utilities
│   └── index.ts               # Barrel export
├── helpers/                    # Helper functions
│   ├── date.ts                # Date manipulation and formatting
│   ├── string.ts              # String manipulation utilities
│   ├── storage.ts             # Local/session storage helpers
│   └── index.ts               # Barrel export
├── validators/                 # Validation functions
│   ├── email.ts               # Email validation utilities
│   ├── password.ts            # Password strength & validation
│   └── index.ts               # Barrel export
├── errorReporter.ts            # Global error capture & reporting
└── index.ts                    # Main export file for all utilities

Usage Examples:

// Import utilities from the main index
import { formatCurrency, formatPhoneNumber, validatePassword } from '../utils';

// Or import from specific modules
import { API_ENDPOINTS } from '../utils/constants/api';
import { setSessionItem } from '../utils/storage/sessionStorage';

// Usage examples
const price = formatCurrency(1234.56, 'USD');        // $1,234.56
const phone = formatPhoneNumber('1234567890');       // (123) 456-7890
const { isValid, strength } = validatePassword('MyPass123!');
setSessionItem('userToken', token, 3600000);        // Expires in 1 hour

Installation

Prerequisites
Node.js Installation

Ensure that Node.js is installed and running on your system.

Package Manager

Use npm (recommended with this project lockfile) or Yarn if preferred.

npm -v
Vite

Vite is used as the build tool. It is installed automatically as a project dependency — no global installation required.

Installation Steps
1
Extract & Navigate

After downloading, extract the Doccure package and navigate to the react directory.

2
Install Dependencies
npm install

This command will install all required dependencies into the node_modules directory.

3
Start Development Server
npm run dev

Starts the Vite development server with hot module replacement (HMR). Changes to React components, styles, and TypeScript modules are reflected instantly in the browser.

4
Open in Browser

Open your browser at the URL shown in the terminal (typically http://localhost:5173/react/)

Build

Run the build command to generate the production-ready output in the dist/ directory:

npm run build
Deployment

Deploy the dist/ folder contents to your web server. The build output contains all compiled HTML pages, optimized CSS, minified JavaScript, and vendor libraries ready for production.

Fonts

The default font is Inter. To change the font:

Update the @import URL and the --font-family-primary variable:

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

// Font Family
font-family: variables.$font-family-primary;

Color System

The design token variables are defined in the variables.scssfile. Here are the primary color tokens:

---primary: #316dff;;
---success: #04bd6c;
---info: #2F80ED;
---warning: #ffca18;
---danger: #ff0000;
Background Color Change

You can change the header background color in header.scss as per your wish

.header .-header-nav { 
	background: $white;
}

Dark Mode

How it Works

Dark mode is controlled by a theme attribute/class on the root element. When activated, all design tokens are overridden to dark variants.

The theme is controlled by the data-bs-theme attribute on the <html> element:

<html lang="en" data-bs-theme="dark">

Dark mode styles are defined in the [data-bs-theme=dark] block in theme.scss:

[data-bs-theme=dark] {
	--white: #151515;
	--dark: #EFEFEF;
    --light: #262626;
}

Icons

Use Iconsax icons with spesific class 

<i class="isax isax-add-circle5"></i>
<i class="isax isax-arrow-right-1"></i>
<i class="isax isax-call-calling"></i>

License

Doccure is developed by Dreams Technologies and is available under both Envato Extended & Regular License options.

Regular License

Usage by either yourself or a single client is permitted for a single end product, provided that end users are not subject to any charges.

Extended License

For use by you or one client in a single end product for which end users may be charged.

What are the main differences between the Regular License and the Extended License?

Note

If you operate as a freelancer or agency, you have the option to acquire the Extended License, which permits you to utilize the item across multiple projects on behalf of your clients.

Credits

NAME URL
React https://react.dev/
Vite https://vitejs.dev/
TypeScript https://www.typescriptlang.org/
Redux Toolkit https://redux-toolkit.js.org/
Prime React https://www.npmjs.com/package/primereact
Tabler Icons https://tabler.io/icons
Fontawesome https://fontawesome.com/
Google Fonts https://fonts.google.com/

Support

Need Support?

If this documentation does not address your questions, please feel free to contact us via email at support@dreamstechnologies.com

Reach the team at GMT+5:30. Typical reply within 12–24 hours on weekdays — rarely up to 48 hrs during holidays. Support is available to verified buyers for template-related issues.

Contact Support

Important Note : We strive to offer top-notch support, but it's only available to verified buyers and for template-related issues such as bugs and errors. Custom changes and third-party module setups are not covered.

Custom Work

Do you need a customized application for your business?

If you need a customized application for your business depends on your specific requirements and goals, Please contact us. Customization can be the key to success, ensuring your project perfectly aligns with your unique goals and requirements.

Don't Miss Out on the Benefits of Customization!

Unlock the potential of your project. It's time to ensure your project isn't another cookie-cutter solution but truly unique and effective one.

Discover how customization can make a difference in your project's success. Let's create a solution that's as unique as your vision!

We'll tailor the application to meet your specific needs and preferences.

We will upload your website to the server and ensure it is live.

Book an Appointment Get a Free Quote
thanks

Thank You

Thank you once again for downloading Doccure.
We hope you're enjoying your experience, and we kindly request that you take a moment to share your valuable review and rating with us.

Review Link