buyTheWay

ENGLISH

⚠️ Note: This project is currently under development. Some sections and functionalities are still in progress.

Introduction

"buyTheWay" is a modern e-commerce application that allows users to shop conveniently and efficiently. With intuitive features and seamless navigation, "buyTheWay" becomes a practical companion for everyday shopping.

Design

You can view the UI design of the page at the following link: buyTheWay Figma Design

Features

• Shopping Experience

  • Users can save desired products to a wishlist and later add them to or remove them from the cart.
  • Users can view recently viewed products.
  • Users are suggested similar products from the same category and gender when available.
  • Users can quickly browse products through the mobile menu.
  • Users can filter products by categories, price, size, etc.
  • Users can search for products.

• User Management:

  • Users can register and log in with a secure password.
  • Authentication is implemented using JWT (JSON Web Token).

• Profile Management:

  • Users can manage their profiles, update information, and save their favorites. 🚧

• Payment Integration:

  • Integration with payment providers like PayPal or Stripe for completing orders. 🚧

• Customer Support:

  • Chat support based on multi-agent systems with ChatGPT. 🚧

Technologies

• Frontend: React
• Backend: Node.js, Express
• Database: MySQL
• State Management: Redux Toolkit
• Styling: Tailwind CSS
• API Type: RESTful API
• Design Tools: Figma

Client-Side Routing

• The application uses React Router to enable fast and user-friendly navigation.

Performance Optimization

• Lazy Loading: Components and resources are loaded as needed to minimize load times. 🚧

SEO and Accessibility

• Lighthouse Score: The application is optimized for SEO, performance, and accessibility. 🚧
• Semantic HTML: For better user experience and accessibility.

Testing and Code Quality

• Unit Tests: Jest for test coverage. 🚧
• Code Style: ESLint and Prettier for consistency.
• Version Control: Git with a clear branching strategy.

Security

• Proxy Server: All API requests are routed through a proxy server before reaching the API server, keeping the direct API address hidden for additional security.
• Data Encryption: Sensitive data such as passwords and authentication tokens are encrypted during transmission and in the database.
• CORS Policies: Strict Cross-Origin Resource Sharing (CORS) policies are implemented to prevent unauthorized requests.

Installation

Frontend

1. Clone the repository:

   git clone [email protected]:barisbalcimusic/buyTheWay-frontend.git

   or

   git clone https://github.com/barisbalcimusic/buyTheWay-frontend.git

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Backend

1. Clone the repository:

   git clone [email protected]:barisbalcimusic/buyTheWay-backend.git

   or

   git clone https://github.com/barisbalcimusic/buyTheWay-backend.git

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

Proxy Server

1. Clone the repository:

   git clone [email protected]:barisbalcimusic/buyTheWay-proxyServer.git

   or

   git clone https://github.com/barisbalcimusic/buyTheWay-proxyServer.git

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

Demo and Screenshots

buyTheWay Live Demo

DEUTSCH

⚠️ Hinweis: Dieses Projekt befindet sich derzeit in der Entwicklung. Einige Abschnitte und Funktionalitäten sind noch in Bearbeitung.

Einleitung

"buyTheWay" ist eine moderne E-Commerce-Anwendung, die es Benutzern ermöglicht, bequem und effizient einzukaufen. Mit intuitiven Funktionen und reibungsloser Navigation wird "buyTheWay" zu einem praktischen Begleiter für den Alltag.

Design

Das UI-Design der Seite können Sie unter folgendem Link ansehen: buyTheWay Figma Design

Funktionen

• Einkaufserlebnis

  • Benutzer können gewünschte Produkte in einer Wunschliste speichern und sie später in den Warenkorb hinzufügen oder löschen.
  • Benutzer können sehen, welche Produkte sie sich zuletzt angesehen haben.
  • Benutzern werden, falls vorhanden, ähnliche Produkte aus der gleichen Kategorie und Geschlecht vorgeschlagen.
  • Benutzer können schnell über das Mobile-Menü durch die Produkte browsen.
  • Benutzer können Produkte nach z.B. Kategorien, Preis, Größe, etc. filtern.
  • Benutzer können Produkte durchsuchen.

• Benutzerverwaltung:

  • Benutzer können sich registrieren und mit einem sicheren Passwort einloggen.
  • Die Authentifizierung erfolgt über JWT (JSON Web Token).

• Profilverwaltung:

  • Benutzer können ihr Profil verwalten, Informationen aktualisieren und ihre Favoriten speichern. 🚧

• Zahlungsintegration:

  • Integration von Zahlungsanbietern wie PayPal oder Stripe, um Bestellungen abzuschließen. 🚧

• Kundendienst:

  • Chat-Support basierend auf Multi-Agent-Systemen mit ChatGPT. 🚧

Technologien

• Frontend: React
• Backend: Node.js, Express
• Datenbank: MySQL
• State Management: Redux Toolkit
• Styling: Tailwind CSS
• API-Typ: RESTful API
• Design-Tools: Figma

Client-Side Routing

• Die Anwendung verwendet React Router, um eine schnelle und benutzerfreundliche Navigation zu ermöglichen.

Performance-Optimierung

• Lazy Loading: Komponenten und Ressourcen werden bei Bedarf geladen, um die Ladezeiten zu minimieren. 🚧

SEO und Barrierefreiheit (Accessibility)

• Lighthouse Score: Die Anwendung wird auf SEO, Performance und Barrierefreiheit optimiert. 🚧
• Semantisches HTML: Für eine bessere Benutzererfahrung und Barrierefreiheit.

Testing und Codequalität

• Unit Tests: Jest für die Testabdeckung. 🚧
• Code Style: ESLint und Prettier für Konsistenz.
• Versionskontrolle: Git mit einer klaren Branch-Strategie.

Sicherheit

• Proxy-Server: Alle API-Anfragen werden über einen Proxy-Server geleitet, bevor sie den API-Server erreichen. Dadurch bleibt die direkte API-Adresse verborgen, was ein zusätzliches Sicherheitsniveau bietet.
• Datenverschlüsselung: Sensible Daten wie Passwörter und Authentifizierungs-Tokens werden sowohl bei der Übertragung als auch in der Datenbank verschlüsselt.
• CORS-Richtlinien: Strikte Cross-Origin Resource Sharing (CORS)-Richtlinien werden implementiert, um unautorisierte Anfragen zu verhindern.

Installation

Frontend

1. Repository klonen:

   git clone [email protected]:barisbalcimusic/buyTheWay-frontend.git

   oder

   git clone https://github.com/barisbalcimusic/buyTheWay-frontend.git

2. Abhängigkeiten installieren:

   npm install

3. Entwicklungsserver starten:

   npm run dev

Backend

1. Repository klonen:

   git clone [email protected]:barisbalcimusic/buyTheWay-backend.git

   oder

   git clone https://github.com/barisbalcimusic/buyTheWay-backend.git

2. Abhängigkeiten installieren:

   npm install

3. Entwicklungsserver starten:

   npm start

Proxy Server

1. Repository klonen:

   git clone [email protected]:barisbalcimusic/buyTheWay-proxyServer.git

   oder

   git clone https://github.com/barisbalcimusic/buyTheWay-proxyServer.git

2. Abhängigkeiten installieren:

   npm install

3. Entwicklungsserver starten:

   npm start

Demo und Screenshots

buyTheWay Live-Demo