JavaScript Full Stack real world business system step-by-step guide. Part 3: Project planning decisions

То facilitate the development of Awesome track company transport system we will brake down our project into stages and define main tasks of each stage. The first article describes the business case and functional structure of the system and the second article describes basic decisions regarding the database schema, user interface and project’s workspace structure. This all artifacts are used to shape the stages and high level development tasks of project.

The first stage involves the implementation of minimum features that are typical full stack applications. It will be include:

• Create project’s NX-workspace with NestJS preset and install Angular application
• Set up environment, database dependencies and TypeOEM migration
• Develop authentication based on Cookie
• Develop Role Based Access
• Install Angular material, create and setup ui-styles library
• Create main page, header with main horizontal menu and vertial menu for user and admin role
• Develop authentication features
• Develop Role Based Acces

That’s why this stage will be called the “Fullstack boilerplate”.

After implementing the minimal standard set of features in the Fullstack Boilerplate, the next step is to develop a set of features that will allow Admin  to fill and to update Awesome Tracks Company resources such as Users, Drivers and Trucks and will allow to other roles to view and use this resources in own features. For example, Manager will see and reserve free tracks with drivers, Customer will see information about reserved truck, Driver will see data and tasks for order fulfillment. The main feature the Awesome Trucks Company System is that we have two ways to create users:

• Customers register themselves and get Customer role because they are external users of the company
• Managers, Drivers, Director  create by the Admin role since these are internal users of the company

During the second stage features related to the objects  Users, Drivers, Trucks and defined in functional specification will be developed. So this stage will be called “Resource database”.

Third stage is about development of features related to Customer role. This includes features to work with orders (create new order, edit order send it to manager) and customer’s company profile (create and edit). Additionally, this stage will include Director’s role features such as assigning manager to new customer or changing manager for existing customer. This stage will be called “Customer and Orders”

Fourth stage involves the development of features related to the Manager role. This includes Managers’s features to get order from Customer and prepare and send Offer to the customer. This stage also includes development additonal features such as notes and chat-messages. So, “Offers and order details” are the most appropriate name for this stage. Finally, this stage will be called “Resource database”.

The goal of fifth stage is to develop order processing features, that is generation tasks by the system and their execution by users. Let me remaind  that our tasks are called “Actions”.  Information from Actions will also be used in Notifications received in the system and by email. In real business scenarios, such a system can utilize SMS notifications and popular messaging platforms to inform stakeholders about their upcoming actions and the state of the workflow. However, we have decided not to include these integration tasks within the scope of the project. Finally, this stage will be called just ‘Workflow’

The sixth stage marks the final phase, during which dashboards will primarily be developed for the director role. This stage will be called “Analytical features”

As a result, we get the following compact project structure:

• First stage: Full Stack Boilerplate
  • Create workspace, set up environment and migrations on backend
  • Create backend authentication
  • Install angular and create basic app-components
  • Setup global styles structure
  • Develop frontend authentication
  • Develop user-profile features
• Second stage: resource database
  • users: develop set of functionality on backend and frontend for user system object
  • trucks: develop set of functionality on backend and frontend  for truck system object
  • drivers: develop set of functionality on backend and frontend for driver system object
  • driverstotrucks: develop set of functionality on backend and frontend for driverToTruck entity
• Third stage: customers and orders
  • customers: develop set of functionality on backend and frontend for Customer system object
  • managersToCustomers: develop set of functionality on backend and frontend for managerToCustomer entity
  • orders: develop set of functionality on backend and frontend for Order system object
• Fourts stage: Offers and orders details
  • offers: develop set of functionality on backend and frontend for Offer system object
  • notes: develop set of functionality on backend and frontend for note system object
  • chat-messages: develop set of functionality on backend and frontend for chat-system object
• Fifth stage: Workflow
  • actions – develop set of functionality on backend and frontend for Action system object
  • notifications – develop set of functionality on backend and frontend for Notifications system object
• Six stage: Director analytical  features
  • Analytical dashboards – develop analytical dashboards

This project structure will be used for project planning on GitHub and stages will be used as milestones.

Summary and conclusions

This article demonstrates the breakdown of the entire project into stages and the identification of tasks. This is done in such a way that the stages are as harmonious as possible, and the implementation of each subsequent stage increases the functionality of our system. This approach allows for better control of the development process and demonstration of results to stakeholders, assuring them that the project is progressing in the right direction.

Upd:

GitHub project’s plan here and project repository here.