/handbook/react-best-practices/project-skeleton/

Good Work. Since 2009

Our Work

What We Do

Digital Platform MigrationsKey SolutionsManaged ServicesStaffing SolutionsIndustriesProducts

Drupal to WordPress

Kentico to WordPress

Sitecore to WordPress

AEM to WordPress

Umbraco to WordPress

Any CMS to WordPress

Arc XP to WordPress

Hubspot to WordPress

Contentful to WordPress

Optimizely to WordPress

Craft CMS to WordPress

Sanity to WordPress

Strapi to WordPress

OnePress

OnePress is a way to use WordPress for multi-brand organizations, intranet network sites or large publishers.

Headless WordPress Development

Composable architecture and omnichannel content delivery engineered without sacrificing marketing autonomy.

WordPress as a composable DXP

We make a case for WordPress as a composable DXP when the market has realized that monolithic systems are not going to cut it

Frappe/ERPNext

Build scalable ERP and custom web applications with ERPNext — from implementation and integrations to long-term support.

Discovery

Strategic consultancy & project roadmap

Growth Services

On demand development & consultation

Site Maintenance

Annual maintenance. Done for you

QE Services

Testing across SDLC for assured quality

Hosting Migration

Move to a performant hosting with zero downtime

WooCommerce

Enterprise commerce delivered without lock-in

AI

Unlock real use cases and integrations

All Services

A suite of services for any need

Staff Augmentation

Scale your team quickly with vetted WordPress engineers, ready to join in a week.
backed by flexible pricing, transparent practices, and full-time zone support.

Technology STACK

Digital publication & media

Deliver content-rich digital experiences with scalable WordPress and headless solutions.

Large product & SaaS

Accelerate your product or SaaS growth with tailored development and robust integrations.

Automotive

Build secure, high-performance WordPress solutions for the automotive industry’s unique needs.

Conglomerates

Handle complex, multi-business operations with unified digital strategy and infrastructure.

eCommerce

Scale your e-commerce with WooCommerce, integrations, and custom extensions for growth.

All Industries

Helping enterprises across industries with scalable WordPress solutions and tailored strategies.

GoDAM

Built-in transcoding, adaptive bitrate streaming, interactive video overlays, and asset management.

EasyEngine

Server management tool that makes using WordPress on Nginx easy.

Web Auditor

Performance Audit & Insights for your Website.

rtMedia

A complete media management plugin for WordPress.

Resources

Resources

Extensive resources published from our enterprise web practice, covering migrations, multisite consolidations, DXP, and more.

Newsletters

Subscribe

Client Handbook

Blogs

About Us

Good Work.
Good People.

About Us

The story behind becoming the go-to agency for global enterprises, & delivering scalable digital experiences with our 250+ professionals.

Partnerships

WordPress VIP Agency Partner

Pagely Partnerships

Frappe / ERP Partnership

Open Source Contributions

Careers

CLEAR

contact us

Resources React project best practices React skeleton

Topics

On this page

• React project best practices
• Project structure
• State management
• Component architecture
• Styling
• Hooks
• Performance optimization
• Commit messages
• Code quality
• Data loading
• Testing
• Dependency management
• Accessibility
• React frameworks
• Documentation
• Deployment and monitoring
• React skeleton
• Appendices

Repo link

Monorepo

Why is monorepo better than monolith repo?

Why use pnpm

Use of packages

Benefits of using packages and config packages in a monorepo

Naming conventions

 apps

 packages

docs

.husky

Design tokens

Current Setup – Tailwind + CSS

Last updated on May 26, 2026

React skeleton

It may include:

• Config files
• Directory structure.
• Common scripts should be present.
• Dependencies are already chosen.
• Pre-setup, build tooling like Vite

Repo link

React Skeleton

Monorepo

A monorepo is a single repository containing multiple projects/packages (apps, libraries, tools, configs), but each is modular and independent.

			root/
 ├── .github
 ├── .husky
 ├── apps/
 │    ├── docs-design-system/
 │    └── web/
 ├── packages/
 │    ├── design-system/
 │    ├── config-eslint/
 │    └── config-typescript/
 └── package.json
 └── .nvmrc
 └── pnpm-lock.yaml
 └── pnpm-workspace.yaml
 └── README.md
		

