Godrej Design Lab

Codebase Structure, Dependencies and Navigation

Directory Structure

A quick overview of the project directory:

godrej-design-lab

│

├── .gitignore

├── .tarignore

		# Used to exclude files when packaging for deployment

├── .npmrc

		# Custom configuration for pnpm behavior

├── appspec.yml

		# AWS CodeDeploy application specification file; defines deployment hooks, file placement, and scripts to be executed during lifecycle events

├── pnpm-workspace.yaml

		# Identifies the directories to designate as "workspaces"

├── package.json

├── pnpm-lock.yaml

		# Lockfile maintained by pnpm; equivalent to the package-lock.json file that npm manages

├── README.md

│

├── apps

│  ├── cms

		# Code for the Strapi CMS

│  └── frontend-website

		# Code for the React frontend

│

├── docs

│  └── *.md

│

├── node_modules

		# Where the 3rd-party dependencies are installed

│

├── patches

│  └── *.patch

		# Patches that modify dependencies in node_modules

│

└── shared

		# Code that is used across multiple apps in this project

   ├── lib

   └── typescript

Dependencies

This project relies on several 3rd-party libraries. Here are a few whose purposes may not be immediately obvious:

  • @fastify/deepmerge: Used to merge objects
  • strapi-plugin-required-relation-field: Ensures that relation attributes (in Strapi) can be made mandatory
  • strapi-plugin-webtools: Adds the notion of URLs to content-types and makes documents accessible through their URL alias attributes
  • @fontsource/courier-prime: Instead of manually downloading, placing and referencing them from the public folder, using this package makes the font part of the project's dependencies
  • @strapi/blocks-react-renderer: Adds a React component that supports customizing the rendering of Strapi's rich-text attribute
  • react-accessible-headings: Introduces a React heading component that wraps over h1 to h6 HTML tags; ensuring that the hierarchy of headings in a page is strictly sequential (i.e. an h4 should never sequentially follow an h2, only an h3 can)

Navigation FAQs

Where is the code for X? Where to find the code Y? These and many more are the questions that are answered in this section.

Paths mentioned below that begin with a leading slash (/) refer to the root of the project folder, and not the root of the file-system.

Where is the CMS code?

/apps/cms/

This houses the Strapi CMS application. This is a typical Strapi (v5) directory layout.

See this link for more information.

Where is the frontend code?

/apps/frontend-website/

This houses the React/React Router/Express application.

What is the /shared directory?

Code that is common to and used across all the applications (or more specifically, "workspaces" in pnpm's verbiage).

Where is the frontend code for XYZ page?

If you're looking for the code for the "About Godrej Design Lab" page, you aren't going to find an about-godrej-design-lab.tsx file anywhere in the codebase. The content for every page is expressed on the CMS (i.e. stored in the database), and not in code. Every piece of content is housed within a Strapi component.

The frontend rendering code for every Strapi component can be found at /apps/frontend/src/cms/components/.
Also, (some of) the component code leverages common library code which is at /apps/frontend/src/__lib/

What is the __lib directory?

This has common code that is used throughout an application, and not just in one specific place.

The CMS application has a __lib folder.
The frontend application also has its own __lib folder.

Aren't the /shared and __lib directories kind of the same?

Kind of.

/shared contains code that is used across the entire codebase.
__lib contains code that is used across a single application.

Both the CMS application and the frontend application have their own __lib folders.

What is the __lib/this directory?

This contains common code that is only specific to that project. Hence, the word "this".

The code in the __lib folder but with the exception of the __lib/this folder is code that is extremely agnostic and re-usable and is not specific to this application.

Over time, the code within a application's __lib folder (but not the __lib/this folder) is refactored and moved to the /shared folder.

What is in /patches?

At the time of writing, these only apply to the CMS application. For the Strapi CMS application, some of its dependencies (in node_modules) needed to be modified in order to get things to work.

The /patches folder contains patch files. These resemble git patch/diff files. The files are automatically recognised and picked up by pnpm (the package manager and task runner used) and are "applied" when the code is executed.

What code in the Strapi application is specific to this project?

Strapi expects a certain directory structure/layout. It designates specific folders where various custom code can be placed. This convention has been preserved and adhered to.

You can find custom configuration at /apps/cms/config/.

There are custom content-types and custom components, which can be found at /apps/cms/src/api/ and /apps/cms/src/components/ respectively.

In addition to that, some custom bootstrap code has been added which can be found at /apps/cms/src/index.ts and /apps/cms/src/__lib/. This is responsible for initializing the dashboard layout and other presentational aspects for the attributes defined in content-types and components. Out of the box, Strapi does not offer a native way of configuring these. Hence, this code adds support for that. You'll find __ keys in the JSON declaration files of the content-types/components, which influence the layout/presentation of the attributes.

Describe the structure of the frontend application

godrej-design-lab

│

├── public

	# Where all the static assets go

├── src

│  ├── __lib

		# Common code shared across the application

│  ├── layouts

		# React Router layout routes (see https://reactrouter.com/start/framework/routing#layout-routes)

│  ├── static-pages

		# Static, flat implementations of some of the pages from the design (Figma). Written during the initial development phase. Currently, they simply reside dormant and inaccessible (from the public). These routes however can be accessed in the development mode, but not in production.

│  ├── cms

		# All the code for the CMS routes. Code in here basically sets up a catch-all route handler that matches any URL and "forwards" the requests to the Strapi server.

│  ├── root.tsx

		# Root route from React Router, that is mandatory (see https://reactrouter.com/api/framework-conventions/root.tsx)

│  ├── stylesheet.css

		# The Tailwind stylesheet

│  └── routes.ts

		# Route manifest from React Router (see https://reactrouter.com/api/framework-conventions/routes.ts)

│

├── env.ts

	# Environment contants/variables

├── react-router.config.ts

	# React Router's configuration (see https://reactrouter.com/api/framework-conventions/react-router.config.ts)

├── tailwind.config.ts

	# Tailwind configuration

├── tsconfig.json

	# TypeScript configuration

└── vite.config.ts

	# Vite configuration

	# (Vite is the tool that is used to build and bundle the code during development and for production as well.)