Introduction

Project Overview

OnMarket Landing is a comprehensive Angular-based e-commerce marketplace application. It provides a full-featured online shopping platform with product browsing, cart management, checkout, user profiles, affiliate program, and real-time chat functionality.

Key Capabilities

Technology Stack

Core Framework

UI/UX Libraries

Additional Libraries

Development Tools

Installation and setup

Prerequisites

Before you begin, ensure you have the following installed:

Installation & Setup

1. Clone the Repository

git clone https://github.com/ondeliveroper/on-market-landing.git
cd on-market-landing

2. Install Dependencies

npm install

3. Environment Configuration

The application uses environment files located in src/environments/:

4. Start Development Server

npm start
# or for Windows
npm run startWindows

The application will be available at http://localhost:4200/

Note: The start script uses NODE_OPTIONS='--openssl-legacy-provider' due to OpenSSL compatibility with Angular 12.

Project structure

on-market-landing/
├── e2e/                          # End-to-end tests
├── src/
│   ├── app/
│   │   ├── components/           # All UI components
│   │   │   ├── accounts/         # Login, signup, profile
│   │   │   ├── affiliate/        # Affiliate program
│   │   │   ├── all-bills/        # Bill payment features
│   │   │   ├── cart/             # Shopping cart
│   │   │   ├── checkout/         # Checkout process
│   │   │   ├── homepage/         # Home page
│   │   │   ├── personal-store/   # Store management
│   │   │   ├── product-details/  # Product detail pages
│   │   │   ├── search-result/    # Search functionality
│   │   │   └── ...               # Other components
│   │   ├── interceptors/         # HTTP interceptors
│   │   │   └── auth.interceptor.ts
│   │   ├── interfaces/           # TypeScript interfaces
│   │   │   ├── affiliate.ts
│   │   │   ├── balance.ts
│   │   │   ├── bank.ts
│   │   │   ├── products.ts
│   │   │   └── user.ts
│   │   ├── pipes/                # Custom pipes
│   │   │   ├── phone-number.pipe.ts
│   │   │   ├── short-number-pipe.pipe.ts
│   │   │   ├── time-ago.pipe.ts
│   │   │   └── transform-city.pipe.ts
│   │   ├── services/             # Business logic services
│   │   │   └── affiliate.service.ts
│   │   ├── themes/               # Multiple theme layouts
│   │   │   ├── theme-one/
│   │   │   ├── theme-two/
│   │   │   └── ...
│   │   ├── api.service.ts        # Main API service
│   │   ├── app-routing.module.ts # Route definitions
│   │   ├── app.component.ts      # Root component
│   │   ├── app.module.ts         # Main module
│   │   ├── auth.guard.ts         # Route authentication
│   │   ├── demo-material-module.ts # Material imports
│   │   ├── logger.service.ts     # Logging service
│   │   ├── sockets.service.ts    # WebSocket service
│   │   └── utility.service.ts    # Utility functions
│   ├── assets/                   # Static assets
│   │   ├── css/                  # Stylesheets
│   │   ├── images/               # Images
│   │   └── ...
│   ├── environments/             # Environment configs
│   │   ├── environment.ts
│   │   └── environment.prod.ts
│   ├── custom-theme.scss         # Material theme
│   ├── styles.scss               # Global styles
│   └── index.html                # Main HTML file
├── angular.json                  # Angular configuration
├── package.json                  # Dependencies
├── tsconfig.json                 # TypeScript configuration
├── tslint.json                   # Linting rules
└── karma.conf.js                 # Test configuration

Key Directories Explained

/src/app/components/

Contains all UI components organized by feature:

/src/app/services/

Business logic and reusable services:

/src/app/interceptors/

HTTP interceptors for:

Core features

1. E-Commerce Functionality

2. User Management

3. Affiliate Program

4. Store Features

5. Communication

6. Additional Services