Frontend Architecture for Insane Scalability ⚠️

What do we mean by “Architecture”?

Why do we need a frontend architecture?

When do we need to think about frontend architecture?

Why did we choose Next.JS?

What looks good with Next.JS?



React Hook Forms

React Query

Eslint and Prettier

How to Organize your Code for a Potential Grow

Divide and Conquer

  • Components. Classic, right? Every React-based project has this folder, but the problem is what’s inside it. On most occasions is where the mess resides. For me, it should have the following subfolders, at least:
    - Ui. All the basic components, the smallest components of your interface should be inside this folder, which can be exported to a new repository and uploaded to a package manager like npm later down the road.
    - Layout. Your web application may have different layouts depending on your route. For example, you may have a home page layout and a dashboard layout, depending on if you are logged in or not. All these layouts should be inside this folder.
    - Page-related components. Imagine you have a products page with a ProductGrid component that is only useful in the context of the products page. Then you should have a folder inside the components directory called products with this component inside. Of course, ProductGrid will use components from the ui and products folder.
    - Section. All the components that are common to different layouts or pages such as headers, and footers, but are not that generic to export them to a common package should go in this folder. These components should be built on top of components from the ui folder, but they are used by many page-related components.
    - Seo. I like having a page just for SEO components that I will use in my pages.
    - Context. Put here your context providers and your hooks to access them.
  • Lib. In this folder, I handle all the logic of the application itself. Internationalization, hooks to reuse some logic across components and constants.
  • Api. Of course, this folder will have all the backend calls and services, preferably using hooks to create the requests (React Query). I divide them by domain. Following the previous examples, CRUD operations related to products would go in api/products.
  • Public. All the media: photos, videos, fonts, favicon.
  • Styles. Usually pretty silly, but I add my tailwind styles to it.
  • Locale. JSON files including the translations to all the languages covered by the application.
  • Pages. provided when generating a Next.JS project, it will contain the different routes within your web application. I recommend you set up an internationalization system in the URL itself. This can be easily done by creating a folder named [locale]. Then you can create a Provider with access to the route query and get the language from the URL. This can be covered in another article with code examples.
  • Configurations files such as .prettier, .eslintrc, nextjs.config.js, tailwlind.config.js, etc… are in the top-level folder.

React Patterns you should follow

How to Manage your Application State

When do we need to abstract logic?





Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to analyze JVM Heap dump


Quick Reference on CSS Flexbox

Manage Customer Relations with SuiteCRM on Alibaba Cloud

Rockset Is Up to 9.4x Faster than Apache Druid on the Star Schema Benchmark

How to Connect Azure Data Lake To Snowflake

Real-time IoT app with React + Firebase + esp8266

Asterfusion Arm-based DPU SmartNIC solution

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Christian CP

Christian CP

More from Medium

React v18: Why useEffect Suddenly Got Crazy?

double mount in react useEffect() hook

React project structure for scale: decomposition, layers and hierarchy

Front-End Architecture Part Ⅰ

React start losing its way