Introduction

The frontend of The Hub E-Commerce Platform is more than just a user interface — it is the first impression your customers will have of your store. In today’s digital economy, speed, reliability, and usability define whether a user stays or leaves. That’s why the project embraces Angular 16 as the framework of choice.

Angular offers a component-driven architecture that scales gracefully from small shops to enterprise-level e-commerce platforms. It enforces consistency, improves maintainability, and comes with built-in solutions for routing, forms, and state management. Instead of reinventing the wheel, you build on a framework trusted by Google and developers worldwide.

Choosing Angular also means you can deliver a seamless user experience across desktop and mobile. With features like Ahead-of-Time compilation, lazy loading, and reactive forms, your storefront is optimized for performance from day one. Combined with the backend’s Spring Boot services, Angular transforms this project into a truly end-to-end, enterprise-ready e-commerce solution.

System Requirements

The following requirements apply specifically to the Angular frontend of The Hub E-Commerce Platform. These ensure smooth installation, builds, and development.

Note: These requirements apply only to the Angular frontend. Running the full platform also requires backend prerequisites such as Java 17 JDK, MySQL and optionally Docker. Refer to the backend setup guide for details.

Running

1. Install the modules npm install

Navigate to the hub frontend directory in your terminal (CTRL + ` in VsCode)

cd /home/user/hub/hub-ecommerce-frontend

npm install

Wait for the packages to install

2. Run the application

npm start

In your favorite browser, navigate to the following URL: http://localhost:4200

Branding & Customization

The Hub E-Commerce Platform is white-label, meaning you can easily apply your own branding, currency, and policies. Below is a guide to help you update the most common elements developers usually customize.

1. Currency Display

By default, prices are displayed in EUR (€). Update the Angular templates listed below to change currency formatting:

Example of changing currency from EUR to USD:

{{ product.price | currency:'USD':'symbol':'1.2-2' }}

2. Terms of Service

Update your store’s policies directly in the Terms of Service component:

src/app/components/policies/terms-of-service/terms-of-service.component.html

Edit line 12 to insert your own Terms of Service text.

3. Product Info Component

For logic changes related to product details, check:

src/app/modules/product-info/product-info/product-info.component.ts

Line 118 handles customizable product logic.

4. Product Creation (Admin)

To customize product creation fields in the admin panel, edit:

src/app/admin/catalog/product/product-create/product-create.component.html

Line 97 is where product form customization can be applied.

Codebase Map

The following table provides a quick overview of where key pages, components, and services are located in the Hub E-Commerce Angular Frontend codebase. This helps developers quickly navigate and customize different parts of the application.