DEV Community

Manoj Kumar Mishra
Manoj Kumar Mishra

Posted on • Updated on

Large scale E-Commerce Website Architecture

E-commerce websites mainly consists of static and dynamic contents.

Image description

Static Content: From CMS(Strapi, Contentful, AEM etc)
Static contents examples are blogs, articles, authors list, carousels, media etc which are parts of home page and other pages.
Static content is created by content team, managers etc and its configured in CMS ( Content management systems). There are few free CMS eg- strapi which can be hosted inside cloud (ECS in AWS etc), Media files are saved in AWS S3.
There are few popular paid CMS also like contentful, AEM etc. Front End ( NextJs/ReactJS) accesses this content via REST or GRAPHQL APIs.
Links:https://strapi.io/blog/how-to-build-a-forum-app-with-next-js-and-strapi-cms

Dynamic content: From Back-End
Non static components includes cart items, orders, user data, payment details etc. This conent comes from backend like NestJS(Typescript)/Java + database hosted on AWS/cloud providers. BE can also be collection of microservices which includes apis for Cart, Inventory, Orders, Products, Customers, Rewards, Loyalties, Location, Search etc. These microservices can be event based ie SQS/SNS so that different jobs can be triggered based on events/webhooks.

Front-End Monorepo: NX, Turborepo, Lerna etc
We can host multiple React/NextJS domains in one monorepo and share the code between them. This shared code could be apis to access common static/dynamic contents specified above. If we have storybook setup then we can reuse the same code to create the styled components/pages for all/required domains.
Links: https://blog.logrocket.com/build-monorepo-next-js/,
https://nx.dev/concepts/more-concepts/turbo-and-nx

Repo folder structure somewhat looks like this. We can have shared code and then separate code for each domain. These domains will be hosted on different urls.
Image description

On github workflow it looks like this for 3 site configuration , deployed via common monorepo. So user can check the deployment of each site for each PR/commit at any given time. It also has storybook deployment on Chromatic. So user can go inside the Chormatic link and open storybook and test each component for each PR/commit independently.
Image description

Storybook:
Storybook is a development environment tool for ReactJS/NextJS etc that is used as a playground for UI components. It runs outside of the ReactJS/NextJs/Domain on a different url and allows the developers to create and test components in isolation. So even if site is not functioning still developers can tinker with any of the components. Its helps greatly in troubleshooting.

Another major feature of Storybook is the modular and reusable architecture. It is based on atomic design https://blogs.halodoc.io/atomic-design-system-implementation-at-halodoc/ ie atoms, molecules, organisms etc as shown in below picture. Template part is like layout for React/NextJs pages, so we can directly import them inside the pages of React/NextJS pages. So how it works is Templates ie pages can have many Organisms, Organisms can have many Molecules and Molecules can have many Atoms.
Links: https://storybook.js.org/blog/get-started-with-storybook-and-next-js/

Image description

To Be Continued...

Top comments (0)