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.
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
- 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
-
Angular
-
TypeScript
-
HTML
Node.js
Angular CLI
Installation
Copier Modifier git clone cd annuaire npm install ng serve
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.
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
- 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
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.
-
Angular
-
TypeScript
-
HTML
Node.js
Angular CLI
Installation
Copier Modifier git clone cd annuaire npm install ng serve
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 |
Here is a screenshot of the colors :
