The Online Food Shop - Pizza App is a React-based project designed to simulate an online food ordering system for pizzas. It serves as a practical exercise to enhance proficiency in React, Redux, and Redux Toolkit while creating an interactive user interface. The application fetches fake data using Axios from a JSON Server and utilizes various tools and technologies to deliver a seamless experience.
online-food-shop.mp4
The project incorporates several tools and packages, including:
- Node.js v18.16.1
- Yarn v1.22.19
- React v18.2.0
- Redux v4.2.1
- Redux Toolkit v1.9.5
- Axios v1.4.0
- JSON Server v0.17.3
Additional packages utilized in this project include:
- React Redux v8.1.1
- Redux Logger v3.0.6
- Redux Thunk v2.4.2
- Swiper v9.4.1
- React Icons v4.9.0
- Web Vitals v2.1.0
The Online Food Shop - Pizza App includes the following features:
- Browse and Add to Cart: Users can explore the menu and add desired pizza items to the cart.
- Adjust Quantity: Users have the flexibility to increase or decrease the number of pizza items in the cart.
- Remove from Cart: Users can remove specific pizza items from the cart altogether.
To run the application locally, follow these steps:
- Start the JSON Server by running
yarn json-server
in your terminal. - Once the JSON Server is running, start the development server by running
yarn start
in a separate terminal. - Access the application in your web browser at
http://localhost:3000
. - Browse the menu, add pizzas to the cart, and manipulate the cart items as desired.
Please ensure that you start the JSON Server before starting the development server to ensure proper data availability.
The WebService.js
module is responsible for interacting with the server using Axios. It creates an Axios instance with the base URL of 'http://localhost:3001'
and provides the following methods:
GetMenuData()
: Retrieves an array of menu data containing information about each item in the menu, such as names, prices, descriptions, etc.GetCartOrders()
: Retrieves all orders in the user's cart (cart items).GetMenuProductById(id)
: Retrieves a menu product by itsid
.IncreaseOrderQuantity(id)
: Increases the quantity of the order in the cart specified by itsid
.DecreaseOrderQuantity(id)
: Decreases the quantity of the order in the cart specified by itsid
.RemoveOrderFromCart(id)
: Removes an order from the cart specified by itsid
.AddOrderToCart(id)
: Adds an order to the cart specified by itsid
.
The cartSlice.js
file manages the state of the shopping cart. It includes reducer functions for adding, removing, increasing, decreasing quantities, and clearing the cart. The initial state consists of an array of cartOrders
(cart items) and a total
value.
Feedback, suggestions, and contributions to this project are highly appreciated. If you encounter any issues or have ideas to enhance the application, please feel free to open an issue or submit a pull request on the GitHub repository.