Documentation

  • Home
  • Documentation
Doccure

Introduction

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

Requirements

Technologies
Node.js

Version 24.x or later

Angular

Angular CLI Version 21

Web Browser

Chrome, Firefox, Edge, Safari

System Requirements
  • Text Editor: Sublime Text 3 editor (or) Visual Studio Code editor
  • Browser: Modern browsers (Chrome, Firefox, Safari, Edge)

Core Features

  • Angular 21 + TypeScript
  • Angular Material, PrimeNG & Bootstrap 5
  • Code Splitting
  • Custom Hooks
  • RTL Support
  • Modular Structure
  • Custom Styling
  • Charts & Widgets
  • Fully Responsive
  • Cross Browser

File Structure

Project Overview

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

template/
├── public/                		 # Static assets (favicon, images, etc.)
├── src/
│   ├── assets/            		 # Images, icons, styles (scss/, css/)
│   ├── app/ 
│ 	│	├── core/          		 # models,routes,services
│   │   └── features/ 	   		 # Main pages Directory(404,500)
│	│   │   ├── admin/     		 # Admin Components,routes
│	│   │   ├── authentication/  # Authentication pages
│	│   │   ├── error/     	     # Error pages
│	│   │   ├── Pages/           # Pages Modules,routes
│	│   │   ├── Pharmacy/      	 # Pharmacy Modules,routes
│   │	├── layouts/			 # Common header , footer components
│   │	├── shared/				 # Shared Components
│   │   ├── app.config.ts/       
│   │   ├── app.component.html/          	 
│   │   ├── app.routes.ts/       
│   │   ├── app.component.scss/         
│   │   └── app.ts/         
├── editorconfig                 
├── gitignore                  	  
├── angular.json
├── package.json                  
├── README.md
├── tsconfig.app.json
├── tsconfig.json
└── tsconfig.spec.json

Installation Guide

Prerequisites
Node.js Installation

Before installing Sass, ensure you have Node.js installed on your system:

NPM Packages
  • Before proceding you'll need to install npm packages. You can do this by running npm install from the root of your project to install all the necessary dependencies.
npm install
Application Run
  • For running a project,run the command:
ng serve or ng s
Plugins Install
  • To install any plugins in your application, you have to run the following command
npm install plugin_name
Local Serve
  • Now you can run this Template in any web browser from your PC or Laptop.
  • vue/template is a folder name, you can change as per your wish how you used the folder
http://localhost:3000/
Build Project
  • Run npm run build to build the project. The build artifacts will be stored in the dist/ directory.

How the Angular Project Works

This Angular 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/index.html, which sets up the root Angular component, services and features.

State Management

Uses common components (theme, sidebar, user, etc.), ease of use.

Theming & RTL

Theme settings (light/dark, layout, direction) are managed in layouts components.

Routing

All routes are defined in src/app/app.routes.ts/. The app uses lazy loading for code-splitting.

Authentication

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

Dashboard & Widgets

The dashboard and widgets (charts, tables, stats) are in src/app/features/dashboard/.

UI Components

Reusable UI elements (sidebar, header, tables, etc.) are in src/components/ and styled with Bootstrap 5, Angular Material.

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

Fonts

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

  1. Choose a Font:
    • Visit Google Fonts or another font provider and select your desired font (e.g., Inter, Roboto, etc.).
  2. Add the Font Import to Your CSS:
    • Copy the @import statement provided by Google Fonts.
    • Paste it at the very top of your main CSS file (e.g., src/assets/css/style.css or src/assets/scss/main.scss):
    @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
  3. Update the font-family in CSS:
    • In the same CSS file, set the font-family for the body (or a specific class/component):
    body {
  font-family: 'Inter', sans-serif;
}
  4. You can also target specific elements or classes if you want to use different fonts in different places.
  5. 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.

RTL Support

RTL (Right-to-Left) support allows your app to display content right to left. The layout and text direction automatically switch when a RTL is added.

  • How to enable: Add a node_modules/bootstrap/dist/css/bootstrap.rtl.min.css in angular.json and Add dir="rtl" in index.html <html> element

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 class="dark-mode" on the <html> element.
  • Where to find: Dark mode logic is handled in the sidebar.service.ts component and Redux theme slice. The CSS uses the class 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
 public themeColor: BehaviorSubject<string> = new BehaviorSubject<string>(
      localStorage.getItem('themeColor') || 'light-mode'
    );
// Or manually set attribute:
document.documentElement.setAttribute('class', 'dark-mode');

Lazy Routing

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

  • How to add a lazy route: Import your component with {path:'Component_name',loadComponent:()=> import ('./Component_name').then((m)=>m.Component_name)}.

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

Code Example:

 {
        path:'auth',loadComponent:()=>import('./auth/auth').then((m)=>m.Auth),
        children:[
           {path:'login',loadComponent:()=> import ('./auth/login/login').then((m)=>m.Login)}, 
			]
		}

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

Library / Tool URL
Bootstrap https://getbootstrap.com/docs/
Apex charts https://www.npmjs.com/package/ng-apexcharts
Fontawesome https://www.npmjs.com/package/@fortawesome/fontawesome-free
Ngx Bootstrap https://www.npmjs.com/package/ngx-bootstrap
Editor https://www.npmjs.com/package/ngx-editor
Rxjs https://www.npmjs.com/package/rxjs
Angular Material https://material.angular.io/
Clipboard https://www.npmjs.com/package/ngx-clipboard
Lightbox https://www.npmjs.com/package/ngx-lightbox
Ngx Mask https://www.npmjs.com/package/ngx-mask
Scrollbar https://www.npmjs.com/package/ngx-scrollbar

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