Documentation

  • Home
  • Documentation
DreamsEstate Banner

Introduction

DreamsEstate is a properties sale and rent HTML Template designed to meet the needs of estate buy and rent platform. With its clean and responsive design, DreamsEstate is perfect for all kinds of Real Estate Agency, Agents companies, property, real estate, rental, houses, apartments, a broker and more.

Requirements

Technologies
Node.js

Version 24.x or later

Angular CLI

Version 21.x or later

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)

Features

Kofejob offers powerful admin template and modern interface.

  • Angular 21.x
  • Bootstrap 5.3.8
  • Angular Material
  • JSON Datas
  • Lazy Loading
  • No Jquery
  • RXJS
  • API Integrated Datas
  • Font Awesome icons
  • Feather icons
  • Fully Responsive Layout
  • Cross Browser Compatible
  • Easy to Customize
  • Clean & Well Commented Codes
  • Compatible to all Mobile Devices
  • Detailed Documentation
  • Developer Friendly
  • And Many More...

File Structure

Project Overview

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


angular/
│    ├── public/                		 # Static assets (favicon, images, etc.)
│    ├── src/
│    │   ├── assets/            		 # Images, icons, styles (scss/, css/)
│    │   ├── app/ 
│    │   │	├── core/          		 # models,routes,services
│    │   │  └── features/ 	   		 # Main pages Directory
│    │	 │  │   ├── auth/  			 # Authentication pages
│    │	 │  │   ├── error/  		 # Error pages
│    │	 │  │   ├── Pages/           # Pages 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

Prerequisites
  • Node.js (v24 or later recommended). Download Node.js
  • npm (comes with Node.js)
  • Any modern web browser (Chrome, Firefox, Edge, Safari, etc.).
Extract the Template
  • After downloading, unzip the template package.
  • Navigate to Kofejob/angular (the source code folder).
Install Dependencies
  • Open a terminal/command prompt in the Angular folder.
  • Run: 
    npm install
  • This will install all required packages.
Start the Development Server
  • Run: 
    ng s or ng serve
  • Open the local URL shown in your terminal (usually http://localhost:4200/).
  • Your app will reload automatically as you edit source files.
Build for Production
  • To create an optimized production build, run: 
    ng 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
  • 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.

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-theme="dark" 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'
    );
// Or manually set attribute:
document.documentElement.setAttribute('data-theme', 'dark');

How to change Font ?

You can change the font you can edit it from Scss file.

Path: src/assets/scss/utils/typography.scss 
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

You can choose a font style from Google Fonts, and replace the existing link in your project with the one corresponding to your selected font.

To apply the new font, update the font-family in the body selector within the following SCSS file: Path: src/assets/scss/utils/typography.scss 


$font-family-primary: "IBM Plex Sans", sans-serif;

How to change Header Background Color ?

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


.header {
	background: #fff;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	height: 60px;
	}

Typography

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Support

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

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 DreamsEstate!
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

DreamsEstate 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
Bootstrap https://getbootstrap.com/docs/
AOS https://www.npmjs.com/package/aos
Fontawesome https://www.npmjs.com/package/@fortawesome/fontawesome-free
Ngx Bootstrap https://www.npmjs.com/package/ngx-bootstrap
Countup https://www.npmjs.com/package/ngx-countup
Owl Carousel https://www.npmjs.com/package/ngx-owl-carousel-o
Rxjs https://www.npmjs.com/package/rxjs
Angular material https://material.angular.io/
lightbox https://www.npmjs.com/package/ngx-lightbox
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 DreamsEstate.
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