E-Commerce with Angular & Firebase, part two.
Tags: angular, firebase, designpatterns, learning
Published: 2024-01-20 01:00:00

Hi guys,
Welcome back to another blog series of an e-commerce project with angular and firebase, so this is the second blog post, if you were dragged here from Google or any news field then you should check out my first blog or part one, where I've shared the installation part.
So let's begin with this second blog or part two, in this blog I'll cover the setup, how we'll gonna setup the project or set the [tailwindcss](https://tailwindcss.com/docs/guides/angular) and [daisyUi](https://daisyui.com/docs/install/), I've provided the documentation link to install and setup the tailwindcss and daisyUi. And also cover up the `Result design pattern`.
So what's the design pattern, then it is a way to design the application system.
In software engineering, a software design pattern is a general, reusable solution to a commonly occurring problem within a given context in software design. It is not a finished design that can be transformed directly into source or machine code. Rather, it is a description or template for how to solve a problem that can be used in many different situations. Design patterns are formalized best practices that the programmer can use to solve common problems when designing an application or system.
Is that enough knowledge to get started with the design pattern? I guess yes otherwise you all get bored 😁.
So again I came up with that result design pattern idea from this blog post that I found useful, for [ASP.NET CORE](https://www.milanjovanovic.tech/blog/functional-error-handling-in-dotnet-with-the-result-pattern), I've followed this design pattern and implement in this angular. let's dive into the coding.

## Setup TailwindCSS and daisyUi:
Follow the documentation that I've provided the link, it's easy to set up those frameworks into this framework `Angular`.
After following the documentation, not me on social media, so follow me too there.
Let's create a Result design pattern.

### Result Design pattern:
- Rule number one, simply create a model folder in the `src\app\models` and create a new file named `interfaces` you can create a structure like `src\app\models\interfaces\IResult.ts`, So you can also create a `interfaces` folder or file, its upto you, but I'll create a folder and inside folder I'll create `IResult.ts` file where I can store all new interfaces that I want. That's a pretty long paragraph for a bullet point 😂.

- Rule number two, if you create the `IResult.ts` file then define the properties now, so it should look like this:

``` typescript
export interface IResult {
    succeed: boolean
    error?: IBaseError,
    errors?: string[],
    data?: any
}
```
Your file has code that looks like this, or you can add your properties too, Now it's time to implement this interface into class.

- Rule number three, create another file in the `models` folder, and name it, `Result.ts`, before we implement that let's add another interface too inside the `interfaces` folder, the file name should be `IBaseError.ts`, and it looks like this:

```typescript
export interface IBaseError {
    code: string
    description: string
}
```

- Rule number four, implement those interfaces, first start with `IBaseError.ts` file.
Create `BaseError.ts` file inside the `models` folder which will be the class.

```typescript
import { IBaseError } from "./interfaces/IBaseError";

export class BaseError implements IBaseError {
    code: string = "";
    description: string = "";
    public constructor(code: string, description: string) {
        this.code = code
        this.description = description
    }
    public static readonly None = new BaseError("","")
}
```
Now create `Result.ts` file which is also a class, which inherits the `IResult.ts` file.

```typescript
import { BaseError } from "./BaseError";
import { IBaseError } from "./interfaces/IBaseError";
import { IResult } from "./interfaces/IResult";

export class Result implements IResult {
    succeed: boolean = false;
    error?: IBaseError;
    errors?: string[];
    data?: any;
    message?: string;

    private constructor(succeed: boolean, error?: IBaseError, errors?: string[], data?: any, message?: string) {
        this.succeed = succeed
        this.error = error
        this.errors = errors
        this.data = data
        this.message = message
    }

    public static onSuccess = <TData>(data?: TData, message?: string) => new Result(true, BaseError.None, [""], data, message);
    public static onFailure = (error?: IBaseError, errors?: string[]) => new Result(false, error, errors);
}
```
Now create a `StatusError.ts` file inside the `models` folder and it'll be like using the `BaseError.ts` file which returns the properties as an error.

```typescript
import { BaseError } from "./BaseError";

export class StatusError {
    public static readonly BadRequest = new BaseError("400", "You request isn't valid, please confirm the request body or header.");
    public static readonly Unauthorize = new BaseError("401", "Unauthorize to this resource.");
    public static readonly NotFound = new BaseError("404", "Content or data was not found.");
    public static readonly InternalServerError = new BaseError("500", "Internal server error occured, contact admin or try again after sometime.")
}
```
So this is our `Result design pattern` for now, and in the next blog we'll see the use-case of this result design pattern and set up the `firebase` in the angular, I hope this post will be helpful for you all, then share this to your friends who are code hunger 😂.