Boost your restaurant's online presence with a sleek, fully responsive React.js template. Designed for seamless food ordering and optimized for user experience, this template is the perfect choice for your culinary business.
Preview our pages and access documentation
Welcome to the Reshto Restaurant & Food Ordering Template documentation. This guide is designed to help you navigate and make the most of our thoughtfully crafted template. Whether you’re setting up your restaurant website or customizing its features, this document provides all the essential information to ensure a seamless experience. Here are some key highlights of the template.
Seamless online food ordering with real-time updates
Easy online table booking with instant confirmation
Fully responsive design for all devices
reshto_react-js/
├── public/
├── src/
│ ├── Components/
│ │ ├── Layout/
│ │ ├── Sections/
│ │ └── ui/
│ ├── contexts/
│ ├── data/
│ ├── images/
│ │ ├── blog/
│ │ ├── dish-img/
│ │ └── food/
│ ├── pages/
│ ├── scss/
│ │ ├── Components/
│ │ └── Layout/
│ ├── App.js
│ ├── App.css
│ ├── index.js
│ └── index.scss
├── .gitignore
├── package.json
└── README.mdContains all React components organized by feature and UI elements
React context providers for state management
Page components for different routes
SCSS styles and variables for the application
npm installnpm startHere are the key dependencies and their versions used in this project:
| Package | Version | Description |
|---|---|---|
react |
^18.3.1 | Core React library for building user interfaces |
react-dom |
^18.3.1 | React DOM rendering for web applications |
react-router-dom |
^6.21.2 | Routing library for React applications |
bootstrap |
^5.3.7 | CSS framework for responsive layouts |
react-bootstrap |
^2.10.10 | React components built on top of Bootstrap |
sass |
^1.86.3 | CSS preprocessor for advanced styling |
framer-motion |
^12.23.12 | Animation library for React |
@mdi/react |
^1.6.1 | Material Design Icons for React |
react-datetime-picker |
^6.0.1 | Date and time picker component |
remixicon |
^4.6.0 | Remix Icon library |
swiper |
^10.3.1 | Modern mobile touch slider |
Sections/ - Reusable page sections like Hero, Menu, About
Layout/ - Common layouts and navigation components
ui/ - Reusable UI components like buttons, cards, and forms
Menu/ - Food menu and categories
Reservation/ - Table booking system
Contact/ - Contact information and form
Customize your theme colors by editing the SCSS variables file.
// In src/scss/_variables.scss
// Base Colors
$blue: #1252AE;
$indigo: #6610f2;
$purple: #6f42c1;
$pink: #d63384;
$red: #f33756;
$orange: #fd7e14;
$yellow: #f3c037;
$green: #4CB6AA;
$teal: #20c997;
$cyan: #0dcaf0;Customize typography by updating font imports and variables.
// In src/scss/_variables.scss
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,200..1000;1,200..1000&display=swap');We offer 6 months of support for any questions or issues you may encounter.
Discover the powerful technologies and tools that make our platform exceptional
Dynamic UI Library
Responsive Framework
React Components
Smooth Animations
Smart Styling
Web Structure
Modern Styling
Mobile Friendly
Web Typography
Vector Graphics
Clean Aesthetics
Flexible Components
Optimized Structure
Clear Guides
Always Available
Copyright © Reshto. All Rights Reserved. Crafted with ❤