Why is monorepo better than monolith repo?

In general, think of a monorepo as a ‘One big pizza’  : hard to share, everyone must eat the same thing.
On the other hand, a monorepo is ‘A buffet’  : multiple dishes, you pick what you need, but everything is in one place.

• Scaling – As the app grows, it becomes slow to build, test, and deploy. Scaling is very hard. A monorepo, scales better
• Modularity – Unlike monolith, each package is modular. You can change or replace one without affecting others.
• Team collaboration – In a monolith app, all teams work on the same giant app. Merge conflicts and stepping on each other’s toes are common. With monorepo, teams can own different packages/apps. Changes are isolated, but still in one repo for visibility.
• Visibility – It gives you visibility of your company’s entire codebase without a need to trackdown and clone a bunch of repos.
• Consistency – It’s consistent. Easy to share code via packages/(e.g., design-system, config-eslint). No need to publish to npm separately.

Examples of monorepos

• Uber– ios monorepo Uber Engineering’s iOS Monorepo
• Shopify Polaris

Why use pnpm

FeaturenpmpnpmDisk Space UsageInstalls a full copy of every package in each project’s node_modules, leading to duplication.Uses a global content-addressable store with symlinks, so packages are stored once and reused across projects.Dependency StructureFlat node_modules can cause phantom dependencies (using a package not explicitly installed).Strict node_modules, prevents phantom dependencies and enforces proper installs.SpeedSlower installs, especially for large projects and monorepos.Much faster installs due to symlinks and global caching.Workspaces/MonoreposWorkspace support exists, but limited and less mature.Strong, built-in workspace support designed for monorepos.CI/CD PerformanceHeavier lockfile (package-lock.json) and slower caching.Smaller pnpm-lock.yaml, better caching, supports pnpm fetch for optimized Docker builds.

Pnpm solves Phantom Dependency

A phantom dependency is a package that your project can import and use, even though it is not listed in your project’s package.json .

This happens because of the way npm (and sometimes yarn) flattens the node_modules folder.

Example

			{
  "dependencies": {
    "package-a": "1.0.0"
  }
}

		

Inside package-a’s package.json

			{
  "dependencies": {
    "lodash": "4.17.21"
  }
}

		

What happens with npm

• npm installs package-a and also installs lodash (because package-a depends on it).
• Due to npm’s flat node_modules, lodash may end up directly inside your project’s node_modules/.
• Now, you can do this in your code: import _ from 'lodash'; Even though you never declared lodash in your own package.json.
• pnpm uses a strict node_modules structure with symlinks.
• Each package only gets access to its own declared dependencies.
• If you try to import lodash without listing it in your package.json, it will throw an error.

Use of packages

To maintain consistency and reusability across all apps in the monorepo, we have created separate configuration packages under packages/.

These include:

• config-eslint – Shared ESLint rules for linting.
• config-jest – Shared Jest setup for testing.
• config-playwright – Shared Playwright setup for end-to-end tests.
• config-prettier – Shared Prettier configuration for code formatting.
• config-tailwind – Shared TailwindCSS configuration for styling.
• config-typescript – Shared TypeScript configuration for type checking.

Each package has its own script. When each package does its own work, we can make things dramatically faster,

Benefits of using packages and config packages in a monorepo

1. Centralized configuration – Instead of duplicating ESLint, Jest, Prettier, Tailwind, and TypeScript configs in every app, you keep them in one place (packages/config-*). Updates are made once and flow to all apps,  reducing drift and inconsistency.
2. Consistency across projects – All apps (apps/web, apps/api, etc.) use the same coding standards, test setup, and build configurations. Developers don’t need to guess which rules apply where, everything is uniform.
3. Easier maintenance – One change updates all consumers. Example: upgrading ESLint rules only requires updating config-eslint. Less chance of forgetting to update a config in one app.
4. Flexibility with overrides – Each app can still override defaults if needed.
5. Scales well for large teams – Multiple teams working on different apps don’t waste time maintaining separate configs. Reduces merge conflicts in duplicated config files.

Naming conventions

The folder structure and naming conventions in this monorepo follow industry best practices inspired by popular open-source monorepos (e.g., Next.js, Shopify’s monorepos, and others). The goal is to make the repo:

