Doccure - Online Documentation.

Introduction

Item Name

Doccure - Clinics and Doctors Online Appointment Booking React + Nextjs Template (Practo Clone)

Item Version

v1.8.5

Support Email

[email protected]

System Requirements

Node.js

Version 18.x or later

npm

Version 9.x or later

Web Browser

Chrome, Firefox, Edge, Safari

Features

React 19 + TypeScript + Vite

Fast, modern stack for web applications

Redux Toolkit

Scalable state management with typed hooks

Ant Design & Bootstrap 5

Rich UI components and utilities

Code Splitting

Uses React.lazy & Suspense for performance

Custom Hooks

For theme, debouncing, and more

RTL Support

Dynamic RTL/LTR switching with custom overrides

Modular Structure

Feature-based organization for easy scaling

Custom Styling

All custom tweaks in src/assets/scss/ and src/assets/css/

Charts & Widgets

Dashboard-ready with ApexCharts, and more

Fully Responsive

Compatible with all mobile devices

Cross Browser

Compatible with all modern browsers

File Structure

Admin App

Admin dashboard project

Frontend App

User-facing web application

Pharmacy App

Pharmacy management system

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

Utils Directory Structure

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

Key Utility Categories:

Constants

API endpoints, app configuration, and global constants

Formatters

Data formatting for currency, phone numbers, and dates

Helpers

Common helper functions for dates, strings, and data manipulation

Storage

LocalStorage and SessionStorage wrappers with expiration support

Validators

Input validation for emails, passwords, and form data

Index Export

Centralized exports for easy importing across the application

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 Guide

Getting Started with Doccure React Template

Prerequisites

Node.js (v18 or later recommended). Download Node.js
npm (comes with Node.js) or yarn/pnpm as alternative package managers.
Any modern web browser (Chrome, Firefox, Edge, Safari, etc.).

Extract the Template

After downloading, unzip the template package.
Navigate to react/template/ (the source code folder).

Install Dependencies

Open a terminal/command prompt in the React folder.
Run:
```
npm install
```
This will install all required packages (including TypeScript, Vite, React, etc.).

Start the Development Server

