Project overview
The challenge
- Small businesses lacked affordable tools to create custom data collection forms without hiring developers, relying on inflexible SaaS platforms charging per-form.
- Existing form builders didn't integrate analytics dashboards, requiring businesses to export data and use separate BI tools.
- Non-technical users couldn't build conditional logic forms without coding knowledge.
- Real-time business metrics required manual spreadsheet updates, causing decision-making delays.
Developed a comprehensive business intelligence platform enabling non-technical users to create custom data collection forms and visualize analytics through interactive dashboards. Built with React 17 and Material-UI, featuring drag-and-drop form builder functionality and real-time chart generation.
Architected a flexible backend supporting dynamic schema generation, allowing forms created in the UI to automatically generate database schemas and API endpoints without code deployment
Integrated ApexCharts for sophisticated data visualizations including time-series analysis, cohort retention, and custom KPI dashboards. Implemented Redux for centralized state management, enabling complex workflows like multi-step form submissions and cross-dashboard filtering.
Technical architecture
Frontend Architecture: React SPA with Redux managing global state for forms, user sessions, and dashboard configurations.
Form Builder: jQuery FormBuilder enables drag-and-drop form creation. Schemas are JSON-serialized for backend processing.
Dynamic Backend: API generates database tables and CRUD endpoints dynamically based on form schema.
Analytics Layer: ApexCharts consumes aggregated form submission data for real-time visualization.
State Management: Redux centralizes application state enabling complex cross-dashboard workflows.
Key challenges & solutions
Dynamic Schema Generation
Built backend service translating form JSON schemas into database tables and REST endpoints at runtime, eliminating traditional development cycles.
Complex Form Logic Without Code
Integrated conditional logic engine allowing business users to create rules through UI clicks, not JavaScript.
Real-Time Chart Performance
Optimized ApexCharts rendering for 10K+ row datasets through server-side aggregation, achieving sub-500ms load times.
Impact & results
Enabled non-technical users to create production forms in minutes vs. days
Reduced custom BI development costs by 80% through dynamic schema generation
Real-time dashboards improved decision-making speed significantly
Material-UI ensured consistent UX across 50+ form types
Key features
- Drag-and-drop form builder with jQuery FormBuilder
- ApexCharts data visualization library
- Material-UI component system
- Redux state management
- Multi-step form workflows with Formik
- Real-time data validation with Yup
- React Router for SPA navigation
- Cookie-based authentication
- Responsive design for mobile/tablet
- Export functionality for reports