Exploring JavaScript/TypeScript full stack development based on Node.js with using of wide range of modern frameworks such as NX, Angular, NestJs and other I found a lot of excellent small examples for CRUD, authentication, real time chats and many others, but I detected extremely few examples of real world apps (usual it is simple blogs or todo apps) and I didn’t find out any earnest real world app or system for business. Though as we know those frameworks positioned as solutions that enable development of complex enterprise level systems or modern startup project. That is why I decided to figure it out, how to develop real world JavaScript / TypeScript full stack business system step-by ste. So, in this series of articles I intend to go through a step-by-step process to develop the full stack real world business system using the next stack:
- PostgreSQL as database,
- NestJS and TypeOrm on backend,
- Angular and Angular Material on frontend
- NX to build monorepo
- some others utility frameworks and libraries or those which are appropriate to the specific of business case that was chosen.
I hope this experience will be useful both to developers and other members of the projects team developing simular systems such as business analysts, product owners, solution architects, designers and product managers. This article is an introduction to the project and describes business case, detailed usage scenario of the main business process, brief basic functional structure of developed system.
Business case and main goal of project
As an example of a business case I have chosen is a typical b2b solution for transport logistic and more precisely for road freight transport domain area. Let’s imagine the typical transport company that has a fleet of trucks and provides a freight service for small and medium-sized companies. Let’s call this transport company Awesome Trucks. The Awesome Trucks Company aims to grow and increase its market share by enhancing productivity interaction with customers and its satisfaction. Company management sees the solution of this problem in the following initiatives:
- To provide customers’ ability to place orders for freight directly on company’s website or mobile app excluding different intermediaries, agencies, resellers and third-party web-services;
- Increase productivity and quality of order fulfillment by controlling all the steps of its implementation and inform customer in a timely manner;
- Save all the history of order fulfillment for subsequent analytics and decision making which will increase customers’ satisfaction, minimize trucks’ downtime, streamline and improve processes and reduce costs;
To implement these initiatives the company needs a modern business system that will have the following features:
- Customer’s registration on the company’s web or mobile app
- Personal account for customers where they can place orders for freight transportation, confirm deals, track their status of fulfillment and receive messages about progress of the order
- Personal account of transport company’s manager where he can receive messages from customers about new orders, clarify and confirm order’s details, assign trucks, make deals for freight transportation, track the order fulfillment and close completed and paid orders
- Personal account of transport company’s driver, where he gets information about assigned orders, and confirm arrival to the freight loading place, confirm loading, delivery and unloading
- Personal account of the head of the transport company where he can see data with totals that shows current state of orders processing and fulfillment
- Personal account of this business system’s administrator that can administer users and support actual data about trucks
This system must include web app for all groups of users except for drivers and mobile app for all groups of users including drivers and a simple real time chat to discuss order’s questions.
Since this is an example project, in order not to complicate and not stretch it in time I do not include in a project scope a number of specific tasks for example integration with a payment or accounting system. The project scope also doesn’t include some related processes, such as marketing, customer acquisition, contract work, shipping documents handling, incidents management, resources management: tracks and drivers (Let’s suppose that company has its own fleet and drivers as well as uses outsourcing contractual drivers with trucks), fleet of truck maintenance, etc.
The main goal of this project from the Awesome Truck top management’s point of view is to get the basic functionality of the system, that the employees of the company can start using and give feedback. Then this system will be expanded by developing and implementing new usage scenarios and functions in accordance with the strategy, goals and priorities of the company. However, according to company’s top management the most important part of this basic functionality should be a process of handling of all the information related to the order from its receiving to the complete execution of all operations to meet the customer needs and save all history of order handling. The process is described as a usage scenario and as BPMN diagram in the next part of the article.
Main usage scenario of our system
The main usage scenario of our system is following:
Preconditions:
- The customer is registered in the system and personal manager is assigned to him
- Customer needs to transport freight by road
Flow of events and actions of scenario actors:
- Registered customer logs in the app, creates a new order by filling out the appropriate form, and sends it to Awesome Trucks Company manager. The order status sets as Open. Order contains the following information:
- name of freight
- freight volume
- freight weight
- freight additional information
- loading address
- sender
- sender’s contact person
- phone number of sender’s contact person
- unloading address
- receiver
- receiver’s contact person
- phone number of receiver’s contact person
- date and time of loading
- type of required transport
- volume of required transport
- carrying capacity of required transport
- Manager of Awesome Trucks Company receives the notification with task to examine the received order. After the click on the Accept button the system assigns the order to this Manager and the order accepts the status Processing.
- Manager opens and examines the order. If it is necessary he contacts to Customer and refines the missing information. If the order information has suitable free trucks, they should be displayed on order form to facilitate and speed up required truck (for example business logic where the truck will be selected automatically can be added later). After the choosing, the truck manager prepares an offer to the customer. In case, if the suitable trucks are not unavailable manager can offer alternative solution for example a different date or slightly different but satisfying requirements type of truck. In case the any suitable truck is unavailable or there are no any alternative solutions or if the customer did not provide enough information a manager can reject the order. In this case, manager must point out the reason for rejection and the order accepts the rejected status.
Offer should contain data about the truck and the driver, the final date and time loading and cost - The prepared offer is sent to the customer that receives notification about this offer. A Customer can see the offer in his personal account to accept it or reject.
- Manager gets notification about any decision of a Customer (Accepted or Rejected Offer). In case the offer is rejected, Manager can adjust the offer and send it to the customer again or he can set to order Rejected status with the reason of rejection status. In case the Customer confirmed the offer, order must accept status Confirmed and Manager receives the notification about it. Driver that was assigned to fulfill this Order receives the notification with task to confirm information about assigned order.
- After confirming the assigned order by the driver, the Order accepts the status Pending of fulfillment. The Customer and Manager receive notification about the new status of the Order.
- The Driver gets the notification with task to confirm arriving to the loading address at the term that is specified in Order. Arrived to the loading address at specified term driver confirm the arriving in his mobile app. The order accepts status Fulfillment with mark loading.
- Customer and Manager receive new notification with new status of Order. Driver receives another notification with new task to confirm the loading completion and the beginning of transportation to the place of unloading
- After the completion loading of the freight and starting transportation, the driver in his app, confirms the completion of the loading and departure to the unloading address. After that Order’s status Fulfillment accepts mark Transportation
- The Customer and the Manager receive notification about status change. The driver receives a notification with the task to confirm arrival to the unloading address
- Upon arrival at the unloading address the driver, confirms this action in his mobile app. The order accepts Unloading mark of Fulfillment status
- Customer and Manager receive notification about arrival truck with freight at the unloading address. The Driver receives the notification with task to confirm the completion of the unloading of the delivered freight
- After the unloading of the freight had been completed driver confirms the completion of the unloading in his app. The Order accepts the status of Fulfilled with mark Unloading completed. The manager receives the notification about the completion of the unloading. The Customer receives a notification with the task to confirm unloading and receipt of the freight.
- When Customer confirmed receipt of the freight the order accepts the status of Fulfilled with mark Received by customer
- The Manager receives notification with new Order status and task to bill the Customer.
- When Manager sends bill to the Customer and completes according to task in his app the order accepts mark Pending payment of status Fulfilled.
- Customer receives notification with task to pay for the Order and attached invoice. After the payment, Customer completes this task. The Order accepts mark of status Payment Confirmation.
- Manager receives the notification with the task to confirm the fact of payment. After receiving information about the receipt of funds to the company’s account Manager completes the task to confirm payment. The order accepts mark Paid of Fulfilled status
- The manager receives the task to confirm completion of order’s fulfillment. Ideally, the manager should check the availability of all signed transport documents, but, as described above we don’t include this functionality in the scope of project. After the manager completes this task the Order accepts the status Completed. The main company’s business process is finished.
Post-conditions
- Customer’s needs for shipping his freight have been satisfied
- Order paid by customer
- All order processing operations have been completed
To additional understanding this business-scenario let’s present this process as BPMN diagram
The above scenario is a basis of our system, because it provides end-to-end automation of handing all the information related to the order from its receipt to the complete execution of all operations. That’s why it is of the greatest value to business for our transport company Awesome Trucks.
Basic functional structure of Awesome Trucks Transport Logistic system
In order to determine all basic functions of our system in addition to the information presented above I’ll introduce the basic use case diagram.
This is very primitive high level diagram without decomposition into more detailed diagrams. But it helps to get basic functional structure our system grouped by user roles (actors) and then grouped by the main system objects according to the following scheme:
- User’s role
- Object of system 1
- User’s role function 1.1,
- User’s role function 1.2
- User’s function 1.…
- Object of system 2
- User’s role function 2.1,
- User’s role function 2.2 …
- User’s role function 2.…
- Object of system 1
Basic functional structure of our system:
- Customer
- Orders
- Create
- View
- Edit (before order sending to manager)
- Send to manager
- View all list of own
- Delete unsent
- Offers
- Receive
- View
- Confirm
- Reject
- View list of all own
- Notifications
- Receive
- View
- View list of all own
- View list of all by current own order
- Actions (Tasks)
- View
- Complete
- View list of all by current own order
- Chat for order in real time
- Create and send messages
- Receive a message
- Profile
- Edit
- Change password
- Delete profile (profile marks as deleted)
- Orders
- Manager
- Customers
- View list of all own customers
- View list of all company’s customers
- View customer’s profile
- Orders
- Receive
- View
- Reject
- View list of all from own customers
- View list of all from all customers
- Notes
- Create
- View
- View all notes of current order
- Trucks and drivers
- View list of all trucks and drivers with status (free or busy)
- Offers
- Create
- Edit
- Send to customer
- View list of all own offers
- View list of all company’s offers
- Notifications
- Receive
- View
- View list of all own
- View list of all by current order
- Actions (Tasks)
- View
- Complete
- View list of all by current own order
- Push: notification comes to another user for the task assigned to him, if the completion of this task is delayed
- Chat for order in real time
- Create and send messages
- Receive a message
- Profile
- Edit
- Change password
- Customers
- Driver
- Notifications
- Receive
- View
- View list of all own
- View list of all own by current order
- Actions (Tasks)
- View
- Complete
- View list of all by current own order
- Chat for order in real time
- Create and send messages
- Receive a message
- Profile
- Edit
- Change password
- Notifications
- Admin
- Users
- View list of all user’s accounts
- View user’s profiles
- Block user’s account
- Create new company’s user (manager, driver, chief manager)
- Change company’s user role (manager, driver, chief manager)
- Trucks
- Create
- Edit
- Assign truck driver
- Delete truck (mark as deleted)
- Customers
- View list of all
- View customer’s profile
- Orders
- View list of all
- View selected one
- Offers
- View list of all
- View selected one
- Notifications
- View list of all
- View selected one
- Actions (Tasks)
- View list of all
- View selected one
- Profile
- Edit
- Change password
- Additional: Admin has the same features to work with orders, offers, task, notifications as manager and ability to work with any order if it necessary
- Users
- Director
- Customers
- View list of all customers with totals
- View customer profile with totals
- Assign new customer to manager
- Change customers’ manager
- Managers
- View list of all managers with totals
- View manager profile with totals
- Block manager
- Orders
- View list of all orders with totals
- Notifications
- Get notification about new customer
- Drivers
- View list of all drivers with totals
- Trucks
- View list of all trucks with totals
- Profile
- Edit
- Change password
- Additional: Chief Manager has the same features to work with orders, offers, task, notifications as manager and ability to work with any order if it is necessary
- Customers
This basic functional structure will be refined and probably supplemented during development process
Summary and conclusions
In this article, we reviewed a business case, goal, the main usage scenario and BPMN-diagram of the most valuable company business porocess, use-case diagramm and basic functional structure to develop JavaScript Full Stack business system for typical transport company. It is no coincidence that the topic of transport logistics was chosen because the relevance of various transport tasks is greater than ever and this business case is covers a wide range of tasks facing developers of modern web solutions within a single system.
In the next article will be discussed basic design decigions about data structure, user interface and project workspace structure.
Discover more from More Than Fullstack
Subscribe to get the latest posts sent to your email.