4orm4orge

Design, publish, and analyze beautiful forms.

Comment

What it is

4orm4orge is a full-stack form-building platform for creating forms, surveys, quizzes, event registrations, and response workflows. It pairs a polished creator dashboard with a mobile-first public responder experience and a brand-new native Flutter mobile app — all designed so every surface feels like one product, not a generic template.

The idea

Most form tools feel disposable: generic look, weak branding, and a disconnect between the form you build and the experience your responders get. I wanted a platform where the visual identity is the product — where a creator can build a form and a responder can fill it out on a phone, and it reads as the same brand every step of the way. That obsession with consistency is the core of 4orm4orge.

What I built

  • A web creator dashboard (React + TypeScript + Tailwind) for building, publishing, and analyzing forms.
  • A public responder experience with theme isolation, so each form keeps its own branded look without leaking the app theme.
  • A native Flutter mobile app (apps/mobile) with secure session auth, a floating dock, a question builder, and response management — aligned to the exact same brand tokens as the web app.
  • A hardened Node.js/Express + PostgreSQL backend with JWT + refresh-token auth, file-upload security, CAPTCHA, and sanitization.

How I built it

The brand system is the foundation. I defined a token set (surfaces, ink, borders, an indigo→violet→purple accent gradient, and a custom three-line "forge" mark) in a single source on the web, then mirrored those exact hex values into the Flutter theme. A shared BrandHero component drives every high-visibility mobile screen so the app reads as one product.

Backend: Node.js, Express, PostgreSQL, Drizzle ORM. Web: React, TypeScript, Tailwind. Mobile: Flutter, Dart, Dio, flutter_secure_storage. CI: GitHub Actions runs both a web pipeline and a Flutter format/analyze/test pipeline on every push. Hosted on Railway.

Challenges

The hardest part was keeping visual identity consistent across three very different surfaces — web, public responder, and native mobile — while avoiding the theme-leakage bugs that plague form platforms. I solved it with strict token sharing and separate theme systems, then gated everything behind automated mobile CI so format, analysis, and tests are verified on every commit.

What I learned

How to turn a brand into a cross-platform design system, how to build secure mobile auth on top of a bearer-token API, and how CI can catch UI regressions that humans miss — especially fragile scroll-based interactions.

Built with

React, TypeScript, Node.js, Express, PostgreSQL, Drizzle ORM, Tailwind CSS, Flutter, Dart, Dio, JWT, flutter_secure_storage, Railway, GitHub Actions, Vitest, Flutter Test, REST API, Vite.

Built With

Share this project:

Updates

Submission history