Godrej Design Lab

Architecture Overview

This architecture presented here is a simplified version to get a broad sense of how things work and interact. The actual architecture is explored in-depth in the infrastructure manual.

The website broadly comprises of two parts:

  1. Frontend: What runs on the web browser
  2. Backend: This in turn comprises of two layers

1. Website Frontend (React)

This is what runs on the end-user's web browser

It's written in React, Tailwind and React Router.

2.A Backend Layer 2 (Strapi CMS server)

This serves as the content layer.

It leverages Strapi, is written in TypeScript/JavaScript, and runs on nodeJS.

Strapi is a headless content management system (CMS), providing an interface for managing content. However, it does not come with a presentation layer. It does expose a REST API over HTTP, allowing structured content to be retrieved by others.

2.B Backend Layer 1 (React-Router/Express app server)

This serves as the presentation layer, fetching content from the Strapi REST API, rendering the markup and sending it back to the user.

It's written in TypeScript/JavaScript, and runs on nodeJS.

The UI is built with React, and the routing is managed by React Router and Express.js.

React and React Router run both on the frontend and the backend.

User/Data Flow

System architecture and data flow

When a visitor accesses the website:

  1. The browser sends a request to the React/Express frontend server.
  2. The frontend queries the Strapi backend over HTTP through its REST API.
  3. Strapi responds with the requested content.
  4. The frontend processes this data and delivers it to the user's browser.

The underlying server infrastructure hosting both the Strapi backend and React/Express frontend is documented in detail within the Infrastructure Manual.