Pizza Maggiore

Live project Code on GitHub

Pizza Maggiore is a single-page E-Commerce application built with:

- TypeScript

- React (Hooks: useState, useEffect, useCallback, useRef)

- Redux (Redux Toolkit: useSelector, useDispatch)

- React Router (Routes, Route, useParams, Link, useNavigate)

- AJAX (AXIOS with async/await and try/catch/finally)

- SASS (Modules)

- HTML

- Testing: Jest

- Rerender optimization ( React.Suspense, React.lazy, React.memo, dynamic import, Why-did-you-update, Profiler, etc)

- Mock Server: mockapi.io

The functionality of the app includes:
- User can add pizzas to the cart.
- Price and quantity are shown in the header, cart, and item info.
- User can see detailed information about products.
- The app generates a query with search parameters in the browser search field, enabling users to share the link with found products.
- Unpaid products are saved in the local storage.
- And more.

Development

To enhance code predictability and minimize bugs during the development process, I have chosen for TypeScript. TypeScript brings strong typing and static analysis to the codebase, improving overall code quality and catching potential errors early on.

For effective state management, I integrated Redux into the application. To reduce the amount of boilerplate code required, I utilized Redux Toolkit. It provides convenient abstractions and simplifies the process of defining actions, reducers, and store setup.

During the development process, I leveraged Redux DevTools to test and inspect the application's state. This tool allowed me to monitor and debug the state changes, ensuring that the application behaved as intended and enabling a smooth development experience.