Technical Handbook
Solution Overview
High-level architecture and technical details of the Formbricks platform
The Formbricks platform is designed with a modern, unified architecture that prioritizes developer experience and performance. This overview outlines the system’s architecture, key technology choices, and how different components interact.
System Architecture
Formbricks uses a unified architecture with Next.js at its core, serving both the frontend and backend capabilities. Here’s an interactive overview of the system:
Key Components
Users
- Mobile Users: Access surveys through native mobile applications
- Web Users: Interact with embedded survey widgets on websites
- Link Survey Users: Access surveys directly through shared URLs
- Admins: Manage surveys and view responses through the web dashboard
Client Applications
- Survey Widget: A JavaScript component that can be embedded in web applications
- Mobile Application: Native iOS/Android apps that integrate with the Formbricks SDK
- Web Dashboard: The admin interface for managing surveys and viewing responses
Core Platform
- Next.js Server: The central component that handles:
- Frontend rendering and SSR
- API routes for client communication
- Business logic implementation
- Survey display and response collection
Data Storage
- PostgreSQL Database: Primary data store for:
- Survey definitions
- Response data
- User and organization information
- Redis Cache: Performance optimization through:
- Caching frequently accessed data
- Reducing database load
- Improving response times
Communication Flow
-
Client Interaction
- Web users interact with embedded survey widgets
- Mobile users engage with surveys through native apps
- Link survey users access surveys directly via URLs
- Admins manage the system through the web dashboard
-
Data Flow
- Clients communicate with the Next.js server via REST APIs
- Survey data is fetched and responses are submitted over HTTPS
- The server processes requests and interacts with the database using Prisma ORM
- Frequently accessed data is cached in Redis for performance
-
Data Storage
- Persistent data is stored in PostgreSQL
- Frequently accessed data is cached in Redis
- File attachments are handled through the configured storage provider
Technology Stack
- Frontend: React, TailwindCSS, Radix UI
- Backend: Next.js App Router with API Routes
- Database: PostgreSQL with Prisma ORM
- Caching: Redis
- API: REST with OpenAPI specification
- Testing: Playwright for E2E, Vitest for unit tests
Was this page helpful?