Giter Club home page Giter Club logo

e-commerce-product-management's Introduction

Project Documentation

Project Overview

This project is an e-commerce application that includes both backend and frontend components. The backend is implemented in Java using Spring Boot, while the frontend is developed using React with TypeScript.

Architecture Diagram

The architecture of this project is a standard multi-tier architecture with the following components:

  • Frontend: React application interacting with the backend services via REST APIs.

  • Backend: Spring Boot application exposing REST APIs, interacting with the database, and handling business logic.

  • Database: A relational database storing application data.

  • Redis: Used for caching and managing basket data.

    architectureDiagram

Backend Components

Package Structure

  • config: Configuration classes for CORS, Security, and other application settings.
  • controller: REST controllers handling HTTP requests and responses.
  • entity: JPA entities representing the database tables.
  • exceptions: Custom exception handlers and definitions.
  • health: Health check indicators.
  • mapper: Mapper classes for transforming data between different layers.
  • model: Data Transfer Objects (DTOs) and response models.
  • repository: Spring Data JPA repositories for database operations.
  • security: Security-related classes such as filters and entry points.
  • service: Service layer containing business logic and service implementations.

Frontend Components

Package Structure

  • api: Contains files related to API interactions, such as agent.ts and basketService.ts.
  • errors: Components for error handling, such as NotFoundError.tsx and ServerError.tsx.
  • layout: Layout components including the main App.tsx, Header.tsx, and other UI elements like Spinner.tsx.
  • models: TypeScript model definitions for various entities such as basket.ts, brand.ts, order.ts, product.ts, type.ts, and user.ts.
  • router: Routing components including RequireAuth.tsx and Routes.tsx.
  • store: Redux store configuration file configureStore.ts.
  • util: Utility functions and helpers in util.ts.
  • features:
    • account: Components and Redux slices related to user account management, such as accountSlice.ts, RegisterPage.tsx, and SignInPage.tsx.
    • basket: Components and Redux slices related to the shopping basket, such as BasketPage.tsx, basketSlice.ts, and BasketSummary.tsx.
    • catalog: Components for displaying and managing the product catalog, including Catalog.tsx, ProductCard.tsx, ProductDetails.tsx, and ProductList.tsx.
    • checkout: Components for the checkout process, such as AddressForm.tsx, CheckoutPage.tsx, PaymentForm.tsx, Review.tsx, and ValidationRules.ts.
    • contact: Contact page component ContactPage.tsx.
    • home: Home page component HomePage.tsx.
    • orders: Order-related components like Order.tsx.

Key Components

  • App.tsx: Main application component.
  • Header.tsx: Header component for navigation and branding.
  • BasketPage.tsx: Component for displaying the user's basket.
  • Catalog.tsx: Component for displaying the product catalog.
  • ProductDetails.tsx: Component for displaying detailed information about a product.
  • CheckoutPage.tsx: Component for handling the checkout process.
  • SignInPage.tsx: Component for user authentication.
  • RegisterPage.tsx: Component for user registration.

Getting Started

Prerequisites

  • Java 21+
  • Node.js 20+
  • Docker

Docker Setup

  1. Ensure Docker is installed and running.
  2. Navigate to the docker directory.
  3. Start the services:
    docker-compose up -d

Running the Backend

  1. Navigate to the backend directory.
  2. Run the application using your IDE or execute:
./mvnw spring-boot:run

Running the Frontend

  1. Navigate to the frontend directory.
  2. Install dependencies:
    npm install
  3. Start the development server:
    npm start

e-commerce-product-management's People

Contributors

elisha1995 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.