Welcome to React Pizza! This is a React-based frontend application that interacts with a backend API to provide users with a seamless pizza ordering experience. The project allows users to browse pizzas, customise their orders, manage their shopping cart, and view detailed information about each pizza.
You can access the live app here:
React Pizza - Live Version
- Pizza Listing: Displays a list of all available pizzas with customisable options.
- Customisation: Enables users to select pizza size and crust type before adding to the cart.
- Detailed Pizza Information: Provides a dedicated page for viewing detailed information about each pizza.
- Search Functionality: Users can search for specific pizzas by name.
- Category Filtering: Filter pizzas by categories such as Meat, Vegetarian, Spicy, etc.
- Sorting Optionst: Sort pizzas by popularity, price, or alphabetically.
- Shopping Cart: Allows users to add, remove, or adjust quantities of pizzas in their cart.
- Empty Cart Handling: Displays a friendly message when the cart is empty.
- Error Handling: Provides feedback to users in case of errors during data fetching or form submission.
Before running the project locally, ensure that you have the following installed:
- Node.js (>= 14.x) 🟢
- npm (Node Package Manager) 📦
To get the frontend up and running, follow these steps:
Clone the repository to your local machine:
git clone https://github.com/erascu/react-pizza-v2.gitNavigate to the project directory and install the required dependencies:
cd react-pizza-v2
npm installTo run the application locally, start the development server:
npm run dev- React for building the UI components.
- React Router for handling routing and navigation.
- Redux Toolkit for state management.
- Axios for making API requests.
- Vite for fast and modern build tools.
- SASS for styling with SCSS syntax.
- TypeScript for static typing in JavaScript.
- lodash.debounce for debouncing input events (e.g., search functionality).
- react-content-loader for skeleton loading placeholders.
- dotenv for managing environment variables.
- ESLint for linting and code quality checks.
The app is deployed and can be accessed live. You can deploy it on services like Netlify, Vercel, or any other platform that supports React applications.
This project was created for practice and to learn new techniques in modern web development. It demonstrates proficiency in React, Redux, TypeScript, and various modern development practices.