:: QBoat :: Dashboard

Getting Started

QBoat is carefully well thought UI frame work that is built on top of Bootstrap 5, This part of the doc will help you to quickly start your project and will you a basic idea about how QBoat work.

QBoat is a fully responsive and premium Bootstrap 5 Admin & Dashboard Template. Whether you're creating a Web App, Dashboards, Admin Panels, Project App, Analytics Admin, CRM, or SASS-based interface then you are at the right place to buy QBoat admin dashboard template.

Key Features:

Build with Bootstrap v5.1.3 Gulp Based Workflow Dark and Light Multiple Layouts Fully Responsive Design W3C Validated HTML Pages Light-Weight Code Easy to Customize with SCSS Variables Lifetime Free Updates Unlimited Template Possibilities Authentication & Error Pages

Browser Compatibility:

Chrome (Windows, Mac, Linux) Firefox (Windows, Mac, Linux) Safari (Mac) Microsoft Edge(Letest)

Layout Features:

Light & Dark Modes Monochrome Mode Sidebar menu Style 2 Mini Sidebar toggle Enable Dark! ( Sidebar )

Installation

If you've previously installed gulp globally, run npm rm --global gulp before following these instructions.

Quick start Gulp

Gulp Project setup command

Install node modules using npm npm i
Default gulp default ( dist and watch run in localhost:3000/ )
Serve gulp serve
Dev gulp dev
Dist gulp dist

HTML Quick Start

Open the .html file from one of the above HTML folders inside one of your browsers
That's it, no other configuration needed

This template is also built in Angular and requires Node 14.17.3 and NPM 6.14.13 to be installed.
Angular version 14+ is used to build angular application.
Node.js and NPM: You can download Node.js from NodeJS. NPM comes bundled with Node.js
Angular-CLI: You can install angular-cli by executing following command from your terminal install -g @angular/cli/. More details can be found here Angular-CLI
Project setup: After installing Node, NPM and Angular CLI run npm install command from the root of your project directory into terminal. It will install all the necessary dependencies for the application using package.json file.
Development server: Run ng serve command from project directory and navigate to http://localhost:4200/ into your browser.
Build: Run ng build command from project directory to build the project. The build artifacts will be stored in the dist/ directory.
Further help: To get more help on the angular-cli use ng --help or go check out Angular-CLI.

This template is built in Vue.js and requires Node 14.17.3 and NPM 6.14.13 to be installed.
Vue.js version 3+ is used to build vue application.
Node.js and NPM: You can download Node.js from NodeJS. NPM comes bundled with Node.js
Project setup: After installing Node, NPM and Angular CLI run npm install command from the root of your project directory into terminal. It will install all the necessary dependencies for the application using package.json file.
Development server: Run npm run serve command from project directory and navigate to http://localhost:8080/ into your browser.
Build: Run npm run build command from project directory to build the project. The build artifacts will be stored in the dist/ directory.
Further help To get more help on the Vue.js check out Vue.js documentation.

This template is built in ReactJS and requires Node 14.17.3 and NPM 6.14.13 to be installed.
React version 18+ is used to build React application.
Node.js and NPM: You can download Node.js from NodeJS. NPM comes bundled with Node.js
Project setup: After installing Node, NPM and Angular CLI run npm install command from the root of your project directory into terminal. It will install all the necessary dependencies for the application using package.json file.
Development server: Run ng serve command from project directory and navigate to http://localhost:4200/ into your browser.
Build: Run ng build command from project directory to build the project. The build artifacts will be stored in the dist/ directory.
Further help: To get more help on the project setup, go and check out https://reactjs.org/.

