🇬🇧 English Version

Pet Store Web Application

Project Overview

This is a modern online pet store web application designed to provide users with an intuitive shopping experience. The app features product filtering, a shopping cart, order forms, and handles common web states like 404 Not Found pages. The interface matches detailed designs created in Figma.

Project Goal

To deliver a full-featured web app with multiple pages and interactive elements, connected seamlessly to a backend API.

Live Demo

Note: The backend may take a few seconds to wake up on the first request, as it's hosted on a free service. Please be patient if the page takes a moment to load. https://pet-shop-project-opal.vercel.app

Features

• Product filtering
• Shopping cart functionality
• Handling of 404 Not Found pages
• Backend API integration

Technologies Used

• React
• Redux Toolkit
• React Router DOM
• Axios
• Vite
• Material UI (MUI)
• Sequelize & SQLite (backend)
• Node.js & Express (backend)

Structure

The project consists of two main parts:

• Frontend: React-based user interface
• Backend: REST API for managing categories, products, and orders

---

🇩🇪 Deutsche Version

Pet Store Webanwendung

Projektübersicht

Dies ist eine moderne Webanwendung für einen Online-Shop für Haustierprodukte, die den Nutzern ein intuitives Einkaufserlebnis bietet. Die App verfügt über Produktfilterung, einen Warenkorb, Bestellformulare und behandelt gängige Webzustände wie 404-Fehlerseiten. Die Oberfläche entspricht detaillierten Designs, die in Figma erstellt wurden.

Projektziel

Bereitstellung einer voll funktionsfähigen Webanwendung mit mehreren Seiten und interaktiven Elementen, die nahtlos mit einer Backend-API verbunden ist.

Live Demo

Hinweis: Das Backend benötigt bei der ersten Anfrage eventuell ein paar Sekunden zum Starten, da es auf einem kostenlosen Dienst gehostet wird. Bitte habe etwas Geduld, falls die Seite kurz zum Laden braucht. https://pet-shop-project-opal.vercel.app

Funktionen

• Produktfilterung
• Warenkorbfunktionalität
• Umgang mit 404-Fehlerseiten
• Integration mit Backend-API

Verwendete Technologien

• React
• Redux Toolkit
• React Router DOM
• Axios
• Vite
• Material UI (MUI)
• Sequelize & SQLite (Backend)
• Node.js & Express (Backend)

Struktur

Das Projekt besteht aus zwei Hauptteilen:

• Frontend: React-basierte Benutzeroberfläche
• Backend: REST API zur Verwaltung von Kategorien, Produkten und Bestellungen