Customer Management Panel

Angular-based CRM with real-time Firebase backend

Full CRUD customer management with live data sync, deployed on Firebase Hosting

---

Overview

A Customer Management Panel built with Angular and Firebase — enabling businesses to create, read, update, and delete customer records with real-time data synchronisation. Deployed live on Firebase Hosting with a clean, responsive interface.

---

Architecture

flowchart TD
    USER([User]) --> UI[Angular App\nTypeScript + RxJS]
    UI --> ROUTING[Angular Router]
    ROUTING --> LIST[Customer List\nComponent]
    ROUTING --> FORM[Customer Form\nComponent]
    LIST & FORM --> SVC[Customer Service\nAngularFire]
    SVC --> FB[(Firebase\nFirestore)]
    FB --> SVC
    SVC --> LIST & FORM

    style UI fill:#DD0031,color:#fff,stroke:none
    style FB fill:#FFCA28,color:#000,stroke:none
    style SVC fill:#B7178C,color:#fff,stroke:none

Loading

---

Tech Stack

---

Features

• Full CRUD — create, view, edit, and delete customer records
• Real-time sync — Firebase Firestore keeps all clients in sync instantly
• Reactive architecture — built with RxJS Observables throughout
• Angular Routing — clean navigation between list and detail views
• Firebase Hosting — production deployment with CDN delivery
• Responsive UI — works across desktop and mobile browsers

---

Project Structure

src/
├── app/
│   ├── customer-list/          # Customer list view
│   ├── customer/               # Customer detail / edit form
│   ├── shared/
│   │   └── customer.service.ts # Firebase data service
│   ├── app-routing.module.ts
│   └── app.module.ts
└── environments/
    ├── environment.ts          # Dev Firebase config
    └── environment.prod.ts     # Prod Firebase config

---

Getting Started

git clone https://github.com/sundeep-dayalan/Customer-Management-Panel-using-Angular.git
cd Customer-Management-Panel-using-Angular
npm install
ng serve

Visit http://localhost:4200

---

Deploy

ng build --prod
firebase deploy

---

Author

Sundeep Dayalan · Portfolio · LinkedIn