Simple_Product_Management_System

Introduction

This documentation provides an overview of the "Simple Product Management System," a web-based application that enables retail store employees to manage and view product information. This project showcases my skills in frontend development using AngularJS, backend development using NestJS, interaction with a database using TypeORM, database storing using MySql, and containerization using Docker.

Project Structure

The project is organized into the following components:

simple-product-management-system/
├── angular-frontend/
│   ├── Dockerfile
│   ├── angular.json
│   ├── package.json
│   ├── .gitignore
│   ├── projects
│       ├── angular-front  // For website components
│       ├── integrate 	 // For api services utilizing
│       ├── models 		// For the product interface
├── nest-backend/
│   ├── Dockerfile
│   ├── package.json
│   ├── .gitignore
│   ├── src
│       ├── product
├── docker-compose.yml

In this structure, I have separated the frontend and backend components into their respective directories. The Dockerfile for the AngularJS frontend is located in the "angular-frontend" directory, same for the NestJS backend, and Docker Compose configuration is in the project root.

Tech Stack Used

• Frontend: AngularJS
• Backend: NestJS
• Deployment: Docker
• ORM: TypeORM
• Database: MySQL

Getting Started

To run the project components, you can follow these commands:

Angular Frontend

ng serve angularFront

NestJS Backend

npm run start:dev

Docker

docker-compose up --build

This will start both the frontend and backend components and orchestrate them using Docker.

Lets create our first product using Postman

Here we have the product/create url and the json data that will be sent with the post request

And we could see here the creation of the product message in Postman

Frontend (AngularJS)

Product Listing Page

• Description: The product listing page displays a list of all products along with their details, including the product's name and price.

After creating some products we could now go to the home page where the product listing could be seen

• Features:
  • Each product in the list has a "View Details" button, which, when clicked, in my case I have a page with the product's full details.

Add Product Form

• Description: The add product form allows users to add new products to the system. The form includes fields for the product's name and price.

Here is the form and we will now see the validation of the form in the frontend side.

Also we could see the validation of the form

Backend (NestJS)

Product CRUD API

• Description: The backend provides API endpoints to perform CRUD (Create, Read, Update, Delete) operations on products, I have created the 4 operations, but tested 2 that are requested.

• Endpoints:

  • POST /product/create: Creates a new product.
  • GET /product: Retrieves a list of all products.

We saw the create product. now let's see the get all using Postman

Here is the response

• Database Interaction:
  • Utilizes TypeORM to interact with the database for storing and retrieving product information, also my approach was code-first approach using type orm.

MySQL

• Description: The system uses a MySQL database to store product information, and DBeaver was used to control the database, and visualize it.

Here is the database on DBeaver

• Database Structure:
  • Product table with columns for the product's ID, name, and price was created.

Docker

Containerization

• Description: The frontend and backend applications are containerized using Docker to simplify the deployment process.

• docker-compose.yml:

  • Orchestrates the deployment of both the frontend and backend containers.
  • Manages container dependencies and configurations for the entire application.

Here we could see the images and the docker container

And here are the working images inside the docker container

Testing

After successfully setting up and running the frontend and backend components, it's essential to test both parts of the application.

• Frontend Testing: I have verfied that the frontend components function as expected by interacting with the user interface and ensuring that products can be added and viewed correctly, which was shown above.

• Backend Testing: I have used Postman, and also made sure that the form validation also works in the server side.

Conclusion

This "Simple Product Management System" project demonstrates a complete solution for retail store product management, covering frontend development using AngularJS, backend development using NestJS, interaction with a MySQL database using TypeORM, and containerization using Docker. The system allows store employees to manage products effectively, providing features for adding new products and viewing product details.