Getting Started

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

Next.js 14+ (App Router)

Modern React framework with App Router & Server Components

TypeScript Support

Strong typing for scalable and maintainable code

SSR, SSG & ISR

Flexible rendering strategies for optimal performance

File-based Routing

Powerful routing using the app/ directory

API Routes

Backend APIs using Next.js Route Handlers

Authentication Ready

Supports JWT / NextAuth based authentication

Modern Styling

SCSS, CSS Modules & global styles support

SEO Optimized

Metadata API, Open Graph & structured SEO

Performance Optimized

Image optimization, caching & code splitting

Fully Responsive

Optimized for mobile, tablet, and desktop

Production Ready

Optimized builds for Vercel & Node hosting

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

Installation Guide

Getting Started with Doccure Nextjs 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 nextjs/template/ (the source code folder).
Install Dependencies
  • Open a terminal/command prompt in the Nextjs 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:3000/).
  • 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 .next/ 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 Next.js Project Works

This Next.js project is built using the App Router architecture, focusing on performance, scalability, and maintainability. The same structure and workflow is used for Frontend, Admin, and Pharmacy applications.

Application Entry

The application starts from src/app/layout.tsx, which defines the root layout, global styles, fonts, and providers. Page rendering begins from page.tsx.

Rendering Strategy

Pages support Server Components, Client Components, SSR, SSG, and ISR for optimal performance.

Routing System

Routing is handled automatically using the app/ directory. Each folder represents a route and supports nested layouts, loading, and error states.

Authentication & Authorization

Authentication flows are implemented using middleware, API routes, and protected layouts. Access control is handled per route or layout level.

State Management

Global and local state is managed using React Context, Redux Toolkit, or server-side data fetching depending on the use case.

Utilities & Helpers

Common helpers, formatters, constants, and shared logic are organized inside src/utils/ and src/core/.

Scalable Architecture: The same Next.js structure is reused across Frontend, Admin, and Pharmacy projects, making feature development and maintenance consistent and efficient.
Important Note on Imports:

With the App Router, imports are typically absolute and structured by feature:

  • Pages: src/app/[route]/page.tsx
  • Layouts: src/app/[route]/layout.tsx
  • Components: src/components/[component]
  • Utilities: src/utils/[utility]

Example: src/app/dashboard/page.tsx for the dashboard page.

How to change Font ?

In this Next.js project, fonts are handled using the built-in next/font system, which provides better performance, automatic optimization, and avoids layout shift.

  1. Choose a Font
    • Select a font from Google Fonts (e.g., Inter, Roboto, Poppins).
  2. Import the Font using next/font
    • Open your root layout file: src/app/layout.tsx
    • Import the font from next/font/google: 
    import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  display: "swap",
});
  3. Apply the Font Globally
    • Add the font class to the <body> tag in layout.tsx: 
    export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}
  4. Optional: Use Font Variables (Advanced)
    • If you want to reference the font inside CSS or SCSS: 
    const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});
    body {
  font-family: var(--font-inter), sans-serif;
}
  5. Save and Verify
    • Save the files and reload the application. The new font will be applied globally across all pages.
Tips
  • Always prefer next/font over CSS @import for better performance.
  • Load only the font weights you actually use.
  • This setup works seamlessly for Admin, Frontend, and Pharmacy apps in your Next.js project.

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?

In Next.js, lazy routing and component-level code splitting are handled automatically. For manual control, dynamic imports are used to load components only when needed.

  • How it works:
    Next.js uses next/dynamic to dynamically import components. These components are loaded only when the page is rendered, reducing the initial JavaScript bundle size.
  • Where it's used:
    Dynamic imports are typically used inside app/**/page.tsx files to lazy-load heavy or client-only components.

Example: Lazy loading a component in page.tsx

{`import dynamic from "next/dynamic";

// Lazy-loaded component
const DashboardComponent = dynamic(
  () => import("@/components/dashboard/DashboardComponent"),
  {
    loading: () => 
Loading...
,
    ssr: false, // Optional: disable SSR if component uses browser APIs
  }
);

export default function Page() {
  return (
    

      
    

  );
}`}

This approach ensures that heavy components are loaded only when required, improving performance and user experience.

Note: Route-level code splitting is automatic in Next.js. Each folder inside app/ is already lazily loaded by default.
When to use ssr: false:
  • Charts (Chart.js, ApexCharts)
  • Browser-only APIs (window, document)
  • Third-party UI libraries that don’t support SSR

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
[email protected]
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:https://themeforest.net/downloads