paintdrip/pizza-shop-react

🍕 Front-end part of the pizzeria online store. Written in typescript in conjunction with react + redux for storing and using data

🍕 Pizza Shop React 🍕

Frontend part of the pizzeria online store. I did this project during a 30 hour React course. While working on the project, I gained skills in working with hooks and components in ReactJS. Make adaptive layout, create pages, sort, search, paginate, filter, popup windows, etc, interact with the server part, send requests to the backend. develop page navigation without reloading. create a global data store for the entire application using the Redux Toolkit, work with LocalStorage to store site settings, optimize component redraws/renders, code splitting

🛠 Technological Stack:

• ReactJS
• TypeScript
• Redux Toolkit
• React Router v6
• Axios + Fetch
• React Hooks
• Prettier
• SCSS
• React Content Loader
• React Pagination
• Lodash.Debounce
• Code Splitting

An example of a shopping cart page filled with products

An example of an empty cart page (displayed if the user has not selected any pizza)

An example of the search on the main page of the site

An example of a window with a description of a pizza

---

To store pizzas in json format, I used the mockAPI service. Requesting data to load using axios and fetch.

🗄 Links

• React Pagination - https://github.com/AdeleD/react-paginate
• React Content Loader - https://skeletonreact.com/
• React Router - https://reactrouter.com/en/main
• Lodash - https://lodash.com/
• Axios - https://axios-http.com/ru/docs/intro
• QS - https://www.npmjs.com/package/qs
• clsx - https://www.npmjs.com/package/clsx
• ahooks - https://ahooks.js.org/guide
• react-loadable - https://www.npmjs.com/package/react-loadable
• gh-pages - https://www.npmjs.com/package/gh-pages