Optimize README and scaffold production-ready Angular project foundation

CONTRIBUTING.md

@@ -0,0 +1,22 @@
+# Contributing Guidelines
+
+Thanks for contributing to this Angular training repository.
+
+## Workflow
+
+1. Fork the repository and create a feature branch.
+2. Keep changes focused and small.
+3. Run build checks locally before submitting.
+4. Open a pull request with a clear description.
+
+## Coding Standards
+
+- Follow Angular style conventions.
+- Prefer strict typing over `any`.
+- Keep feature code modular.
+
+## Pull Request Checklist
+
+- [ ] Code compiles successfully
+- [ ] Changes are scoped to the requested feature/fix
+- [ ] Documentation is updated when needed

README.md

@@ -1,264 +1,97 @@
-## Angular Training
+# Formation Angular
 
-NVM Install For Windows 
-https://github.com/coreybutler/nvm-windows/releases/download/1.2.2/nvm-setup.zip
-```
-Installation Steps :
-    1-Download and run the nvm-setup.exe installer
-    2-Select the NVM installation path (e.g., C:\nvm)
-    3-Select the Node.js installation path (e.g., C:\nodejs)
-    4-Confirm the installation
-```
-NVM Install For Linux/MacOS 
-Using the Installation Script
+![Angular](https://img.shields.io/badge/Angular-21-dd0031?logo=angular&logoColor=white)
+![Node.js](https://img.shields.io/badge/Node.js-20%2B-339933?logo=node.js&logoColor=white)
+![Status](https://img.shields.io/badge/status-ready_for_training-success)
 
-Open a terminal and execute one of the following commands:
-```
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
-```
-Or:
-```
-wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
-```
-Version compatibility : https://angular.dev/reference/versions
-```
-1 - working with angular 13/14 :
-    nvm use 14.15
-    npm i @angular/cli@13
-2 - working with angular 21
-    nouveatés depuis la version 15 - 21
-    * Les Standalone Components 
-    * Les Signals
-    * Les Signal Forms (expérimental)
-    * Nouvelle syntaxe de contrôle de flux (@if, @for, @switch
-    nvm use 22 ou 24
-    npm i @angular/cli@21
-```
-1️⃣ Créer une application Angular
-```
-ng new formation-angular
-cd formation-angular
-ng serve
-```
-use backend api : 
-```
-https://github.com/Invivoo/spring-crud
-```
-test :
-```sh
- http://localhost:4200
-```
-Project structure version 13/14
-```
-  .
-  ├── nodes_modules
-  └── src
-      ├── app
-      │   ├── app.component.css
-      │   ├── app.component.html
-      │   ├── app.component.spec.ts
-      │   ├── app.component.ts
-      │   ├── app.module.ts
-      │   ├── app.routing.module.ts
-      |
-      └── index.html
-      └── main.ts
-      └── styles.css
-      └── test.ts
- ├── angular.json
- ├── package.json
- ├── package-lock.json
- ├── README.md
- ├── tsconfig.app.json
- ├── tsconfig.app
- ├── tsconfig.spec.json
-
-```
+A practical Angular training starter focused on user CRUD concepts and modular project organization.
 
-Project structure version 21
-```
-  .
-  ├── nodes_modules
-  └── src
-      ├── app
-      │   ├── app.config.ts
-      │   ├── app.css
-      │   ├── app.html
-      │   ├── app.routes.ts
-      │   ├── app.spec.ts
-      │   └── app.ts
-      └── index.html
-      └── main.ts
-      └── styles.css
- ├── angular.json
- ├── package.json
- ├── package-lock.json
- ├── README.md
- ├── tsconfig.app.json
- ├── tsconfig.app
- ├── tsconfig.spec.json
-
-```
+## Quick Start
 
-2️⃣ Services api and crud components
-
-1 add module users on app/ directory
-```
-ng g module users --routing
+```bash
+npm install
+npm start
 ```
-2 add model folder : 
-```
-add user.model.ts
-```
-3 add a new component : 
-```
-ng g component crud
-```
-4 add services folder : 
-```
-ng g service users
-```
-```
-└── src
-      ├── app
-      │   ├── users 
-          │   ├── model 
-              │   ├── user.model.ts
-          │   ├── services 
-              │   ├── users.service.ts    
-          │   ├── crud 
-              │   ├── crud.component.css   
-              │   ├── crud.component.html  
-              │   ├── crud.component.ts  
-          │   ├── users.module.ts
-          │   ├── users-routing.module.ts
-      │   ├── app.component.html
-      │   ├── app.component.spec.ts
-      │   ├── app.component.ts
-      │   ├── app.module.ts
-      │   ├── app.routing.module.ts
-```
-- install bootstrap
-  ```
-  npm install --save bootstrap
-  ```
-  - update styles.css
-  ``` add
-  @import "bootstrap/dist/css/bootstrap.min.css";
-  ```
-3️⃣ users.serice.ts
-```ts
-import { Injectable } from '@angular/core';
-import {HttpClient} from '@angular/common/http';
-import {Observable} from 'rxjs';
-import {UserModel} from '../model/user.model';
 
-const baseUrl = 'http://localhost:8081/api/v1/employees';
+Then open: [http://localhost:4200](http://localhost:4200)
 
-@Injectable({
-  providedIn: 'root'
-})
-export class UsersService {
+## Table of Contents
 
-  constructor(private http: HttpClient) {}
+- [Overview](#overview)
+- [Setup](#setup)
+- [Project Structure](#project-structure)
+- [Development Steps](#development-steps)
+- [Related Resources](#related-resources)
+- [Contributing](#contributing)
 
-  getUsers(): Observable<UserModel[]> {
-    return this.http.get<UserModel[]>(baseUrl);
-  }
+## Overview
 
-  create(data: any): Observable<any> {
-    return this.http.post(baseUrl, data);
-  }
+This repository provides a clean Angular foundation with:
 
-  update(id: any, data: any): Observable<any> {
-    return this.http.put(`${baseUrl}/${id}`, data);
-  }
+- App bootstrap and root shell
+- `users` feature module with routing
+- User model and API service
+- CRUD list + reusable user card component
+- Bootstrap global styling
 
-  delete(id: any): Observable<any> {
-    return this.http.delete(`${baseUrl}/${id}`);
-  }
+## Setup
 
-  findByEmail(email: any): Observable<UserModel[]> {
-    return this.http.get<UserModel[]>(`${baseUrl}?email=${email}`);
-  }
-}
+Detailed instructions: [SETUP.md](./SETUP.md)
 
-```
-- crud.component.ts
-```ts
-  export class CrudComponent implements OnInit {
+Quick compatibility notes:
 
-  userList: UserModel[] = [];
+- Angular: 21+
+- Node.js: 20+
+- npm: 10+
 
-  constructor(private usersService: UsersService) {}
+## Project Structure
 
-  ngOnInit(): void {
-    this.usersService.getUsers().subscribe(rep => {
-      this.userList  = rep
-    });
-  }
-.
-.
+```text
 .
-```
-- add a user-card component
-  add : ```@Input() user: UserModel;```
-
-- user-card component html :
-```html
-- <div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
-  <div class="card-header">USER</div>
-  <div class="card-body">
-    <h5 class="card-title">{{ user.firstName }} {{ user.lastName }}</h5>
-    <p class="card-text">
-      {{ user.email }}
-    </p>
-  </div>
-</div>
-```
-- crud.component.html 
-```html
-<div *ngFor="let user of userList">
-  <app-user-card [user]="user"></app-user-card>
-</div>
-```
-- app.compoent.html
-  add :
-  ```html
-  <nav class="navbar navbar-expand-sm bg-primary navbar-dark">
-  <div class="container-fluid">
-    <ul class="navbar-nav">
-      <li class="nav-item">
-        <a class="nav-link active">Angular Training</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" routerLink="/users/all">Users List</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" routerLink="/users/create">Create User</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link disabled" href="#">INVIVOO</a>
-      </li>
-    </ul>
-  </div>
-</nav>
-<router-outlet></router-outlet>
-```
-
--  routing app.routing.module.ts
-```ts
-const routes: Routes = [
-    {path: '', component: AppComponent},
-    {path: 'users', loadChildren: () => import('../users/users.module').then(m => m.UsersModule)}
-  ];
-```
-- routing users.routing.module.ts
-```ts
-const routes: Routes = [
-  {path: 'all', component: CrudComponent},
-  {path: 'create', component: AddUserComponent},
-];
-```
-
-
+├── angular.json
+├── package.json
+├── tsconfig.json
+├── src
+│   ├── index.html
+│   ├── main.ts
+│   ├── styles.css
+│   └── app
+│       ├── app.component.ts
+│       ├── app.component.html
+│       ├── app.component.css
+│       └── users
+│           ├── users.module.ts
+│           ├── users-routing.module.ts
+│           ├── model
+│           │   └── user.model.ts
+│           ├── services
+│           │   └── users.service.ts
+│           ├── crud
+│           │   ├── crud.component.ts
+│           │   ├── crud.component.html
+│           │   └── crud.component.css
+│           └── user-card
+│               ├── user-card.component.ts
+│               ├── user-card.component.html
+│               └── user-card.component.css
+├── CONTRIBUTING.md
+└── SETUP.md
+```
+
+## Development Steps
+
+1. Install dependencies.
+2. Start the Angular dev server.
+3. Ensure backend API is running: [Invivoo/spring-crud](https://github.com/Invivoo/spring-crud)
+4. Open `http://localhost:4200` and navigate to **Users List**.
+
+## Related Resources
+
+- [Angular Documentation](https://angular.dev)
+- [Angular Version Compatibility](https://angular.dev/reference/versions)
+- [Bootstrap Documentation](https://getbootstrap.com/docs)
+- [RxJS Documentation](https://rxjs.dev)
+
+## Contributing
+
+Please read [CONTRIBUTING.md](./CONTRIBUTING.md) before opening issues or pull requests.