This template is built in Laravel and requires PHP 8, Node 14.17.3 and NPM 6.14.13 to be installed
This template is built on Laravel Boilerplate
Node.js and NPM: You can download Node.js from NodeJS. NPM comes bundled with Node.js
Project Setup: After Installing Node and NPM, run 'num install' command to install npm related dependencies
Environment setup: This package ships with a .env.example file in the root of the project. You must rename this file to just .env (Make sure you have hidden files shown on your system).
Composer: Install composer from https://getcomposer.org/ and run 'composer install' command
Create Database: You must create your database on your server and on your .env file update the following lines:
- DB_CONNECTION=mysql
- DB_HOST=127.0.0.1
- DB_PORT=3306
- DB_DATABASE=homestead
- DB_USERNAME=homestead
- DB_PASSWORD=secret
Change these lines to reflect your new database settings.
Artisan Commands: The first thing we are going to do is set the key that Laravel will use when doing encryption.
run 'php artisan key:generate'
You should see a green message stating your key was successfully generated. As well as you should see the APP_KEY variable in your .env file reflected.
It's time to see if your database credentials are correct.
Migration: We are going to run the built in migrations to create the database tables:
run 'php artisan migrate'
You should see a message for each table migrated, if you don't and see errors, than your credentials are most likely not correct.
We are now going to set the administrator account information. To do this you need to navigate to seed file and change the name/email/password of the Administrator account.
You can delete the other dummy users, but do not delete the administrator account or you will not be able to access the backend.
Now seed the database with: run 'php artisan db:seed'
NPM Run '*': Now that you have the database tables and default rows, you need to build the styles and scripts.
run 'npm run' (generally 'npm run dev' in local)
PHPUnit: After your project is installed, make sure you run the test suite to make sure all of the parts are working correctly. From the root of your project run 'phpunit'
Storage: After your project is installed you must run this command to link your public storage folder for user avatar uploads, run 'php artisan storage:link'
Login: After your project is installed and you can access it in a browser, click the login button on the right of the navigation bar.

The administrator credentials are:

Username: admin@admin.com

Password: secret

You will be automatically redirected to the backend. If you changed these values in the seeder prior, then obviously use the ones you updated to.

Folder Structure

Html
- src
  - Assets
    - bundles
    - css
    - fonts
    - img
    - js
    - scss
      - bootstrap
      - global
      - vendor
      - widgets
      - _bootstrap.scss
      - _global.scss
      - _vendor.scss
      - _widgets.scss
      - style.scss
    - vendor - Third party plugins
  - Docs
  - partials
  - index.html
  - More HTML pages
- node_modules ( NPM dependencies (by default the folder is not included) npm installs dependencies. )
- .gitignore
- gulpfile.js
- package.json
- README.md

Angualr
- scr
  - app
    - admin
      - Dashboard
      - Layout
      - Modalpopup
      - Morelayout
      - Widgets
      - admin-routers.module.ts
      - admin.module.ts
      - admin-routers.module.ts
      - admin.module.ts
    - authentication
    - core
    - data
    - reducers
  - Assets
    - fonts
    - img
    - scss
      - bootstrap
      - global
      - vendor
      - widgets
      - _bootstrap.scss
      - _global.scss
      - _vendor.scss
      - _widgets.scss
      - style.scss
  - index.html
  - main.ts
  - polyfills.ts
  - styles.scss
  - test.ts
- node_modules ( NPM dependencies (by default the folder is not included) npm installs dependencies. )
- angular.json
- karma.conf.js
- package.json
- tsconfig.app.json
- README.md

Vue
- Public
- scr
  - Assets
    - brand
    - fonts
    - icons
    - img
    - scss
      - bootstrap
      - global
      - vendor
      - widgets
      - _bootstrap.scss
      - _global.scss
      - _vendor.scss
      - _widgets.scss
      - style.scss
  - Fonts
  - layouts
    - DefaultLayout.vue
    - MainSidebar.vue
    - SidebarAuth.vue
    - SidebarComponent.vue
    - SidebarV3.vue
    - SidebarV4.vue
  - router
  - Store
  - Views
    - Common
    - Pages
    - Dashboard.vue
  - _nav.js
  - App.vue
  - main.js
- tests
- node_modules ( NPM dependencies (by default the folder is not included) npm installs dependencies. )
- _cypress.json
- babel.config.js
- jest.config.js
- jsconfig.json
- package.json
- README.md
- vue.config.js