• Consistent – Anyone familiar with modern React monorepos should recognize it.
• Discoverable – Folder names clearly communicate their purpose.
• Scalable – Easy to extend as the project grows.

apps

• Contains application-level code (e.g., web, docs-ui).
• Each folder here is a deployable app.

packages

• Contains shared code and configuration that can be imported across apps.

• Subfolders:

  • config-eslint, config-jest, config-tailwind, etc. are config packages that enforce consistency across apps.
  • design-system :  a shared UI library of reusable components.

• This naming convention (config-*) makes it explicit that these are configuration-only packages.

• We use design-system as the naming convention to emphasize that this package is a centralized system of reusable components. The term “design system” communicates its purpose clearly:

  • It provides consistency in look and feel across apps.
  • It enforces reusability by keeping all shared components in one place.
  • It makes the package easy to identify and differentiate from app-specific code or utilities.

docs

• Dedicated to documentation assets.
• Keeps developer guides, design docs, and handbook content separate from runtime code.

.husky

• Contains Git hooks managed by Husky (e.g., pre-commit checks).
• Industry standard name when Husky is used.

Design tokens

Design tokens define the foundational design values of the system, such as colors, typography, spacing, and breakpoints, and ensure a consistent look and feel across all apps in the monorepo.

Current Setup – Tailwind + CSS

We are using TailwindCSS and defining our design tokens inside a shared stylesheet:

`packages/config-tailwind/shared-styles.css`

			@import 'tailwindcss';
@import 'tw-animate-css';

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
}

		

These tokens are exposed as CSS custom properties (–variables), which are then consumed by Tailwind and the UI layer across apps.

This approach works well with Tailwind because:

• Tokens are centralized and reusable.
• They can be combined with utility classes for consistent styling.
• Dark/light mode support can be added via variants.

Deployment and monitoring

PREVIOUS

Appendices

NEXT

Credits

Sayed Taqui

Author

Sayed Taqui

Author

Seasoned React, JavaScript, and WordPress Developer. Contributed significantly to WordPress Core. Currently serving as the Lead WordPress Engineer at rtCamp. Passionate about crafting innovative so…

VIEW PROFILE

Imran Sayed

Author

Imran Sayed

Author

Senior Software Engineer and Full-Stack Web Developer building high-performance, user-centric web applications that drive business growth. Expertise lies in e-commerce development, custom WordPress…

VIEW PROFILE

Ayush Nirwal

Author

Ayush Nirwal

Author

VIEW PROFILE

Amoghavarsha Kudaligi

Author

Amoghavarsha Kudaligi

Author

VIEW PROFILE

Mayank Rana

Author

Mayank Rana

Author

VIEW PROFILE

Good Work. Good People.

Industry partnerships

Compliance certifications

United States  India

© rtCamp Inc. since 2009. All rights reserved.

Terms of Service · Privacy Policy · Trust Center

Company

• About
• Case Studies
• Blog
• Careers
• Contact

Solutions

• Platform Migration
• Managed Services
• Staff Augmentation
• Decoupled Architecture
• Quality Engineering

Subscribe to our newsletter and get a few email updates every month.

subscribe to newsletter

United States  India

© rtCamp Inc. since 2009. All rights reserved.

Terms of Service · Privacy Policy · Trust Center

Cookie Consent

We value your privacy

We use cookies to give you the best possible experience. By clicking “Accept,” you consent to our use of cookies to improve site functionality, analyze usage, and personalize content and communications. Your privacy matters to us, and we are committed to handling your data responsibly and transparently. Please check our Privacy Policy for more details.

Manage PreferencesDon’t AllowAllow All

Why do we use cookies?

×

By clicking "Accept" or "Decline All" at the bottom, you consent to the use of cookies and other tools as described in our Cookie Policy in accordance with your settings and accept our Terms of Service.

Toggle EssentialEssential

Essential cookies enable basic functions and are necessary for the proper function of the website.

Name

Description

Duration

Geolocation Config

This cookie is used to store the consent settings based on the visitor's location.

30 days

Cookie Preferences

This cookie is used to store the user's cookie consent preferences.

30 days

Toggle CloudFlareCloudFlare

CloudFlare provides web performance and security solutions, enhancing site speed and protecting against threats.

