Documentation

Swigo - Fast Food And Restaurant ReactJs Template

Swigo

Swigo - Fast Food And Restaurant ReactJs 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 Swigo template.

  • component

    This folder component files for various template features.

  • elements

    This folder contains all the elements files of Swigo template.

  • pages

    This folder has all pages for various template features.

  • context

    This folder has all context api used in the template.

  • images

    This folder has all images form used in the template.

  • css

    Css file



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 so 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
  • Color 5
  • Color 6
  • Color 7
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="main-bar-wraper navbar-expand-lg sticky-header is-fixed">

Header Static sticky-no

<div class="main-bar-wraper navbar-expand-lg sticky-no">
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(255, 175, 41);">
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/switcher/background/bg1.jpg");">
<body id="bg" class="frame" style="background-image: url("images/switcher/background/bg1.jpg");">

Project Main Features -

  • ReactJS v18.2.15
  • Vite v5.0.9
  • TypeScript v5.2.2
  • Fully Responsive
  • Detailed Documentation
  • Slider
  • Contact Us
  • Advanced Elements
  • Under Maintenance
  • Coming Soon Page
  • Error 404
  • Scroll
  • Key Feature
  • Blog Page
  • Faq
  • Menu Style
  • Team Page
  • Shop Page
  • Services
  • Router

main.tsx Structure

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import { AppContextProvider } from "./context/contextApi.tsx";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
     <AppContextProvider>
       <App />
     </AppContextProvider>
   </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

Version History - #back to top

02 January 2024

  • New - Created & Upload Swigo