Learning Angular - SOFT207 Portfolio by mp3li

This repository documents completed coursework from SOFT207 Angular objectives and a final project web app.
It is organized as an objective-based portfolio that shows progression from routing and modular app structure through forms, API integration, authentication, and final CRUD delivery.

What This Portfolio Shows:

• Angular application architecture with feature-based organization
• Route design, navigation flow, and guard-based access control
• Reactive forms with validation and user-friendly error handling
• Public API integration with typed service models
• CRUD operations across list/detail/create/edit workflows
• Authentication/authorization fundamentals with protected pages
• Final project delivery with both frontend and a small backend service

---

Table of Contents:

Open Table of Contents

• Portfolio Summary
• How to Run Projects
• Objective Portfolio (All Objectives)
  • Objective 1 - Angular Routing, Feature Modules, Route Params, Guards, Reusable Components
  • Objective 2 - Reactive Forms for Data Collection
  • Objective 3 - Tailwind CSS with Angular
  • Objective 4 - Interfaces vs Types in TypeScript
  • Objective 5 - Angular and Public API Integration
  • Objective 6 - JWT Authentication and Authorization in Angular
  • Objective 7 - Final Project: Angular CRUD Web App
• Skills Demonstrated Across the Full Course
• Notes

---

Portfolio Summary:

Open Portfolio Summary

• Course: SOFT207 Angular
• Repository purpose: Store and present completed objective-driven Angular work as a portfolio artifact
• Structure: Objective prompt files + app folders implementing those objectives
• Main app folders:
  • learning-angular-app-mybooks
  • myDevices - Final Project - Angular CRUD Web App /learning-angular-app-mydevices
• Final deliverable: A complete Angular CRUD app (myDevices) using the required public API with validated forms, routing, auth pages, and 404 handling

---

How to Run Projects:

Open How to Run Projects

• General: Open a terminal in this repository, cd into the app folder, install dependencies with npm install, then run with npm start.
• myBooks app:
  • cd "learning-angular-app-mybooks"
  • npm install
  • npm start
• Objective 7 Final Project (myDevices):
  • cd "myDevices - Final Project - Angular CRUD Web App /learning-angular-app-mydevices"
  • npm install
  • npm start
• Optional checks inside either Angular app folder:
  • npm test -- --watch=false
  • npx tsc -p tsconfig.app.json --noEmit

---

Objective Portfolio (All Objectives):

Objective 1 - Angular Routing, Feature Modules, Route Params, Guards, Reusable Components

Open Objective 1 Details

• Objective focus:
  • Build foundational routing and reusable component patterns.
• Contains:
  • Objective 1 - Angular Routing, Feature Modules, Route Params, Guards, Reusable Components.txt
• Implementation highlights:
  • Multi-route app structure setup
  • Guard and route-parameter usage patterns
  • Reusable UI component foundation
• Skills demonstrated:
  • Route architecture
  • Shared component patterns
  • Feature organization

Objective 2 - Reactive Forms for Data Collection

Open Objective 2 Details

• Objective focus:
  • Build reactive forms with clear validation and feedback.
• Contains:
  • Objective 2 - Reactive Forms for Data Collection.txt
• Implementation highlights:
  • Form controls and validators
  • Error messaging and submit gating
• Skills demonstrated:
  • Reactive form composition
  • Validation-driven UX

Objective 3 - Tailwind CSS with Angular

Open Objective 3 Details

• Objective focus:
  • Apply Tailwind CSS utilities within Angular pages/components.
• Contains:
  • Objective 3 - Tailwind CSS with Angular.txt
• Implementation highlights:
  • Utility-first styling integration
  • Consistent page-level visual structure
• Skills demonstrated:
  • Tailwind integration
  • Responsive UI composition

Objective 4 - Interfaces vs Types in TypeScript

Open Objective 4 Details

• Objective focus:
  • Practice TypeScript modeling decisions for app data.
• Contains:
  • Objective 4 - Interfaces vs Types in TypeScript.txt
• Implementation highlights:
  • Strong typing for API models and component/service contracts
• Skills demonstrated:
  • Type modeling discipline
  • Code readability and maintainability

Objective 5 - Angular and Public API Integration

Open Objective 5 Details

• Objective focus:
  • Integrate Angular with a Public API for list/detail interactions.
• Contains:
  • Objective 5 - Angular & Public API Integration .txt
• Implementation highlights:
  • Typed API service methods
  • Loading and error handling patterns
  • Data presentation views
• Skills demonstrated:
  • HttpClient service architecture
  • API state handling

Objective 6 - JWT Authentication and Authorization in Angular

Open Objective 6 Details

• Objective focus:
  • Implement login/register/account flows and role-aware access patterns.
• Contains:
  • Objective 6 - JWT Authentication & Authorization in Angular.txt
• Implementation highlights:
  • Authentication service + token/session handling
  • Route guards for protected pages
  • Account area integration
• Skills demonstrated:
  • Auth flow design
  • Authorization checks

Objective 7 - Final Project: Angular CRUD Web App

Open Objective 7 Details

• Objective focus:
  • Deliver a complete Angular CRUD app against the required Public API.
• Contains:
  • myDevices - Final Project - Angular CRUD Web App /Objective 7 - Final Project - Angular CRUD Web App .txt
  • myDevices - Final Project - Angular CRUD Web App /README.md
  • myDevices - Final Project - Angular CRUD Web App /learning-angular-app-mydevices/
• Implementation highlights:
  • Full CRUD pages (Home, List, Details, Create, Edit, 404)
  • Form validation (name minimum length, data field validation, disabled invalid submit)
  • API service methods for GET/POST/PUT/PATCH/DELETE
  • Loading/error states with user-facing feedback
  • Login/Register/Account area and guarded routes
• Skills demonstrated:
  • End-to-end Angular project assembly
  • CRUD workflow implementation
  • Project documentation and structure for submission

---

Skills Demonstrated Across the Full Course:

Open Skills Demonstrated Across the Full Course

• Angular routing and navigation architecture
• Feature-folder project organization
• Reactive forms and validation UX
• Typed service/data model design in TypeScript
• Public API integration and HTTP state handling
• CRUD flow implementation across multiple routed pages
• Authentication and authorization fundamentals
• Tailwind CSS styling in Angular applications
• Testing and type-checking workflows

---

Notes:

Open Notes

• This repository is organized to make objective-by-objective review straightforward.
• For final project specifics, see:
  • myDevices - Final Project - Angular CRUD Web App /README.md

---