Documentation

  • Home
  • Documentation
Doccure

Introduction

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

Requirement

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

Features

  • Modern React framework with App Router & Server Components
  • Next.js 14+ (App Router)
  • Flexible rendering strategies for optimal performance
  • Powerful routing using the app/ directory
  • Backend APIs using Next.js Route Handlers
  • Supports JWT / NextAuth based authentication
  • SCSS, CSS Modules & global styles support
  • Metadata API, Open Graph & structured SEO
  • Image optimization, caching & code splitting
  • Optimized for mobile, tablet, and desktop
  • Optimized builds for Vercel & Node hosting

File Structure

Project Overview

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

			
doccure_nextjs/
└── template/
    ├── admin/                       # Admin Nextjs 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 Nextjs 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 nextjs 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

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
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.
Installation Steps
1
Extract & Navigate

After downloading, extract the Doccure package and navigate to the nextjs 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 nextjs 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:3000/)

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

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",
});

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>
  );
}

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;
}

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.

Color System

The design token variables are defined in the variables.scss file. 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>

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

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/
Ant Design https://ant.design/
Bootstrap 5 https://getbootstrap.com/
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