Chaldal.com tech stack

I often get asked about chaldal.com tech stack on social media. I tried to answer them - but they are scattered around in different groups and aren’t up to date.

So I decided to write a separate post with up-to-date information about chaldal.com tech stack.

TLDR

The TLDR version of the post is - F#, C#, MSSQL, .Net, React, React-Native, Azure cloud

I’ll try to explain the whole stack in more detail. In case you already don’t know, there are many other projects in Chaldal other than the chaldal.com website that we all see and love ;). So here I’ll try to separate them based on projects. Starting with chaldal.com itself.

Chaldal.com

As already told in TLDR, chaldal.com usages F#, C#, MSSQL, .net, react and react-native.

Backend / API

1. C#
2. F#
3. .Net
4. MSSQL

Originally written in C# but we are transitioning more into F#. Because we love functional programming and the awesome type safety F# provides. I’ll write more in detail about why we love F#. Some legacy code still uses .Net framework but we are transitioning into .netcore.

We use MSSQL as our primary database.

We host on our own servers, distributed into 3 data centers, in two cities ( 2 in Dhaka, and 1 in Jashore).

We use Microsoft Azure dev-ops for development. Also, use Azure pipeline for CI/CD.

Frontend

Chaldal.com

1. ReactJS
2. ExpressJS

Chaldal frontend is well known in the local dev community for its snappy performance. Originally written back in 2013, when Reactjs just got released - the website performance was a surprise for most people. I remember when I first used chaldal.com even before joining Chaldal - I was surprised when I toggled the language (the instant change of the language).

Some might think it’s fast because of just using Reactjs. But that’s not true. Yeah - Reactjs did facilitate it, but it was very careful thought and architecture that made the whole experience. Here are some breakdown

1. Server Side Rendering: Fast first paint with the help of SSR
2. No blocking network request: Again to help with the fast first paint - there are no blocking assets. It analyzes the request and inline styles along with HTML.
3. Preload freqently used data: Data like banners, categories, stores, locale, and delivery slots data are hydrated into the frontend when the webpage loads.
4. Preloaded logic: We also preload some dynamic logic from the backend. Like price calculation, Discount availability, delivery slot distribution, etc. Usually, to prevent duplication of such business logic, people rely on the backend and had to make frequent API call. To overcome this challenge - we came up with a solution where we can share these business logic in a cross-platform manner. This is why we don’t even need to rely on the backend to calculate the shopping cart total. Which makes adding products to the shopping cart seamless. I’ll write more about this in the future.
5. Caching on FE server: We cache some less dynamic content on the FE server. This way we don’t overwhelm the backend and also avoid making slower API call.
6. No loader: We try to make the website work without any loader animation. To achieve that - there are a few strategies we follow.
   1. Preload contents
   2. Structure in a way that when an API call is a must, we make the UI change first and do the API call later. In case of failure - we update the UI again. Example - When we add a product to the cart - we do make an API call - but we don’t delay adding the product to the cart in FE. We first add the product to the cart visually and then make the API call.
   3. Skelton loader/fade instead of a spinning loader. Because the spinner loader makes the whole UI refresh with just a small spinner. The visual change is big and makes the user experience bad.
7. CDN: Serving CSS, JS, and images through properly implemented CDN.
8. Image Loader: Custom image loader - which gives us control over the order and quantity of image loading. Also, load different quality images based on user internet connection and device pixel density.

Mobile App

Android: https://play.google.com/store/apps/details?id=com.chaldal.poached

iOS: https://apps.apple.com/us/app/chaldal-online-grocery/id1104493220?platform=iphone

1. React Native
2. MobX

Originally our mobile was written using Xamarin. But I rewrote the app from scratch back in 2019.

Historically - we didn’t invest that much in our mobile app but this has changed recently with new our UX team.