Open Dashboard →

Architecture

SenseFolks is built as a modular platform with clear separation between the dashboard, survey delivery, and response collection. This architecture ensures fast survey loading and reliable data collection.

System Overview

Frontend Layer

Website (Astro)
Dashboard (Stencil.js)
Survey Components (Stencil.js)
↓

API Layer

Main API (Express.js)
Survey Request API
Response API
↓

Data Layer

PostgreSQL
Redis
Cloudinary

Core Components

Survey Components

Framework-agnostic web components built with Stencil.js:

  • sf-pricepoint — Price sensitivity analysis
  • sf-userchoice — Choice-based preference surveys
  • sf-featurepriority — Feature ranking with drag-and-drop
  • sf-fastpoll — Quick single/multi-choice polls
  • sf-openfeedback — Open-ended feedback collection

Dashboard Application

Full-featured survey management dashboard:

  • User authentication (email + Google OAuth)
  • Survey creation and configuration
  • Real-time response analytics
  • Response export (CSV, JSON)
  • Demographic segmentation

API Services

Three specialized API services:

  • Main API — Dashboard operations, authentication, analytics
  • Survey Request API — Lightweight survey config delivery
  • Response API — Survey response submission

Data Flow: From Survey to Dashboard

Survey Embedding Flow

  1. User embeds survey component with survey-key attribute
  2. Component fetches configuration from Survey Request API (lightweight, cached)
  3. Survey renders with questions and options from configuration
  4. User completes survey and submits
  5. Response submitted to Response API with validation
  6. Dashboard shows real-time analytics update

Response Data Collected

Each response includes:

  • Survey answers and selections
  • Geolocation data (country, region) for segmentation
  • Timestamp and session information
  • Custom attributes (if configured in dashboard)

Security

  • Authentication — Session-based with Redis store
  • Password Hashing — Argon2 algorithm
  • CSRF Protection — Token-based validation
  • Rate Limiting — Per-endpoint limits
  • CORS — Configurable origin policies
  • CSP — Content Security Policy headers

Technology Stack

Layer Technology
Survey ComponentsStencil.js, TypeScript
Dashboard Frontend Stencil.js, Socket.io, Plotly.js
WebsiteAstro, TypeScript
API ServersExpress.js, TypeScript
DatabasePostgreSQL, Sequelize ORM
CachingRedis, ioredis
File StorageCloudinary
EmailPostmark