Koki
Koki - React (Vite) Restaurant Food Admin Template
This documentation is last updated on 05 Oct 2024
Thank you for purchasing this React template.
Installation -
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:3000`.
npm start
npm start
3.- Production Build
Builds the app for production to the `build` folder. Run the following command in your terminal npm run build
npm run build
4.- Note
To get more help on the React.js checkout React
5.- Further help
You can learn more in the Create React App Documentation To learn React, check out the React Documentation.
Sass Compile -
1.- Install Sass
Sass is an NPM package that compiles Sass to CSS (which it does very quickly too). To install node-sass run the following command in your terminal: npm add -D sass
npm add -D sass
2.- Write sass Command
Everything is ready to write a small script in order to compile Sass. Open the package.json file in a code editor. You will see something like this:
In the scripts section add an scss command
"scripts": {
"sass": "sass --watch src/assets/scss/main.scss src/assets/css/style.css"
},
3.- Run the Script
To execute our one-line script, we need to run the following command in the terminal: npm run sass
npm run sass
Folder Directories -
- public
- favicon.ico
- src
- assets
- css
- icons
- avasta
- feather
- flaticon
- font-awesome-old
- helveticaNeue
- icomoon
- line-awesome
- material-design-iconic-font
- simple-line-icons
- themify-icons
- images
- avatar
- big
- browser
- card
- contact
- demo
- pattern
- product
- profile
- tab
- table
- scss
- abstracts
- base
- components
- app
- charts
- forms
- ico
- map
- tables
- uc
- ui
- widget
- layout
- footer
- header
- rtl
- sidebar
- theme
- typography
- version-dark
- version-transparent
- pages
- main.scss
- context
- ThemeContext.js
- jsx
- components
- AppsMenu
- bootstrap
- charts
- chatBox
- Dashboard
- Forms
- PluginsMenu
- table
- layouts
- nav
- Header.jsx
- NavHader.jsx
- SideBar.jsx
- ChatBox
- EventSidebar.jsx
- Footer.jsx
- PageTitle.jsx
- Setting.jsx
- nav
- pages
- Error400.jsx
- Error403.jsx
- Error404.jsx
- Error500.jsx
- Error503.jsx
- LockScreen.jsx
- Login.jsx
- Registration.jsx
- Widget.jsx
- index.jsx
- components
- services
- AuthService.jsx
- AxiosInstance.jsx
- PostsService.jsx
- store
- actions
- reducers
- selectors
- store.js
- App.jsx
- main.jsx
- assets
- index.html
- package-lock.json
- package.json
- vite.config.js
Credits -
-
Vite v5.2.0
-
Node V20.10.0
-
Redux
-
Google fonts are used in the template.
-
Font Awesome
-
All Images are used
-
Bootstrap
-
Datatables
-
React Table
-
Full Calendar
-
Sparkline
-
Chartjs
-
Apexchart
-
Sweet Alert
-
Light Gallery
-
CkEdito
-
Uc Select2
-
Chatbox
-
Router
Project Main Features -
- Vite v5.2.0
- React 18+
- Bootstrap
- Fully Responsive
- Ready to used widget
- Detailed Documentation
- Attractive Calendar
- Invoice
- Redux
- User Profile
- Timeline
- CkEditor
- Form Examples
- Many Charts Options
- Form Validation
- Input Slider
- Built in SASS
- Advanced Form Elements
- Form Wizard
- Social
- Datatable
- Table Sorting
- React Table
- Date Picker
- Sweetalert
- Toaster
- Light Gallery
- Scroll
- Chatbox
- Router
- Bootstrap
Index.js Structure
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from 'react-router-dom';
import {Provider} from 'react-redux';
import {store} from './store/store';
import ThemeContext from "./context/ThemeContext";
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<Provider store = {store}>
<BrowserRouter basename='/'>
<ThemeContext>
<App />
</ThemeContext>
</BrowserRouter>
</Provider>
</React.StrictMode>,
)
Create a Page
import React from "react";
export function MyPage() {
return(
<h1>Hello!</h1>
)
}
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
- In Order To Ensure Your Website Is Live, We Will Customize
The Template According To Your Requirements And Upload It to the Server.