Hello 😊 , thanks for finding time to navigate here. In the following Gist I will be bragging 😉 about my skills and all the cool concept I have applied to this project (BeeOcean.com, formerly proworktree.com).
I am sure after going through you won't say that a website creation is just putting some HTML-CSS together 😛...
Credits :- As a single developer in the project it would have been really difficult if this guy 👉 Rud156 had not picked up my calls for queries ( Many times ) .
Ok, Let's start now.
This is a SaaS product, therefore there is a need to incorporate the following functionality:-
- User payment for different packages/plans.
- A hierarchy based system where a user can have different roles, here in this app he can be an admin, editor, and viewer.
- A user can be admin of N number of companies, have access to review M companies and have Q companies viewer access.
- Under a company, the user (Admin) must be able to add the user under different access level.
- The user must be able to securely change his company without any data mix error.
The following application is based on MEAN stack i.e Mongo Express Angular Node.
That's all, this is what I have used to make this awesome product :).
While going particularly on front-end and backend I'll try to elaborate some key concepts I have used.
-
A feature that could help you a lot with large and heavy applications. By lazy-loading a module we can tell Angular to load it only when its route is been visited, meaning that its weight won’t affect the size of your application at startup.
-
Code splitting is one of the most compelling features of webpack. This feature allows you to split your code into various bundles which can then be loaded on demand or in parallel.
-
Service Workers , app shell , caching.
Service workers augment the traditional web deployment model and empower applications to deliver a user experience with the reliability and performance on par with natively-installed code.
AppShell provides an app a place to develop and manage JavaScript in a better way.
The app caches a good amount of data into your browser in various forms, this data helps the app to load much faster when you visit next time, for example, data like images, fonts, icons etc. (It doesn't store any personal or company based data) -
WebSockets are an advanced technology that makes it possible to open an interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.
-
The app contains a todo application where the user can user can update the status via a simple drag-drop across the various level.
-
The code base for the project is based on some norms both industry level or my own developed. The folder structure is based on the particular requirements of different pages, to reduce the amount of data fetching when the user navigates across different pages. All components have been integrated into a logical frame to call each other and minimize the data load.
-
Smooth Http calls.
Again while designing components I have to take care of a few things like not calling a request multiple times, use of Http caching, not to give request overload.
-
The user interface has been designed to let a non-techie guy navigate easily. The flow of user need and the various extra feature has been simplified to a better level and finer details have been taken care.
-
The app is having a need where the user wants to save the copy of invoice he is creating under a company. The app enables the user to do so by a single click they can generate a personalized invoice pdf.
-
The app allows the user to upload a large amount of data in bigger chunks at once via an excel sheet instead of manually filling every single time.
-
-
Authentication: As according to normal standards a user with invalid access should not be able to get into the app. The backend handles it very gracefully and in a very smooth way without making it heavy or extra load per request on the server.
-
Authorisation: As a user can have different role according to their access level, the backend takes care of data creation and update based on the defined role.
-
-
The data passed by front-end passes through various middlewares to make sure about the field requirement and data purity.
-
The backend support query on based of various data filter like name, dates, type of ledger-undergroup etc.
-
I admit that this didn't come in a single iteration.But now the database is in the best condition, it is ready to handle complex database query very smoothly in the simple and direct way. The database has been designed to easily take more than 1 lakh data unit under a single user branch like ledger, sales, sales purchase ( overall 1 million) in normal query time.
-
the user is allowed to upload a bulk data in excel format. The backend handles the whole data, process, validate and convert some field values in a good response time.
-
To satisfy the need to send the emails at various stages from user verification to later updates, the app can satisfy all the needs.
-
According to user need, they can upload a lot of documents (PDF's and txt format) and images.
-
The chat service is my best work in the project.It is based on MICROSERVICES pattern architecture. I have designed a basic but robust pattern to deal with and share the load of the app. It helps by managing the socket part in a different environment with a separate database and whole different logic.
-
As javascript/node works on a single thread, it cannot itself utilize all the cores of the underlying Operating system. I have successfully implemented a tool to balance the incoming load to all the CPU cores and take max benefit.
- The whole app is running on droplets and able to serve the user needs.
- The app contains a secure HTTPS connection by having an SSL certificate.
- The app has NGNIX as it's reverse proxy server, help to distribute load across multiple handlers.