## Tutorials Management Application

A simple Angular application for managing tutorials, demonstrating full CRUD (Create, Read, Update, Delete) operations. The frontend is built with Angular and communicates with a backend REST API.

## Table of Contents

- [Features](#features)
- [Tech Stack](#tech-stack)
- [Getting Started](#getting-started)
  - [Prerequisites](#prerequisites)
  - [Installation](#installation)
  - [Running the Application](#running-the-application)
- [Project Structure](#project-structure)
- [Usage](#usage)
- [Development](#development)
  - [Code Scaffolding](#code-scaffolding)
  - [Building](#building)
  - [Running Unit Tests](#running-unit-tests)
  - [Running End-to-End Tests](#running-end-to-end-tests)
- [API Reference](#api-reference)
- [Contributing](#contributing)
- [License](#license)

## Features

- Add new tutorials
- View a list of tutorials
- Edit and update existing tutorials
- Delete tutorials
- Search tutorials by title

## Tech Stack

- [Angular](https://angular.io/) 19.x
- [TypeScript](https://www.typescriptlang.org/)
- [RxJS](https://rxjs.dev/)
- [Bootstrap](https://getbootstrap.com/) (for UI styling)
- [Node.js](https://nodejs.org/) and [npm](https://www.npmjs.com/) (for development)
- Backend: Expects a REST API (e.g., Node/Express, Spring Boot, etc.)

## Getting Started

### Prerequisites

- [Node.js](https://nodejs.org/) (v18 or higher recommended)
- [npm](https://www.npmjs.com/) (comes with Node.js)
- [Angular CLI](https://angular.io/cli) (install globally with `npm install -g @angular/cli`)
- A running backend REST API (default: `http://localhost:8080/api/tutorials`)

Installation

1. Clone the repository:

   git clone https://github.com/michaeljuren/tutorial-management-frontend.git
   cd TutorialCrudProject/Frontend

2. Install dependencies:

   npm install

Running the Application

Start the Angular development server:

ng serve

Navigate to http://localhost:4200/ in your browser.

Project Structure

Frontend/
├── src/
│   ├── app/
│   │   ├── components/
│   │   │   ├── add-tutorial/
│   │   │   ├── tutorial-list/
│   │   │   └── ...
│   │   ├── models/
│   │   │   └── tutorial.model.ts
│   │   ├── services/
│   │   │   └── tutorial.service.ts
│   │   └── app.module.ts
│   └── ...
├── package.json
└── README.md

Usage

• Add Tutorial: Fill in the title and description, then click "Submit".
• View Tutorials: Tutorials are listed on the main page.
• Edit Tutorial: Click on a tutorial to edit its details.
• Delete Tutorials: Remove all tutorials from the list.
• Search: Use the search bar to filter tutorials by title.

Development

Code Scaffolding

Generate a new component:

ng generate component component-name
# or shorthand
ng g c component-name

Generate a service:

ng generate service service-name
# or shorthand
ng g s service-name

For more options, run:

ng generate --help

Building

Build the project for production:

ng build

The build artifacts will be stored in the dist/ directory.

Running Unit Tests

Run unit tests with Karma:

ng test

Running End-to-End Tests

Run e2e tests (if configured):

ng e2e

API Reference

The frontend expects a REST API with the following endpoints:

• GET /api/tutorials — List all tutorials
• GET /api/tutorials/:id — Get a tutorial by ID
• POST /api/tutorials — Create a new tutorial
• PUT /api/tutorials/:id — Update a tutorial
• DELETE /api/tutorials/:id — Delete a tutorial
• DELETE /api/tutorials — Delete all tutorials
• GET /api/tutorials/title/:title — Find tutorials by title

Contributing

Contributions are welcome! Please fork the repository and submit a pull request.

License

This project is licensed under the MIT License.