Service URL: developers.cloudflare.com (opens in a new window)

Name

Description

Duration

cf_clearance

Whether a CAPTCHA or Javascript challenge has been solved.

session

Toggle CommentsComments

These cookies are needed for adding comments on this website.

Name

Description

Duration

comment_author

Used to track the user across multiple sessions.

Session

comment_author_email

Used to track the user across multiple sessions.

Session

comment_author_url

Used to track the user across multiple sessions.

Session

Toggle GodamGodam

GoDAM" is primarily a specialized WordPress plugin and media management service designed to enhance video hosting, marketing, and asset management directly within the WordPress dashboard.

Service URL: godam.io (opens in a new window)

Name

Description

Duration

user_image

Temporarily stores the path to the user's avatar or profile picture for quick rendering in the website header.

session

user_id

Stores the numerical ID of the logged-in user to maintain session continuity and basic site operations.

session

full_name

Stores the logged-in user's display name to personalize the site interface without needing database queries.

session

system_user

First-party cookie used to store basic application state identifying the current system user role.

session

sid

A generic session ID cookie used to maintain user state and functionality as the visitor navigates through the site.

session

Toggle Google reCAPTCHAGoogle reCAPTCHA

Google reCAPTCHA helps protect websites from spam and abuse by verifying user interactions through challenges.

Name

Description

Duration

_GRECAPTCHA

Google reCAPTCHA sets a necessary cookie (_GRECAPTCHA) when executed for the purpose of providing its risk analysis.

179 days

Toggle Google Tag ManagerGoogle Tag Manager

Google Tag Manager simplifies the management of marketing tags on your website without code changes.

Name

Description

Duration

cookiePreferences

Registers cookie preferences of a user

2 years

td

Registers statistical data on users' behaviour on the website. Used for internal analytics by the website operator.

session

Toggle StatisticsStatistics

Statistics cookies collect information anonymously. This information helps us understand how visitors use our website.

Toggle Factors AIFactors AI

Factors.ai is a B2B account intelligence and marketing analytics platform that helps Go-To-Market (GTM) teams identify anonymous website visitors, track buyer journeys, and measure the ROI of marketing campaigns.

Service URL: www.factors.ai (opens in a new window)

Name

Description

Duration

_fuid

It is sent to capture session details and track user behavior across your website to provide behavioral data and intent signals.

1 Year

Toggle Google AnalyticsGoogle Analytics

Google Analytics is a powerful tool that tracks and analyzes website traffic for informed marketing decisions.

Service URL: policies.google.com (opens in a new window)

Name

Description

Duration

FPGSID

Stores a session or user identifier to track how visitors interact with a website. This helps Google Analytics measure website performance, user engagement, and usage patterns.

Session

FPLC

Used by Google Analytics to link visitor interactions and sessions across multiple related domains.

20 hours

FPID

A server-side Google Analytics cookie used as an alternative user identifier when third-party cookies are restricted.

2 years

_ga

ID used to identify users

2 years

_ga_

ID used to identify users

2 years

Toggle Jetpack StatsJetpack Stats

Jetpack's built-in visitor analytics. It records page views, referring sites, search terms, and outbound link clicks, and also carries the shared visitor-tracking library used by Jetpack Instant Search and WooCommerce Analytics.

Service URL: automattic.com (opens in a new window)

Name

Description

Duration

tk_aip

Stores a list of anonymous visitor IDs so they can be merged into one identity once a visitor is recognized.

Up to 5 years

tk_tc

Used once per page load to work out which cookie domain the Tracks library should use, then removed as soon as it's read back.

Session (deleted immediately after use)

tk_qs

Queues analytics events for Jetpack's Tracks library so none are lost if the page closes before they can be sent.

30 minutes

tk_ai

Stores a randomly-generated anonymous visitor ID so Jetpack's Tracks analytics library can link tracking events to the same visitor.

Session in wp-admin; up to 5 years on the frontend

Toggle Microsoft ClarityMicrosoft Clarity

Clarity is a web analytics service that tracks and reports website traffic.

Service URL: clarity.microsoft.com (opens in a new window)

Name

Description

Duration

CLID

Identifies the first-time Clarity saw this user on any site using Clarity.

12 months

ANONCHK

