E-Commerce with Angular & Firebase, part two.

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 and daisyUi, 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, 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:
  

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:

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.

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.

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.

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 😂.