This site runs best with JavaScript enabled.Drawing the System Design of a Product - High level design

Drawing the System Design of a Product - High level design

High level design

Understanding these ideas should assist grasp system principles: Caching, Indexes, Proxies, Queues, Replication, and SQL vs. NoSQL.

A good system design should have the following attributes: scalability, reliability, availability, efficiency, and manageability.

A simple basic high-level design


React is a JavaScript library used to create user interfaces. Facebook and a community of developers and businesses manage it. React can be used to build single-page or mobile apps.

Why does React matter?

When working with the DOM API, difficulties may arise. React is a virtual browser that lets developers write code in a way that is friendlier than the traditional one.

React's virtual browser is like an agent, mediating the relationship between the developer and the real browser.

React gives developers the ability to state their User Interface (UI) elements and the current state of the UI declaratively. To define how transactions are made, developers used to outline processes, but now they only describe interfaces in terms of a final state (like a function). React takes charge of updating the User Interfaces after transactions are made to that state.

React has a limited API, since it's only JavaScript. There are just a few functions to understand, and how to utilize them. In addition to your JavaScript capabilities, your React development abilities benefit from your familiarity with React. There are no admission restrictions. React development can be quickly learned by JavaScript developers.

Reusable, composable, and stateful components are used. The React framework makes it possible to re-use a single component in many user interfaces, and components can also be nested inside of other components.

The reactive updates nature. When a component's state (i.e., its input) changes, There is no need to concern ourselves with reflecting these changes, managing when we introduce changes to the browser, or even updating the DOM; React will just update the DOM in response to state changes.


Redux is a tool for managing states. It can be used with any other JavaScript framework or library, though it's most commonly used with React. With a file size of only 2KB (including dependencies), you won't have to worry about it increasing the asset size of your application. Redux will be useful in our project in the following ways:

  • The state of Redux is predictable.
  • The ability to maintain. Redux is particular about how code should be arranged, which makes it easier for someone with Redux understanding to comprehend the structure of any Redux application. This makes it easier to maintain in general.
  • Redux makes debugging an application a breeze.
  • Testing Redux apps is simple because functions are used to update the state of pure functions.


Express is a Node.js web application framework that offers a comprehensive range of functionality for both web and mobile apps.

Why Express?

  • Allows middlewares to be configured to reply to HTTP requests.
  • Defines a routing table for doing various actions based on HTTP Method and URL.
  • Enables dynamic rendering of HTML pages by giving arguments to templates.


Redux-saga is a redux middleware module that makes it easy to handle side effects in your redux application. It accomplishes this by utilizing an ES6 feature known as Generators, enabling us to develop asynchronous code that appears to be synchronous and is simple to test.


  • MVI (Frontend)

The frontend will use React and Redux to implement the MVI (Model-View-Intent) architecture. The graphic below explains it. image

  • The intent is created by the user. For example, the user may click a registration button.
  • In Redux, this intent is associated with an action. This action is sent to a store that already has state.
  • The state and action are sent to the reducers that we create via the store.
  • The reducers update the state without causing it to change. The newly created state is returned to the storage.
  • The store communicates this changed information to React, which accepts it and renders our components as the final UI.

Why MVI?

According to the preceding description, there is a one-way flow of information such that none of these components can break and interact with each other. This method restricts any change to the state of the UI to a predefined set of activities (intentions). A user's undefined activity cannot create any unwanted changes to the system. The undefined action of a user cannot cause any undesirable modifications to the system.


The backend exhibits a Model-View-Controller architecture. The Model will be our The architecture of the backend is Model-View-Controller. The Model will be our Mongodb database, which will be interfaced using Sequelize. The View is what the user sees and interacts with. We are not creating any templates for this project. All responses are in JSON format, and as a result, the routers take on the function of the view since they will be the initial point at which the frontend interacts with our API.

The Controller handles a given request and returns the required result. It manipulates database data and provides a response indicating whether or not the data modification was successful. Each route is associated with at least one HTTP method, each of which has its own controller.

The HTTP method of a route may also include middlewares that check incoming data before it is transmitted to the controller, such as ensuring that a user is authorized. The following diagram depicts the aforementioned architecture: mvc image

MVC (Entire Project): The Model View Controller architecture will be visible across the application, both on the frontend and on the backend. Our View would be the frontend. Our Controller would be at the backend. Our Model would be the information in our backend database. model image

Description of the product’s Web/HTTP APIs

Explicit about what is expected from the system. A good example from twitter would be:

  • There is an endpoint for posting a tweet: the tweet has a key, tweet data, and location, and upon POST, it returns the URL of the tweet.
  • User can get a tweet by passing tweet_id which will return info about the tweet in JSON format.
  • The frontend product will consume the backend that is built with Express.

What types of Databases does it connect to?

A database connection is not required for the frontend. A MongoDB database will be used as the backend.

For something like twitter, the schema would include tweet, user(name, email,dob,id, ect), user_follow, etc.

Tweet - would include fields like: id, userid, created_at, hash,lang,reply_count,retweet_count, entities(hashtags, media)

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.

You can look into data sharding and caching, which are also significant in system design.

Share article
James Chege

James Chege is a software developer in Nairobi