https://github.com/himanshuraj98/foodapp
Discover a feature-rich food website powered by React, Redux, and React Router. Explore a diverse culinary world with seamless category navigation, cart management, and efficient search functionality.
https://github.com/himanshuraj98/foodapp
api client-server reactjs redux-toolkit tailwindcss toaster vite
Last synced: about 2 months ago
JSON representation
Discover a feature-rich food website powered by React, Redux, and React Router. Explore a diverse culinary world with seamless category navigation, cart management, and efficient search functionality.
- Host: GitHub
- URL: https://github.com/himanshuraj98/foodapp
- Owner: HimanshuRaj98
- Created: 2023-09-07T05:23:10.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-12T21:52:57.000Z (over 2 years ago)
- Last Synced: 2025-07-20T19:40:26.794Z (11 months ago)
- Topics: api, client-server, reactjs, redux-toolkit, tailwindcss, toaster, vite
- Language: JavaScript
- Homepage:
- Size: 234 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# FoodApp
## Description
This is a React-based food website project that allows users to browse and access various food-related content. The project includes features such as browsing different categories, adding items to a cart, and performing searches.
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Project Structure](#project-structure)
- [Redux Store](#redux-store)
- [Contributing](#contributing)
- [License](#license)
## Installation
1. Clone the repository to your local machine:
2. Navigate to the project directory:
3. Install dependencies using npm or yarn:
4. Start the development server:
The website should now be accessible at [http://localhost:5173](http://localhost:5173).
## Usage
Describe how to use your food website. Provide any necessary information for users, including how to navigate the site, browse categories, add items to the cart, and perform searches. You can also include screenshots or GIFs to demonstrate the user experience.
## Project Structure
Explain the structure of your project's codebase. Provide an overview of the main directories and files, and their purposes.
- `/src`: Contains the source code of the React application.
- `/pages`: Contains React components for different pages (e.g., Home, Access, Error).
- `/components`: Contains reusable React components, including the ProtectedRoute component.
- `/slices`: Contains Redux slices for managing cart, category, and search state.
- `/assets`: Contains public assets (e.g., images, icons).
- `/redux`: Contains the Redux store configuration.
## Redux Store
Explain how your Redux store is configured and how it is used in the project. Mention the purpose of each Redux slice (e.g., CardSlice, CategorySlice, SearchSlice) and how they interact with the application.
```javascript
// Example code for accessing Redux store in a component:
import { useSelector, useDispatch } from 'react-redux';
const MyComponent = () => {
const cart = useSelector(state => state.cart);
const dispatch = useDispatch();
// My Component
};
```
## Contributing
### If you would like to contribute to this project, please follow these steps:
- Fork the repository.
- Create a new branch for your feature or bug fix.
- Make your changes and commit them.
- Push your changes to your fork.
- Submit a pull request to the original repository.