Indicates whether MUID is transferred to ANID, a cookie used for advertising. Clarity doesn't use ANID and so this is always set to 0.

Session

_clck

Persists the Clarity User ID and preferences, unique to that site is attributed to the same user ID.

12 months

_clsk

Connects multiple page views by a user into a single Clarity session recording.

12 months

Toggle Parse.lyParse.ly

Parse.ly is a content analytics platform that helps publishers optimize audience engagement and content performance.

Name

Description

Duration

cookies.js_dtest

This cookie determines whether the browser accepts cookies.

session

_parsely_session

JSON document storing information identifying a browsing session according to Parsely’s proprietary definition

30 minutes

_parsely_visitor

JSON document uniquely identifying a browser and counting its sessions

13 months

Toggle SalespanelSalespanel

Salespanel is a B2B marketing and sales software that identifies, tracks, and qualifies website visitors and leads in real-time using first-party data. It helps businesses monitor customer journeys, score leads based on behavior, and syncs this data with CRMs (like Pipedrive or HubSpot) to improve conversion rates.

Service URL: salespanel.io (opens in a new window)

Name

Description

Duration

track_uid

Identify and tracking a lead

12 moths

Toggle MarketingMarketing

Marketing cookies are used to follow visitors to websites. The intention is to show ads that are relevant and engaging to the individual user.

Toggle Bing / MicrosoftBing / Microsoft

Bing, powered by Microsoft, is a search engine providing web, image, video, and map search capabilities.

Name

Description

Duration

MR

Used to collect information for analytics purposes.

6 months

ANONCHK

Used to store session ID for a users session to ensure that clicks from adverts on the Bing search engine are verified for reporting purposes and for personalisation

10 minutes

SM

Used by Microsoft in synchronizing the MUID across multiple Microsoft domains to track users for advertising.

session

MUID

Identifies unique web browsers visiting Microsoft sites. These cookies are used for advertising, site analytics, and other operational purposes.

1 year

Toggle DoubleClick/Google MarketingDoubleClick/Google Marketing

A comprehensive digital advertising platform for managing campaigns, optimizing performance, and analyzing audience data.

Name

Description

Duration

IDE

This cookie is used for targeting, analyzing and optimisation of ad campaigns in DoubleClick/Google Marketing Suite

2 years

ar_debug

Store and track conversions

Persistent

Toggle LinkedInLinkedIn

LinkedIn is a professional networking platform for job seekers, employers, and industry connections.

Name

Description

Duration

bscookie

Used by LinkedIn to track the use of embedded services.

1 year

AnalyticsSyncHistory

Used to store information about the time a sync with the lms_analytics cookie took place for users in the Designated Countries

30 days

bcookie

Used by LinkedIn to track the use of embedded services.

1 year

li_sugr

Used to make a probabilistic match of a user's identity outside the Designated Countries

90 days

lidc

Used by the social networking service, LinkedIn, for tracking the use of embedded services.

1 day

UserMatchHistory

Used by LinkedIn Ads to synchronize and match user IDs across different ad networks and data providers.

30 days

Toggle LinkedIn InsightLinkedIn Insight

LinkedIn Insight is a web analytics service that tracks and reports website traffic.

Service URL: www.linkedin.com (opens in a new window)

Name

Description

Duration

li_sugr

Used to make a probabilistic match of a user's identity.

90 days

lidc

Used for routing and session management.

24 hours

Toggle LiveIntentLiveIntent

LiveIntent provides a platform for email advertising and identity-driven marketing solutions.

Name

Description

Duration

_lc2_fpi_js

Companion cookie to _lc2_fpi used by JavaScript to facilitate cross-domain ad tracking and user identification.

1 year

_lc2_fpi

First-party tracking cookie usually associated with LiveRamp to identify users across devices for targeted advertising.

1 Year

_li_ss

Sets a unique ID for the visitor, that allows third party advertisers to target the visitor with relevant advertisement. This pairing service is provided by third party advertisement hubs, which facilitates real-time bidding for advertisers.

1 month

lidid

Collects data on visitors' behaviour and interaction - This is used to make advertisement on the website more relevant. The cookie also allows the website to detect any referrals from other websites.

2 years

Toggle Cookie PolicyCookie Policy

You can find more information in our Privacy Policy.

Allow AllDecline All

Accept