ItemManager

This project was generated using Angular CLI version 19.2.0.

Project Overview

ItemManager is an application designed to manage items, allowing users to search for items, add them to favorites, and view or remove items from the favorites list. The application is built using Angular and leverages NgRx for state management.

Project Structure

The project is organized into the following main sections:

• Components: Contains the Angular components used in the application.
  • item-list: Displays a list of items.
  • item-card: Represents an individual item.
  • item-search: Provides search functionality for items.
  • favorites-modal: Displays the list of favorite items in a modal.
• Services: Contains the Angular services used in the application.
  • scroll.service.ts: Encapsulates scroll logic to keep components clean and focused.
  • item.service.ts: Handles HTTP requests to fetch items and favorite items.
• State: Manages the application's state using NgRx.
  • app.state.ts: Defines the state structure.
  • app.actions.ts: Defines the actions for state management.
  • app.reducers.ts: Defines the reducers for state management.
  • app.selectors.ts: Defines the selectors for accessing state data.
  • app.effects.ts: Defines the effects for handling side effects.

State Management

The application uses NgRx for state management to handle items and favorite items. The facade pattern is used to connect the view with the store, making the code more modular, easier to maintain, and more testable.

Component Optimization

To optimize the components, the list is broken into smaller, more focused components. This approach makes the code more modular, easier to maintain, and more testable. Specifically, a separate component is created for the search functionality.

Scroll Service

A scroll service is created to encapsulate the scroll logic, making the component cleaner and more focused on its primary responsibilities. This approach also promotes reusability if similar scroll logic is needed in other components.

Styles

The application uses the BEM methodology to define the layout and appearance of the main sections. Styles ensure a consistent look and feel across the navigation bar, header, main content area, and footer. Style variables are used to reuse style values.

Mock Service Worker (MSW)

The application uses Mock Service Worker (MSW) to mock API requests during development and testing. The MSW configuration and handlers are defined in the src/mocks directory.

MSW Configuration

The MSW configuration is defined in the public/mockServiceWorker.js file. This file is automatically generated by MSW and should not be modified manually.

MSW Handlers

The MSW handlers are defined in the src/mocks/handlers.ts file. These handlers define the mock responses for the API requests.

src/mocks/handlers.ts

import { http, HttpResponse } from "msw";
import data from "./data.json";

export const handlers = [
  http.get("/api/items", ({ request }) => {
    const url = new URL(request.url);
    const limit = parseInt(url.searchParams.get("_limit") || "5", 10);
    const start = parseInt(url.searchParams.get("_start") || "0", 10);
    const paginatedItems = data.items.slice(start, start + limit);
    return HttpResponse.json({ items: paginatedItems });
  }),

  http.get("/api/items/filter", ({ request }) => {
    const url = new URL(request.url);
    const search = url.searchParams.get("search") || "";
    const filteredItems = data.items.filter((item) => {
      return item.title.toLowerCase().includes(search) || item.description.toLowerCase().includes(search) || item.price.toLowerCase().includes(search) || item.email.toLowerCase().includes(search);
    });
    return HttpResponse.json({ items: filteredItems });
  }),
];

Unit Tests

Unit tests are created for the more logical parts of the application, such as services and state management. Jest is used as the testing framework.

End-to-End Tests

End-to-end (E2E) tests are created with Cypress to ensure that the application works as expected from the user's perspective. The following E2E test scenarios are included:

1. Load Items: Verify that the list of items is loaded correctly.
2. Search Items: Verify that the search functionality works as expected.
3. Add to Favorites: Verify that items can be added to the favorites list.
4. Open Favorites Modal: Verify that the favorites modal can be opened and displays the correct items.
5. Remove from Favorites: Verify that items can be removed from the favorites list within the modal.

Development server

To start a local development server, run:

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.

Building

To build the project run:

ng build

This will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.

Running unit tests

To execute unit tests with the Jest test runner, use the following command:

npm run test:jest

To run Jest tests in watch mode:

npm run test:jest:watch

To run Jest tests with coverage:

npm run test:jest:coverage

Running end-to-end tests

For end-to-end (e2e) testing with Cypress, run:

npm run start

npm cypress:run

To open the Cypress Test Runner:

npm run test:cypress:open

Additional Resources

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

I'd also be happy to answer any other questions or issues related to this project. Thank you for the opportunity!! :)