This is how Gocomet is building its Frontend Tech
“Your website is the center of your digital eco-system, like a brick and mortar location, the experience matters once a customer enters, just as much as the perception they have of you before they walk through the door.”
― Leland Dieno
The front end of any application is the only playground for customers to interact. Thus, giving a smooth experience to its customers is a demanding real-time challenge for a company, especially for a product-based company like Gocomet, where you are tech-heavy and product-led sales are your aim.
In this blog, you will find what our engineers are working on to deliver a consistent quality product to our clients, and what technical skills you would need in case you want to join us ;)
Being a product company is always full of technical challenges and innovation which is the most fun and exciting work. You solve real-time problems for customers who have a history of doing business for millions or billions of dollars only through meetings, calls, and emails. The customers get excited to see how technology is solving the bottlenecks of their business which sometimes they even didn’t know existed.
That’s the challenge we at Gocomet are solving. The complex international logistics industry works 24x7 across the world and handles cargo worth trillions of dollars. We started back in 2016 intending to build a one-stop solution for all international logistics issues. Glad to tell you, we have big happy clients like SunPharma, Polymers International, Glenmark, Tafe, HUL, etc.
Choosing a front-end tech stack to deliver value to such enterprises needs thorough planning and research. Through this blog, we would like to show the thought process behind the setup that we currently have at Gocomet.
Frontend Tech Architecture
It is said, “Only through meticulous planning and revisiting the challenges, can you finally achieve success.”
We have had a similar journey, where we built products and solved problems in the logistics industry.
Our engineering stack started with a monolithic architecture, and we are currently building a micro frontend architecture with four independent services running.
Below is an illustration explaining it.
The above diagram is the high-level architecture of our frontend system, which is split into four independent apps working loosely together. Each of them is maintained and deployed independently and serves an individual purpose.
Core Product App: It handles our core enterprise clients, large MNCs dealing with international logistics, and has access to our main products.
Each of the products has its tough journey from core features to an advanced products as it has iterated with continuous feedback from multiple clients over a long period of time.
This app requires both maintenance and evolution with our client's requirements; maintaining quality with new changes is the main goal here.
Experimental or Growth App: It is the app where we continuously experiment with new ideas and products. These MVPs are then tested in the market.
As International logistics is highly manual with heavy dependency on excel and email, technology adaptation here is low. We are leading the changes in this space. For that, we develop new product ideas to test our hypothesis every now and then, which could solve the problem.
Common Services App: It handles the shared services and components divided among other apps. It is a single place of frequently used modules, built with the aim to ensure a similar experience across all apps, and reduce redundancy, faster changes, and code robustness.
Website: It is our main website app. Whether you are an enterprise or a general customer, you can check out a trial of our products on it. Don’t forget to drop us feedback :)
Link — https://www.gocomet.com/
Frontend Tech Stack
A tech stack comes with many technical layers, each of which has its own pros and cons and entirely depends on one’s choice of what suits their requirement best at a particular time.
The following illustration offers a simple perspective into building a simple yet scalable frontend architecture around our chosen core technologies.
Environment
To develop a server-rendered application for better SEO and fast loading, we have built our front-end applications on a node environment independent of the backend.
node and npm — package environment, for server-side development of web apps in javascript.
Core libraries
While choosing core libraries, we looked for frameworks with easier development along with strong community support, that also meets our requirements of building enterprise-specific UI components, and would make code structure more robust.
react — Core Js library
js/typescript — Core language
antd — UI Library for enterprises. It gives many features for data-heavy components like tables, cards, filters, etc., which is what we need.
styled-component — CSS-in-JS styling framework, allows you to write actual CSS to style React components.
Linters and formatter
For all kinds of pattern issues in javascript and consistent code styles throughout the whole codebase. We prefer -
eslint — linter for our ECMAScript.
prettier— formatter that works with eslint plugins.
Routing, bundler, transpiler, PWA
We use the simple page-based routing framework which supports server rendering, fast development, and SEO.
nextjs — from server rendering to default webpack bundler to routing to hot reloading, it handles many core features. It’s a highly recommended lib for building service-side apps.
babel — helps us transpile our JS compatible with old browsers and new browsers with its support libraries.
next-pwa — ‘nextjs progressive web app’ lib for mobile device features on the website, without requiring the end user to visit an app store, along with fast reloading, offline access, and push notifications.
State Management
To build a global data state for client details that can be shared among products and can be managed at a single point.
redux — js library for managing and centralizing application state
Testing
To examine functionality in our applications during the development phase, we needed frameworks with strong support and a wide range of test assertions to test all possible unit features in our code base. We find the perfect fit that matches our requirements. Here is,
jest — test environment to build and run our unit and snapshot tests.
MSWjs — mocks the APIs to test network requests.
We find this lib has solved our issue for backend API testing with easy configuration and accessibility.
testing-library/react — complete React DOM testing utilities and framework.
Design Framework
To avoid redundancy and build documentation for the component. We prefer -
storybook — tool to build UI components which isolated from the business logic and context of the app
Blogs and SEO
wordPress — publicly hosted third-party blog application.
Lighthouse, Site Speed, google analytics — tools to manage SEO. (We have our journey with SEO scores from 20 to 100, which we will share in coming blogs.
These are the core libs and tools which we are using for our multiple applications according to our requirements; definitely, there are other supporting libs and dev dependencies that need to be mentioned here.
Vision
Our frontend team has scaled from 5 to 15 in the last 1 year, which brings us the responsibility of maintaining the code health and trying out new tech things in the market to give a better user experience to our clients.
Here are our aspirations about the same.
> Work on the scalability of our code base with increased features.
> Maintaining code health with robust architecture and guidelines.
> Sharing and skilling up tech skills to be the best front-end team.
> Building an automated process for developers’ growth.
Conclusion
As a Sass, we are continuously working on adapting to the challenges of international logistics.
Continuously scaling to build faster MVP for new products, maintaining the standard of the products, and meeting existing customer expectations is not an easy job, and that’s why we all love to work through it and skill up to our best level to aspire the best user experience for our client.
Let us know your views and opinions on our tech stack in the comments. We’d love to hear from you !!
Join Our Team 💫
If you wish to join our super cool and growing team, reach out to our career page or on LinkedIn.
We are always looking for great folks to build and grow with us :)
