Inspired by BulletProof React, I applied its codebase architecture concepts to the Twenty codebase.
You might be wondering:
What is Twenty?
What is an API layer?
Let’s find out.
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 an API layer?
In the context of frontend development, API layer is about how you are fetching the data from a server and how you are mutating your data.
Checkout Bulletproof react’s definition for API layer.
You could use fetch, axios or even better, react-query. I found react-query being used in open source projects such as Supabase, Umami etc.,
In the upcoming articles, we will review how Twenty has implemented API layer and learn the best practices.
I would be more interested in the where this API related code is located and how they are imported, what sort of pattern is in place and is it consistent across the codebase? When you stay consistent with your patterns, you reduce technical debt and ship stable products. Even if there’s a bug, you know where to look for and quickly fix.
I am choosing the below routes to understand the API layer in Twenty codebase:
/plan-required
/create/workspace
/create/profile
/invite-team
/settings/*
I could not find any code related to objects/people or objects/companies, may be that is closed source.
About me:
Hey, my name is Ramu Narasinga. Email: ramu.narasinga@gmail.com
Tired of AI-generated code that works but nobody understands?
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)