Run:
```
npm run dev
```
Open the local URL shown in your terminal (usually http://localhost:5173/).
Your app will reload automatically as you edit source files.

Build for Production

To create an optimized production build, run:
```
npm run build
```
The output will be in the dist/ folder, ready to deploy.

Install Additional Plugins

To add a new package (e.g., a chart library), run:
```
npm install package_name --save
```
Replace package_name with the actual npm package you want to add.

Tips:

If you see errors about missing Node.js or npm, install them from the official website above.
For Mac/Linux users, you may need to use sudo for global installs.
For Windows users, run your terminal as Administrator if you encounter permission issues.
Refer to the README.md in the project root for more usage and customization details.

How the React Project Works

This React project is designed for scalability, maintainability, and rapid development. Here's how the main features and flows work:

App Entry

The app starts from src/main.tsx, which sets up the root React component, Redux provider, and router.

State Management

Uses Redux Toolkit for global state (theme, sidebar, user, etc.), with typed hooks for safety and ease of use.

Routing

All routes are defined in src/routes/. The app uses React.lazy and Suspense for code-splitting.

Authentication

Full authentication flows (login, register, password reset, etc.) are implemented in src/pages/authentication/.

Utility System

Common utilities (formatters, validators, storage, helpers) are organized in src/utils/ for easy reuse across components.

Modular Design: The project is modular, so you can easily add new pages, features, or languages as your app grows.

Important Note on Import Paths:

When working with lazy-loaded components in src/routes/router.link.tsx, use these correct import paths:

Feature pages: ../pages/pages/[feature-name]/[component]
Authentication: ../pages/authentication/[auth-component]
Components: ../components/[component-name]/[component]

Example: ../pages/pages/dashboard/dashboard for the dashboard component.

How to change Logo ?

You can change the logo in your React project by following these steps:

Replace the Logo Image:
- Place your new logo image (e.g., logo.svg or logo.png) in the src/assets/img/logo/ folder.
Update the Logo Import in Your Component:
- Open the React component where the logo is used (commonly src/components/Header.tsx, Navbar.tsx, or similar).
- Update the import statement to use your new logo file. For example:
```
import logo from '../assets/img/logo/logo.svg';
```
Update the Logo Usage in JSX:
- Replace the <img> tag's src attribute to use the imported logo variable:
```
{``}
```
Save and View Changes:
- Save the file and check your app in the browser. The new logo should appear in place of the old one.

Tip:

You can use .svg, .png, or .jpg files for your logo.
For best results, use an optimized SVG for scalability and crispness.

How to change Font ?

You can change the font in your React project by following these detailed steps:

Choose a Font:
- Visit Google Fonts or another font provider and select your desired font (e.g., Inter, Roboto, etc.).
Add the Font Import to Your CSS:
- Copy the @import statement provided by Google Fonts.
- Paste it at the very top of src/assets/scss/custom.scss (this file is imported in src/main.tsx):
```
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
```
Update the font-family in CSS:
- In the same SCSS file, set the font-family for the body (or a specific class/component):
```
body {
  font-family:"Hanken Grotesk", sans-serif;
}
```
You can also target specific elements or classes if you want to use different fonts in different places.
Save and Check Your App:
- Save your CSS file and reload your app in the browser. The new font should be applied site-wide or wherever you specified.

Tips:

For best performance, only import the font weights/styles you actually use.
Keep your font imports in one place (usually your main CSS file).
Test your font on different browsers and devices for consistency.

How to use Dark Mode?

Dark Mode lets users switch the app's appearance to a darker color scheme, which is easier on the eyes in low-light environments.

How to enable: Open the Theme Settings panel (settings icon) and select Dark mode. This sets data-bs-theme="dark" on the <html> element.
Where to find: Dark mode logic is handled in the ThemeSettings component and Redux theme slice. The CSS uses the data-bs-theme attribute to apply dark styles.

Your dark mode preference is saved and will be remembered next time you visit the app.

Code Example:

// Enable dark mode via ThemeSettings handler
handleUpdateTheme('data-bs-theme', 'dark');
// Or manually set attribute:
document.documentElement.setAttribute('data-bs-theme', 'dark');

How to use Lazy Routing?

Lazy Routing improves performance by loading route components only when they are needed, reducing the initial bundle size.

How it works: The app uses React.lazy and Suspense to load route components on demand. This is set up in the routing configuration (usually in src/routes/).
How to add a lazy route: Import your component with React.lazy(() => import('./MyComponent')) and wrap your routes with <Suspense fallback={...}>.

Lazy loading routes helps your app load faster and improves the user experience, especially for large projects.

Code Example:

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

// In your router:
<Suspense fallback={<div>Loading...</div>}>
<Route path="/component" element={<MyComponent />} />
</Suspense>

FAQs

With one license you can use Doccure on a single domain. For additional domains, a separate license is required. Please refer to the LICENSE file included with this project for detailed terms.

If you need support, or if you're facing any problems, please contact us via Email Support
Please note that our respond can take up to 2 business days.

Availability to answer questions, Answering technical questions about item's features, Assistance with reported bugs and issues, Help with included 3rd party assets.
Any customization request will be ignored.
Please make sure to read more about the support policy.

Support

If this documentation does not address your questions, please feel free to contact us via email at Email Support

We are in the GMT+5:30 time zone and typically respond to inquiries on weekdays within 12-24 hours. Please note that in rare cases, the response time may extend to 48 hours, especially during holiday seasons.

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.

Don't forget to Rate Doccure

Please take a moment to rate our product on Themeforest. Your support means a lot to us. Just go to your Themeforest Profile > Downloads Tab, and you can leave a review for our script. Thank you!

License

Doccure is developed by the Doccure Team and is provided under a Commercial License. Please refer to the LICENSE file included with this project for complete terms.

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.

For questions about licensing, please contact us at [email protected].

Note

If you operate as a freelancer or agency, you may acquire licenses appropriate for your client projects. Please review the LICENSE file for details.

Credits

Library / Tool	URL
React	https://react.dev/
Vite	https://vitejs.dev/
TypeScript	https://www.typescriptlang.org/
Redux Toolkit	https://redux-toolkit.js.org/
Ant Design	https://ant.design/
Bootstrap 5	https://getbootstrap.com/
ApexCharts	https://apexcharts.com/
Google Fonts	https://fonts.google.com/
FontAwesome	https://fontawesome.com/

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 that your project isn't just another cookie-cutter solution but a 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