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
 npm install -g @angular/cli@12.2.2
 
 
 
 
 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/ : 
 
 
 environment.ts - Development environment 
 
 environment.prod.ts - Production environment 
 
 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: 
 
 
 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