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
Credits -
-
react bootstrap
-
email js
-
react count up
-
react modal video
-
react lightgallery
-
react-responsive-masonry
-
swiper
-
react rsuite
-
react-hot-toast
-
react-router-dom
-
react-lottie-player
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">
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
Our Products -
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