Documentation

Zapolo App & Software React Template

Zapolo

Zapolo App & Software React Template

Thank you for purchasing this React template.

If you like this template, Please support us by rating this template with 5 stars

Package Installation & Setup -

1.- Install npm

It will create 'node_module' folder in this all dependency files will be install with this command. npm install

npm install

2.- Run Project

With is command file will be compiled and it will be loaded on local server `http://localhost:5173/`. npm run dev

npm run dev

3.- Production Build

You may run npm run build command to build the app. 

npm run build

4.- Testing the App Locally

Once you've built the app, you may test it locally by running npm run preview command 

 npm run preview

5.- Deploying your site

For More details Click

6.- Note:

To get more help on the TypeScript checkout TypeScript

To get more help on the Vite checkout Vite

7.- Further help

You can learn more in the Create React TypeScript Application Documentation To learn TypeScript, check out the TypeScript Documentation.

Folder Directories -

  • assets

    This folder contains all the assets of Zapolo template.

  • elements

    This folder contains all the elements files of Zapolo template.

  • pages

    This folder has all pages for various template features.

  • router

    This folder have Index.tsx file which have all router path of template

  • images

    This folder has all images form used in the template.

  • css

    Css file

Folder Structure

  • public
  • src
    • assets
      • css
      • icons
      • scss
      • images
      • vendor
    • elements
    • pages
      • Home.tsx
      • Index2.tsx
      • Index3.tsx
      • Aboutus.js
      • ....
    • router
      • Index.tsx
    • App.tsx
    • main.tsx
  • index.html
  • package-lock.json
  • package.json
  • tsconfig.json
  • vite.config.ts

Credits -

Theme Features -

Color Theme

Choosing a color theme for a website is an important part of creating a visually appealing and effective design. Here are many color option available, you can choose a color theme for your website.

<body data-color="color_1">
  • Color 1
  • Color 2
  • Color 3
  • Color 4
Layout

The layout of a website refers to the way in which content and design elements are arranged on each page of the site. A well-designed layout can help to make a website more visually appealing, easy to navigate, and engaging for users. Here two layouts are available-

<body id="bg" class="boxed">

<body id="bg" class="frame">
Header

The header of a website is the top section of the site that appears on every page. It typically includes the website logo, navigation menu, and sometimes additional elements such as a search bar, social media icons, or a call to action. Here we used fixed and sticky header in our website-

Header Fixed is-fixed

<div class="sticky-header main-bar-wraper navbar-expand-lg is-fixed">

Header Static sticky-no

<div class="sticky-header main-bar-wraper navbar-expand-lg">
Background Color

The background color of a website is an important aspect of its overall design. It sets the tone for the site and can have a significant impact on user experience. You can use body background color like this but it will work only in boxed and frame layout

<body id="bg" class="frame" style="background-color: rgb(254, 76, 28);">
Background Image

Using a background image on a website can add visual interest and personality to the design. You can use body background image like this but it will work only in boxed and frame layout

<body id="bg" class="boxed" style="background-image: url("images/background/bg1.jpg");">

<body id="bg" class="frame" style="background-image: url("images/background/bg1.jpg");">

Project Main Features -

  • ReactJS v18.2.0
  • Vite v5.2.0
  • TypeScript v5.2.2
  • Node.js v20.11.1
  • npm v10.2.4
  • 3 Home Page
  • Fully Responsive
  • Detailed Documentation
  • Slider
  • Contact Us
  • Light Gallery
  • Under Maintenance
  • Coming Soon Page
  • Error 404
  • Blog Page
  • Pricing
  • Faq
  • Modal Video
  • Team Page
  • Services
  • Router

main.tsx Structure

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>     
       <App />     
   </React.StrictMode>
);

Create a Page

import React from 'react'
const Demo = () => {
 return (
  <div>demo</div>
 )
}
export default Demo;

Do You Need Help To Customization

After Purchase A Template...

You Will Start Customizing According Your Requirement
BUT What If You Don't Know

SOLUTION IS HIRE DexignZone

Hire Same Team For Quality Customization

  • We Will Customize Template According To Your Requirement
  • We Will Upload On Server And Make Sure Your Website is Live
rahulxarma Dexignzone@Gmail.Com

Version History - #back to top

05 April 2024

  • New - Created & Upload Zapolo