# Private Dependencies

In Project Zero's development environment, there are two private dependencies: **shop-packages** and **pz-core** packages. These private dependencies contain important elements that help developers create efficient applications. In this guide, we'll explore **pz-core**, which includes scripts and APIs for extending functionality. We'll also look into **shop-packages**, which handles Google Tag Manager, Analytics, and Redux state management, all essential for Project Zero.

## <mark style="color:red;">pz-core​</mark> <a href="#pz-core" id="pz-core"></a>

Stands as a repository of essential scripts, designed to simplify and optimize the development process. Among its offerings are scripts like **pz-create-app**, **pz-slugify-files**, and **pz-icon-font**, alongside wrapper for API calls.

#### <mark style="color:red;">pz-create-app​</mark> <a href="#pz-create-app" id="pz-create-app"></a>

Creates shared Django app layout. It is recommended to install the pz-core package globally in order to use this script.

Usage:

```
pz-create-app
```

#### <mark style="color:red;">pz-slugify-files​</mark> <a href="#pz-slugify-files" id="pz-slugify-files"></a>

When the need arises to rename and slugify filenames within a specified directory, pz-slugify-files can be used.

Example usage:

```
pz-slugify-files --dir='./assets/svg-icons' --extension='svg'
```

#### <mark style="color:red;">pz-icon-font​</mark> <a href="#pz-icon-font" id="pz-icon-font"></a>

Converts SVG files from a designated directory into an icon font.

Example usage:

```
pz-icon-font --src=./assets/svg-icons --output=./assets/pz-icon-font
```

#### <mark style="color:red;">API Calls​</mark> <a href="#api-calls" id="api-calls"></a>

All API-related activities are located within the **pz-core/src** directory as given below.

<figure><img src="https://2911598027-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlQinVPnOffBiOp126ldR%2Fuploads%2Fgit-blob-65c5115323c88b0f298b304c8ceec3988da9da01%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>

These API requests are orchestrated via various **service** classes, which, in turn, use the internal **http-client**. Each service class functions as a repository of predefined requests, each tailored to specific use cases. The following code snippet exemplifies their usage:

```
import { UserService } from 'pz-core';

// ...

UserService.login({ email, password });
```

When a need arises for functionality that is not available within the existing service classes, the option exists to extend these services by the addition of custom methods. This can be achieved through the usage of the **extend** function.

```
import { UserService } from 'pz-core';

UserService.extend('getAvatar', () => { /* ... */ });

// ...

UserService.getAvatar();
```

It is recommended to use **extend** methods within a general file, such as **layout/index.js**, which loads early in the application. Once added, the custom method becomes accessible for use across other files. Alternatively, you have the option to directly import **http-client** for manual request handling. However, using services is the recommended approach for maintaining orderliness.

## <mark style="color:red;">shop-packages​</mark> <a href="#shop-packages" id="shop-packages"></a>

The shop-packages package primarily serving functions related to Google Tag Manager (GTM), Analytics, and Redux state management.

#### <mark style="color:red;">GTM</mark>​ <a href="#gtm" id="gtm"></a>

For all GTM-related tasks, refer to the file **shop-packages/analytics/gtm/index.js**. This file includes functions such as the creation of user data within the **identify** function, which pushes this data to the data layer.

#### <mark style="color:red;">Redux State Management​</mark> <a href="#redux-state-management" id="redux-state-management"></a>

Redux is applied to two specific pages within Project Zero: the cart and payment pages. The configuration for Redux, including actions, reducers, and store configurations, is located within the **shop-packages/redux** directory, as depicted in the directory structure below. For comprehensive details, please check the Redux documentation.

<figure><img src="https://2911598027-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FlQinVPnOffBiOp126ldR%2Fuploads%2Fgit-blob-2d799852face827eb4387c1ae81afa34ea654392%2Fimage.png?alt=media" alt=""><figcaption></figcaption></figure>
