# 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
- Product browsing and search
- Shopping cart and checkout
- User authentication and profile management
- Affiliate marketing program
- Store management
- Real-time chat via WebSockets
- Multiple payment integrations
- Order tracking and history
- Voucher and promotion system

---

## Technology Stack

### Core Framework
- **Angular**: v12.2.2
- **TypeScript**: v4.3.5
- **RxJS**: v6.6.3 (Reactive Programming)

### UI/UX Libraries
- **Angular Material**: v12.2.2 - Material Design components
- **Angular Flex Layout**: v12.0.0 - Responsive layout system
- **Angular Animations**: v12.2.2 - Animation support
- **Font Awesome**: v6.5.1 - Icon library
- **SweetAlert2**: v10.3.3 - Beautiful alerts and modals

### Additional Libraries
- **Socket.io Client**: v4.7.5 - Real-time WebSocket communication
- **Google Maps**: v3.55.12 - Map integration
- **ApexCharts**: v3.35.0 - Interactive charts
- **jwt-decode**: v3.1.2 - JWT token decoding
- **dayjs**: v1.10.7 - Date manipulation
- **ngx-translate**: v13.0.0 - Internationalization (i18n)
- **ngx-infinite-scroll**: v10.0.1 - Infinite scrolling
- **ngx-countdown**: v11.0.3 - Countdown timers
- **ngx-perfect-scrollbar**: v10.1.1 - Custom scrollbars

### Development Tools
- **Angular CLI**: v12.2.2
- **Karma**: v6.3.4 - Test runner
- **Jasmine**: v3.9.0 - Testing framework
- **TSLint**: v6.1.0 - Code linting
- **Protractor**: v7.0.0 - E2E testing

# Installation and setup

## Prerequisites

Before you begin, ensure you have the following installed:

- **Node.js**: v12.x or higher (recommended v14.x or v16.x)
- **npm**: v6.x or higher (comes with Node.js)
- **Angular CLI**: v12.2.2
  ```bash
  npm install -g @angular/cli@12.2.2
  ```

---

## Installation & Setup

### 1. Clone the Repository
```bash
git clone https://github.com/ondeliveroper/on-market-landing.git
cd on-market-landing
```

### 2. Install Dependencies
```bash
npm install
```

### 3. Environment Configuration
The application uses environment files located in `src/environments/`:
- `environment.ts` - Development environment
- `environment.prod.ts` - Production environment

### 4. Start Development Server
```bash
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:
- **accounts/** - User authentication and profile management
- **affiliate/** - Affiliate marketing dashboard and features
- **cart/** - Shopping cart functionality
- **checkout/** - Checkout and payment process
- **personal-store/** - Store owner features
- **product-details/** - Product information display
- **search-result/** - Search results page

#### `/src/app/services/`
Business logic and reusable services:
- API integration services
- State management services
- Utility services

#### `/src/app/interceptors/`
HTTP interceptors for:
- Adding authentication tokens
- Error handling
- Request/response transformation

# Core features

### 1. **E-Commerce Functionality**
- Product catalog browsing
- Advanced search and filtering
- Product details with images and specifications
- Shopping cart management
- Checkout process with multiple payment options
- Order tracking and history

### 2. **User Management**
- User registration and login
- Phone OTP verification
- Profile management
- Address book
- Password management
- Wishlist/favorites

### 3. **Affiliate Program**
- Affiliate registration
- Dashboard with earnings analytics
- Commission withdrawal
- Collection management
- Custom affiliate links
- Payment settings

### 4. **Store Features**
- Personal store creation
- Store profile management
- Product management
- Store reviews and ratings
- Store analytics

### 5. **Communication**
- Real-time chat via WebSockets
- WhatsApp integration
- Message notifications
- Order-related messaging

### 6. **Additional Services**
- Bill payments (Pulsa, PLN, PDAM, etc.)
- Vouchers and promotions
- Flash sales
- Campaign templates
- Reviews and ratings