Frontend
Introduction
Project Overview
OnMarket Landing is a comprehensive Angular-based e-commerce marketplace application. It provides...
Installation and setup
Prerequisites Before you begin, ensure you have the following installed: Node.js: v12.x or high...
Project structure
on-market-landing/ ├── e2e/ # End-to-end tests ├── src/ │ ├── app/ │ ...
Core features
1. E-Commerce Functionality Product catalog browsing Advanced search and filtering Product detai...
Development guidelines
Architecture & Design Patterns
Component-Based Architecture The application follows Angular's component-based architecture where...
Services & API Integration
ApiService (api.service.ts) The main service handling all API communications. Base URLs // Produc...
Routing Structure
Main Routes The application uses Angular Router with the following main routes: // Home & Product...
State Management
BehaviorSubjects The application uses RxJS BehaviorSubjects for state management: ApiService Stat...
Authentication & Security
JWT Authentication The application uses JWT (JSON Web Token) for authentication: Login Flow: //...
Key Components
1. Homepage Component Path: src/app/components/homepage/ Main landing page featuring: Banner sli...
Custom Pipes
1. PhoneNumberPipe File: src/app/pipes/phone-number.pipe.ts Formats phone numbers according to In...
Development Workflow
Starting Development Server # For Unix/Linux/Mac npm start # For Windows npm run startWindows T...
Build & Deployment
Development Build npm run build Production Build ng build --configuration production Build Conf...
Testing
Unit Tests Run unit tests via Karma: npm test Tests are written using Jasmine and located alongs...
Code Style & Conventions
TypeScript Style Guide Follow Angular's TypeScript style guide: Use 2 spaces for indentation Use...
Troubleshooting
Common Issues and Solutions 1. OpenSSL Error on npm start Error: Error: error:0308010C:digital en...
Additional resources
Official Documentation Angular Documentation Angular Material RxJS TypeScript Key Depen...