brief-annuaire-de-contacts

📋 Project Context

As part of a company request, this project aims to create a web application that manages and displays a contact directory. The goal is to allow the company to centralize and easily access information about its clients and suppliers.

🎯 Objectives

The application provides:

• Management of contacts (clients and suppliers)
• Adding new contacts through a form
• Searching contacts using a search bar
• Displaying detailed information for each contact
• Visual differentiation between clients and suppliers
• Displaying contacts as cards containing key information and a photo

Features

• Development using Angular with components and services
• Simulated data using variables or JSON file
• Dynamic and responsive display
• Client/Supplier differentiation through styling
• Contact creation form
• Real-time search

Technologies

• Angular

• TypeScript

• HTML

Installation and Usage

Prerequisites

Node.js

Angular CLI

Installation

bash

Copier Modifier git clone cd annuaire npm install ng serve

brief-annuaire-de-contacts

📋 Project Context

As part of a company request, this project aims to create a web application that manages and displays a contact directory. The goal is to allow the company to centralize and easily access information about its clients and suppliers.

🎯 Objectives

The application provides:

• Management of contacts (clients and suppliers)
• Adding new contacts through a form
• Searching contacts using a search bar
• Displaying detailed information for each contact
• Visual differentiation between clients and suppliers
• Displaying contacts as cards containing key information and a photo

Features

• Development using Angular with components and services
• Simulated data using variables or JSON file
• Dynamic and responsive display
• Client/Supplier differentiation through styling
• Contact creation form
• Real-time search

User Search and Contact Management

The user can search for individuals using the search bar by entering either a first name or a last name. Additionally, they have the option to filter the results by category, allowing them to view only clients or only suppliers. Furthermore, there is a contact addition form that enables the user to add a new contact to the system.

Technologies

• Angular

• TypeScript

• HTML

Installation and Usage

Prerequisites

Node.js

Angular CLI

Installation

bash

Copier Modifier git clone cd annuaire npm install ng serve

Color Codes Used in the Application

Here are the main colors used in the interface:

Recommended Use	Description	HEX Color
Primary	Titles, buttons, navigation bar	#2C3E50
Light Background	General background	#F4F6F7
Main Text	Text color	#333333
Client	Style for client cards, badges	#5DADE2
Supplier	Style for supplier cards	#E67E22

---

Visual Example

Here is a screenshot of the colors :