Pizza Ordering Site

Table of Contents

• Overview
• About the Project
• Screenshot
• Links
• My Process
• Built With
• Continued Development
• Useful Resources
• Author

Overview

This project serves as a pizza ordering web application, a solution for a local Italian restaurant that I thought it would help their business shine as much as how much their food tastes.

About the Project

I utilized React along with various libraries to create a user-friendly pizza ordering system. The application showcases a robust user interface with intuitive design elements, prioritizing accessibility tags for better user experience. Additionally, it implements a secure payment gateway using Stripe for seamless transactions. The entire codebase is version-controlled via Git, showcasing efficient collaboration and code management practices.

Screenshot

Links

• Live Site URL: Live Site

My Process

Crafting this pizza ordering platform was a journey of weaving modern technologies into a seamless user experience. Fuelled by Vite and empowered by React, I sculpted an interface that blended style and functionality using CSS.

Guided by meticulous attention to detail, I orchestrated state management with Redux and Redux Persist, ensuring a consistent experience across sessions. Elevating transitions to an art form, Framer Motion added captivating animations between routes, engaging users at every click.

Enabling seamless transactions, Stripe facilitated secure online payments, fostering trust and reliability. Embracing inclusivity, the platform speaks multiple languages - English, French, and Italian - thanks to the power of i18next.

Built With

• Framer for animation
• CSS custom properties
• React - JS library
• Redux - for state management
• Firebase - for auth
• Node js for backend support
• Stripe - for secure payments

Continued Development

To do🔧:

• Enhance responsive design for mobile users
• Add pay on delivery feature
• Add reviews from clients

Useful Resources

• Framer Motion Documentation - Resources for integrating Framer in the project.
• Firebase Documentation - Resources for integrating Firebase in the project.
• Stripe Documentation - Guides for integrating Stripe payment system.
• i18next Documentation - Official documentation for i18next library.

Author

• Website: Khaled Ben Yahya
• Twitter: @khaledbenyahya_