Inspired by BulletProof React, I applied its codebase architecture concepts to the Twenty codebase.
You might be wondering:
What is Twenty?
What is state management?
Let’s find out.
Press enter or click to view image in full size
What is Twenty?
Twenty is an open-source CRM that gives you the building blocks to create exactly what your business needs.
Main Features
Calendar & Emails: Sync your mailbox and calendar to see all communications on your CRM records. Learn more.
Data Model: Create custom objects and fields to match your unique business processes. Explore.
Data Migration: Import and export your data via CSV or API. Get started.
Views & Pipelines: Organize your data with table views, kanban boards, and sales pipelines. Discover.
Workflows: Automate your business processes and integrate with external tools. Build automations.
AI: Enhance your CRM with AI-powered features and agents. Explore AI.
Dashboards: Track performance with custom reports and visualizations. View dashboards.
Permissions & Access: Control who can view, edit, and manage your data with role-based permissions. Configure access.
Notes & Tasks: Create notes and tasks linked to your records for better collaboration.
API & Webhooks: Connect to other apps and build custom integrations. Start integrating.
I copied the above info from the Twenty documentation.
What is state management?
In the context of frontend development, state management is about how you manage your application’s state. Whether its component specific or application wide, you need to use a common pattern across your codebase to avoid issues like props drilling, lifting state up or worse, causing re-renders too many times.
You can manage a component’s state using hooks like useState that React provides. For the global state management, you want to use libraries like Zustand or server cache state strategy. In the OSS, I found these libraries (Zustand or server cache state strategy) used commonly to manage state.
In this series, you will learn how Twenty manages its state. We will find out what libraries Twenty uses, how the components and files are structured, how the data flows to manage its state, in the following pages:
{id}.twenty.com/settings/general
{id}.twenty.com/settings/billing
Fun fact: Only few pages are open source in the Twenty codebase. You can confirm this in the pages folder.
About me:
Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com
Tired of AI slop?
I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns.
Your codebase. Your patterns. Enforced.
Top comments (0)