BriefAnnuaireContactsGroupeC

This project was generated using Angular CLI version 20.0.0.

Development server

🚀 Getting Started

To run the project locally:

npm install
ng serve

Once the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.

🧑‍🏫 Educational Context

A company wants to store information about its contacts.
To do so, it requires a directory application to manage its suppliers and clients.

The application must allow:

• Contact management (clients & suppliers)
• Contact search functionality
• Adding new contacts via a form
• Visual distinction between clients and suppliers through styling

✅ Evaluation Criteria

• The application is built using Angular 20
• All necessary components were created
• Data is simulated using in-memory variables (optionally from a JSON file)
• Angular services are used for data access
• Styling differs based on contact type (client or supplier)
• Each contact is displayed as a card showing:
  • A photo
  • Contact information
• A contact detail view is implemented
• A search bar is available
• A functional add contact form is included

🌐 Technologies Used

• Angular 20
• TypeScript
• Tailwind CSS
• Semantic HTML
• Figma (for UI mockups)

🧩 Created Components

• home – Homepage
• header – Top navigation bar
• footer – Footer section
• formulaire – Contact form
• annuaire – Contact directory (list view)
• carte-contact – Individual contact card
• service – Angular service for managing contact data

📷 Mockups & Design

• 🔗 Figma – UI Mockups
• 🔗 Figma – Component Tree / Structure

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.