PROJECT
Angular with Stack Support as MEAN
Client Overview
The client runs an Employee/End-Customer Management Company and provides services for the organizations to manage their various departments, teams, and end customers. The organizations can either use their own domain by subscribing to software as a platform or a sub-domain by subscribing to software as a service.
This client offers automated, fully hosted solutions that are customized for specific businesses and designed to help agencies/individuals provide their end-customers with excellent service to manage and prepare their documentation online by collaborating on the same platform on a real-time basis within different departments. The idea is to provide support for sharing multiple types of documents categorized into two modes, i.e., internal documentation, which is authoring business processes and procedures to help employees become more productive and efficient at work. External documentation is for people outside the organization, like prospects and customers.
Problems Faced By Them
Our challenge was to develop a secure and responsive MEAN stack application with Angular framework for an Employee/End-Customer Management Company that provides real-time collaboration and drag-and-drop options for preparing various types of documents while ensuring compatibility with different browsers and devices, and supports sub-domain for both SAAS and SAAP services. Additionally, the client wanted a solution to overcome the challenge of processing the real-time collaboration and ensure scalability through proper cloud architecture support.
Here are the documents types which any organization/individual can create by their own-
Contracts
Documents of bylaws
Non-disclosure agreements
Employment agreement
Business plans
Financial documentation
Compliance and regulatory documents
Business reports
Minutes of business meetings
Partnership agreement
Company policies
Franchise agreement
Online terms of use
Business pitch deck
Business license
Tech Stack included -
MongoDB as a NoSQL database
Node.js as backend support
ExpressJs a middleware routing framework
Angular v10 as a frontend framework
AWS as a cloud platform consisting of EC2 server instance, Route53 for handling domains and subdomains, SES for sending single/bulk emails, S3 bucket for uploading and support images and files support etc.
Company policies
Architecture Diagram
Technical Objectives
The objectives of the applications were to develop it from scratch with MEAN stack
Responsive to iPad so users can collaborate and manage/prepare their documentation.
To make it compatible with all browsers, regardless of their versions, old or modern.
Have the support of the Angular Framework to increase the load time for performance tuning based on on-demand module loading on browsers.
Socket.io integration for getting real-time collaboration support for working on similar documents by teams simultaneously.
Socket.io integration for chat room creation to support collaboration among teams and end-customers.
Business Challenges
The application was built in order to provide support to multiple organizations, their departments, and teams simultaneously with secure layers. The major challenge was to serve software as a platform as well as a service that includes
Ensured the application's compatibility with tablets and iPads.
Compatibility of the latest tech stack with older and upgraded browsers.
A special feature of the application was a drag-and-drop option for applying various input options for preparing documents.
Scalability of the application by providing proper cloud architecture support
Support for sub-domain for each organization + pointing the same server to other domains i.e SAAS and SAAP.
Solution
Implemented Bootstrap to make the application more approachable.
Implemented Angular v10 to overcome all performance-related issues and make the processing time optimal.
Socket.io supports real-time collaboration and chat rooms.
Latest design support for all updated browsers and is also compatible to run the application on desktops, tablets, and iPads.
Implemented application support includes a drag-and-drop option to attach relevant input option features such as a text editor, gallery creation, video frames, signature boxes, etc.
Exclusively designed as a single-page application.
Conclusion
The application has a new intriguing UI that attracts the user and also eliminates complications, The user can also identify the status based on the colour (every colour has a meaning, ex: Blue for 'saved', Red for 'rejected').
Performance has been taken care of with the integration of the latest tech stack and cloud services.
The application was built and supports desktops, tablets, and iPads.
The single-page application (SPA).
