This site runs best with JavaScript enabled.Drawing the System Design of a Product

Drawing the System Design of a Product

Investing in scaling before it is required is often not a good business decision; however, putting some effort into the design now can save time and money later. Understanding distributed system principles would be considerably aided by familiarizing with these notions: Consistent Hashing, the CAP Theorem, Load Balancing, Caching, Data Partitioning, Indexes, Proxies, Queues, Replication, and deciding between SQL and NoSQL.

A good system design should address Scalability, Reliability, Availability, Efficiency, and Manageability.

A simple basic high-level design using technologies below


In computing, React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

Why React?

Working with the DOM API is hard. React basically gives developers the ability to work with a virtual browser that is more friendly than the real browser. React’s virtual browser acts like an agent between the developer and the real browser.

React enables developers to declaratively describe their User Interfaces and model the state of those interfaces. This means instead of coming up with steps to describe transactions on interfaces, developers just describe the interfaces in terms of a final state (like a function). When transactions happen to that state, React takes care of updating the User Interfaces based on that.

React is just JavaScript, there is a very small API to learn, just a few functions and how to use them. After that, your JavaScript skills are what make you a better React developer. There are no barriers to entry. A JavaScript developer can become a productive React developer in a few hours.

The use of reusable, composable, and stateful components. In React We can reuse a single component in multiple User Interfaces, and components can contain other components.

The nature of reactive updates. When the state of a component (the input) changes.we do not need to worry about how to reflect these changes, or even manage when to take changes to the browser; React will simply react to the state changes and automatically update the DOM when needed.


Redux is a state management tool. While it's mostly used with React, it can be used with any other JavaScript framework or library. It is lightweight at 2KB (including dependencies), so you don't have to worry about it making your application's asset size bigger. Redux will be appropriate in our application in the following ways:

  • Redux makes the state predictable.
  • Maintainability. Redux is strict about how code should be organized so it makes it easier for someone with knowledge of Redux to understand the structure of any R edux application. This generally makes it easier to maintain.
  • Redux makes it easy to debug an application.
  • It is easy to test Redux apps as functions used to change the state of pure functions.


Express is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.

Why Express?

  • Allows to set up middlewares to respond to HTTP Requests.
  • Defines a routing table which is used to perform different actions based on HTTP Method and URL.
  • Allows to dynamically render HTML Pages based on passing arguments to templates.


Redux-saga is a redux middleware library that is designed to make handling side effects in your redux app nice and simple. It achieves this by leveraging an ES6 feature called Generators, allowing us to write asynchronous code that looks synchronous, and is very easy to test.


  • MVI (Frontend)

The frontend will implement the MVI(Model-View-Intent) architecture using React and Redux. It is described by the diagram below: image

  • The user creates an intent. For instance the user clicks a signup button.
  • This intent is mapped to an action in Redux. This action is dispatched to the store which already has state.
  • The store sends the state and action to the reducers that we define.
  • The reducers update the state without mutating it. The new state is returned to the store.
  • The store sends this updated state to React which takes in the state and gives out our components as the final UI.

Why MVI?

From the above description, there is a unidirectional flow of information such that none of these parts can break and interact with each other. This kind of approach restricts any change to the state of the UI only via a defined set of actions (intentions). An undefined action by a user cannot cause any undesired change to the system.


The backend exhibits a Model-View-Controller architecture. The Model will be our Mongodb database interfaced by Sequelize. The View would be that which a user will see and interact with. In this project, we are not rendering any templates. All responses are in JSON format and with this, the routers assume the role of the view since it will be the first point the frontend interacts with our API.

The Controller is that which handles a specific request and responds with the desired output. It manipulates data in the database and returns a response confirming whether the said data manipulation was successful or not. Each route has at least one HTTP method attached to it and this HTTP method has its own controller.

A route’s HTTP method may also have middlewares that validate incoming data before it is sent to the controller, for example, validates that a user is authenticated. Below is a diagram describing the above architecture: mvc image

MVC(Whole Project): The Model View Controller architecture will be seen in the entire application, both frontend and backend. The frontend would be our View. The backend would be our Controller. The information in our backend database would be our Model. model image

Description of the product’s Web/HTTP APIs?

The frontend product will consume the backend that is built with ExpressJS.

What types of Databases does it connect to?

The frontend does not need to connect to a database. The backend will be connected to a Mongodb database.

Why Mongodb?

  1. Full-text search is available when searching for strings with the execution of vector operation and string search. This was needed to implement search functionality in the backend. Mongodb provides enterprise-class performance and functions among current Open Source
  2. Mongodb provides enterprise-class performance and functions among current Open Source DBMS with no end of development possibilities. This gives us peace of mind because any vulnerabilities found can be combated easily and quickly due to it being open-source
  3. Mongodb is a relational database which provides for strong data typing and validity checks to ensure that data falls within acceptable ranges, and the required data is present. Referential integrity among tables prevents records from becoming incomplete or orphaned. Data integrity helps to ensure accuracy and consistency of the data.
Share article
James Chege

James Chege is a software developer in Nairobi City