Architectural Insights

Here we explore the architecture and flows of our application, From the underlying technology stack to the design patterns and data flows, We will walk you through the inner workings of our application.

Technologies Architecture

Frontend Frameworks 


👉 Angular 
👉 Ionic

Backend Frameworks 


👉 ASP.Net Core 6
👉 ASP.Net Core 3.2
👉 ASP.Net Web API

DATABASES 


👉 Microsoft SQL Server
👉 MongoDB

Architecture Diagrams For Creating New Online Store using vsEcom

These are the Flow Diagrams for Creating Your Online Store using vsEcom



A merchant can create new store through Mobile or Website After he/she fills the register form and enters submit the request will go through the control panel and store the data in different applications which includes auth, license, subscription, engine and finally launch the store through launcher.



A merchant can come by two ways to vsEcom, first one is he can directly come from my.vsecommerce website with default template, and second one is by selecting a template from our vsEcom website. After he/she fills the register form and enters submit the request will go through the control panel and store the data in different applications which includes auth, license, subscription, engine and finally launch the store through launcher.

Merchant Login Flow

It Checks the registered merchant from auth and then generates Tokens.

License Flow

There is only one license per user with which he can create only three stores license details

Subscription Flow

To get the merchant subscription details a call is made to the control panel which in turn makes a call to the license service which returns the license details . Now with license details the control panel makes a call to the subscription service which returns the subscription details

Engine Flow

● First merchant sends a request to engine with auth_token and domain_id to get the engine_token.

● Now the engine calls a service within which the following calls takes place:

● First upon successful validation of auth_token a request is send to the auth service with auth_token which returns the auth_id

● With this auth_id and domain_id the service checks the engine_database for a valid user and returns the user_id if the user exists.

● With this user_id we get permissions details from database

● Now with user_id a call is made to the license service which returns the license details

● Now with the license details a call is made to the subscription service which returns the subscription details

● Now the service returns the subscription status based on the subscription details & finally the service generates a JWT token with details of user_id, permissions, subscription_status and returns it.

Architecture Diagram For vsEcom Engine

● The Engine has 4 Modules:


👉 Controllers
👉 Domain
👉 Persistence
👉 Utilities

● The Controller contains all the api for the USER and MERCHANT endpoints.

● Utilities is the one which contains the data of Enums , Mail and message Services.

● The Domain Contains the data of DTO, ResultSet, Services, Queries


👉 The object mapper used to mapping the DTO and table classes also with result set and table classes

● The Persistence contains the DataContext and EFContext


👉 DataContext has the information of table in The Databases
👉 EFContext is used to execute the cte queries

Inventory Flow

Inventory management is an organized approach to maintain the storing, tracking, and availability of a product.

Editor Flow

To access the editor, the merchant can navigate to the app and select the desired template to edit. Once the template has been selected, the merchant can click on the edit option, which will load the template in an Iframe. On the left-hand side, various options will be displayed for editing the template.

Template Theme Editing Flow

To change the theme, the merchant can select the themes option and make the necessary changes. This will call the control panel and request data from the launcher, which will update the MongoDB and retrieve the relevant files with updated Theme. These files will then be written in JSON format.

Template Colors Editing Flow

If changes are made to the color, font size, font type, or other related settings, the rootStyle.css file will be updated accordingly.

Template Heading Or Text Editing Flow

Similarly, any changes made to the store name, offers text, and other content will be reflected in the EN-US.json file.

If we want to add any Images and post them in the site the changes made are updated in config_data.json file.

← Category
Products →