React
- Public
- scr
  - assets
    - fonts
    - img
    - scss
  - Component
    - Auth
    - Comman
    - Data
  - Redux
    - Actions
    - Reducers
  - Screen
  - App.js
  - App.js
  - App.test.js
  - index.js
  - logo.svg
  - reportWebVitals.js
  - setupTests.js
  - store.js
- package.json
- node_modules ( NPM dependencies (by default the folder is not included) npm installs dependencies. )
- README.md

laravel
- app - The app directory holds the base code for your Laravel application.
  - Console
  - Domains
  - Exceptions
  - Helpers / Global
  - Http
    - Controllers
      - Backend
      - Frontend
      - Controller.php
      - LocaleController.php
    - Livewire
    - Middleware
    - Requests
    - Kernel
  - Models
  - Providers
  - Rules
  - Services
- bootstrap- The bootstrap directory contains all the bootstrapping scripts used for your application.
- config- The config directory holds all your project configuration files (.config).
- database- The database directory holds your database files.
- public- The public directory helps to start your Laravel project and maintains other necessary files such as JavaScript,CSS, and images of your project.
- resources- The resources directory holds all the Sass files, language (localization) files, templates (if any).
  - js
  - lang
  - sass
  - views
- routes- The routes directory contain all your definition files for routing, such as console.php, api.php, channels.php, etc.
- storage- The storage directory holds your session files, cache, compiled templates as well as miscellaneous files generated by the framework.
- node_modules ( NPM dependencies (by default the folder is not included) npm installs dependencies. )
- _ide_helper.php -package Generation is done based on the files in your project
- composer.json - The PHP Composer can be defined as a dependency manager or dependency management tool specifically built for PHP
- composer.lock - It basically states that your project is locked to those specific versions
- package.json - List of dependencies and npm information
- phpunit.xml - Convenient helper methods allow to expressively test your applications
- server.php - Head to your cli and start the server
- webpack.mix.js - Mix makes it a cinch to compile and minify your application's

Theme Configurations

Theme color scss file path: qboat/src/assets/global/_themes.scss you can change as per your project/client requirements.

Theme light/dark version you can changes in HTML tage data-theme="light", data-theme="dark"

.bg-primary
.bg-accent

.theme-color1
.theme-color2
.theme-color3
.theme-color4
.theme-color5
.theme-color6

<!-- Primary theme colors -->
--primary-rgb: 			91, 196, 58;

--primary-color: 		#5BC43A;
--accent-color: 		#00668b;
--secondary-color: 		#222831;

--theme-color1:	 		#00b864;
--theme-color2: 		#0097aa;
--theme-color3: 		#0084bd;
--theme-color4: 		#004e72;
--theme-color5: 		#96b0b7;
--theme-color6: 		#2f4858;

--primary-gradient: linear-gradient(-45deg, var(--primary-color), var(--secondary-color));

Thank you!

All the important stuff – compiling the source, file structure, build tools, file includes – is documented here, but should you have any questions, always feel free to reach out to pixelwibes@gmail.com

If you really like our work, design, performance and support then please don't forgot to rate us on Themeforest,
it really motivate us to provide something better.

Getting Started
Installation
Folder Structure
Theme Configurations
Helper class
Thank you!

Notifications

No Archive!

Documentation

Getting Started

Key Features:

Browser Compatibility:

Layout Features:

Installation

Gulp Project setup command

HTML Quick Start

Folder Structure

Theme Configurations

Thank you!

Need a Help?

Support at pixelwibes@gmail.com

Total Balance

$2,854.00

BOOM!

Template Setting

Template Site map url

Notifications

No Archive!

Documentation

Getting Started

Key Features:

Browser Compatibility:

Layout Features:

Installation

Gulp Project setup command

HTML Quick Start

Folder Structure

Theme Configurations

Thank you!

QBoat

Amazing Features

Need a Help?

Support at pixelwibes@gmail.com

Total Balance

$2,854.00

BOOM!

Template Setting

Template Site map url