MERN Stack Challenge: Dynamic, Airtable-Connected Form Builder with Conditional Logic

Source: Derived from Resources/Tech Hiring Task (2025).pdf — a real 2025 MERN-stack technical hiring take-home titled "MERN Stack Interview Task: Dynamic Airtable-Connected Form Builder" (estimated 2–3 days; company not named on the brief, a typical full-stack/startup hiring assessment).

Skills Required

• Languages: JavaScript (ES2020+), JSON data modeling, HTML5, CSS.
• Frontend: React (functional components, hooks — useState, useEffect, useContext, useReducer), React Router (for routes like /form/:id), controlled form inputs, conditional rendering, client-side validation.
• Backend: Node.js, Express — REST API design, route/controller structure, middleware, error handling.
• Database: MongoDB (with Mongoose or the native driver) — schema design for users, form definitions, and (optionally) responses; storing OAuth tokens securely.
• Authentication & authorization: OAuth 2.0 authorization-code flow (specifically Airtable OAuth), PKCE, state parameter, redirect/callback handling, secure access-token + refresh-token storage, session/cookie or JWT management.
• Third-party API integration: Airtable REST API — listing bases (Meta API), listing tables and fields, reading field schema/types, and creating records with a user's token.
• Dynamic UI generation: rendering a form at runtime from a field schema, mapping Airtable field types (short text, long text, single select, multi select, attachment) to the correct input components.
• Conditional logic / rules engine: modeling visibility rules ("show question B only if answer to A = X"), evaluating them live as the user types, and persisting rule definitions.
• File uploads: handling attachment fields, uploading files (e.g., to a host/CDN) and passing public URLs to Airtable's attachment field.
• DevOps / deployment: environment variable management (.env.example), deploying a React frontend (Vercel/Netlify) and a Node backend (Render/Railway), configuring CORS and production redirect URIs.
• Tooling & delivery: Git/GitHub, npm/yarn, writing a clear README.md, and recording/screenshotting a demo.
• Bonus skills: PDF generation/export, dashboard/listing UIs, form-preview rendering, required-field validation.

Background a Student Needs

A student should be comfortable building a full-stack JavaScript app end to end: a React frontend that talks to an Express + MongoDB backend over a REST API. The differentiating prerequisites here are (1) a real understanding of the OAuth 2.0 authorization-code flow — redirecting the user to a provider, handling the callback, exchanging the code for an access token, and storing it safely — and (2) the idea of a schema-driven, dynamic form, where the UI is generated at runtime from data (Airtable's field list) rather than hard-coded. They should also grasp how to model and evaluate conditional visibility rules, and be willing to read third-party API docs (Airtable Meta + REST API) to discover bases, tables, fields, and create records.

Task Summary

Build a small MERN full-stack app where a user logs in with their Airtable account via OAuth, picks one of their Airtable bases/tables, and builds a custom form by choosing which table fields become questions. The builder supports five field types and lets the creator attach conditional-visibility rules to questions. A separate viewer route renders the form, applies the conditional logic live as it is filled, and on submit writes the answers back as a new record in the chosen Airtable table using the user's token.

The Task

Objective: Build a small full-stack application that allows users to log in with Airtable, create a custom form using fields from their Airtable base, apply conditional logic, and save form responses directly into Airtable.

Tech stack: MongoDB, Express, React, Node.js. Estimated time: 2–3 days.

Core Features (step-by-step)

1. Log in with Airtable using OAuth

• Implement the Airtable OAuth flow.
• After a successful login, save the user's access token and basic Airtable profile info in MongoDB.

2. Create a Form (Form Builder)

• Let the user:
  • Select a base from their Airtable account.
  • Select a table from that base.
  • Fetch all fields from the selected table.
• From the available table fields, allow the user to:
  • Choose which fields to use as questions.
  • Rename question labels (optional).
  • Define conditional logic for when each question should appear.

3. Supported question types — Only these Airtable field types must be supported as form questions:

• Short text
• Long text
• Single select
• Multi select
• Attachment (file upload)

All other Airtable field types (checkbox, date, formula, etc.) may be skipped.

4. Apply conditional logic

• Allow users to define visibility rules for each question based on answers to previous questions.
• Example: "Show GitHub URL only if Role = Engineer."

5. View & fill the form (Form Viewer)

• Build a separate view (e.g., /form/:id) where the form can be filled.
• Apply conditional logic dynamically while the user is filling the form.
• Validate and show only the appropriate fields.

6. Save responses to Airtable

• On submission, create a new record from the form response in the selected Airtable table, using the user's token.

7. Show all (list/display the saved forms).

Bonus (optional, earns extra points)

• Basic form validation (e.g., required fields).
• A dashboard showing all saved forms.
• A form preview before submission.
• Export filled responses as PDF.

Deliverables

1. GitHub repository containing the React frontend, the Express + MongoDB backend, and a sample .env.example for Airtable credentials and config.
2. Live project link — frontend hosted on Vercel/Netlify, backend on Render/Railway or similar.
3. README.md including setup instructions, an Airtable OAuth app setup guide, a features overview, an explanation of the conditional logic, and (optional but appreciated) screenshots or a short demo video.

Helpful resources (from the brief)

• Create an Airtable account.
• Airtable OAuth Quickstart.
• Airtable REST API.

Alternate Tasks (Mini-Project Variations)

1. (Beginner) JSON-driven dynamic form renderer — no external APIs. Build a single-page React app that reads a hard-coded JSON config describing fields (each with a name, label, type of short-text / long-text / single-select / multi-select, and an optional required flag) and renders the matching inputs at runtime. Add one layer of conditional logic using a showIf property (e.g., show a "Custom country" text box only when the Country dropdown equals "Other"), evaluated live as the user types. Do not use react-hook-form or any form library — manage state with plain useState. On submit, validate required fields and print the collected answers as JSON. This isolates the schema-driven-UI and conditional-rendering core of the real task without OAuth or a backend.
2. (Beginner–Intermediate) Full MERN form builder with local storage (no Airtable). Recreate the builder/viewer split from the original, but back it with your own MongoDB instead of Airtable. Build an Express API with Form and Response Mongoose models: a builder UI lets a user add questions (the same five types), rename labels, and attach simple field = value visibility rules; a /form/:id viewer route renders the saved form, applies the rules dynamically, and POSTs answers to your backend to be stored as response documents. Add a "Show all" page listing every saved form. This teaches the entire data flow — persisting a form definition, re-hydrating it, evaluating rules, and saving responses — while removing the friction of third-party OAuth so students can focus on architecture.
3. (Intermediate) The real task, faithfully — Airtable OAuth + dynamic form builder. Implement the brief exactly: Airtable OAuth login (authorization-code flow with state/PKCE), token storage in MongoDB, base/table/field discovery via Airtable's Meta API, a builder supporting the five field types with rename + conditional logic, a /form/:id viewer that applies rules live, and record creation back into Airtable on submit using the user's token. Handle the attachment field by uploading files to a host and passing public URLs to Airtable. Ship the three deliverables: a GitHub repo with .env.example, a deployed live link (Vercel/Netlify + Render/Railway), and a README documenting the OAuth setup and conditional-logic design. This is the full-difficulty, portfolio-grade version.
4. (Intermediate–Advanced, MERN twist) Multi-tenant form-builder SaaS with analytics and sharing. Extend variation 2 into a small SaaS: add email/password + OAuth auth so each user owns a private workspace of forms, generate a public shareable link and a unique slug per form, and rate-limit / spam-protect public submissions. Build a responses dashboard with aggregate analytics (submission counts over time, per-option breakdowns for select fields using a MongoDB aggregation pipeline) and CSV/PDF export. Add a drag-and-drop reorder for questions and a live preview pane. This pushes students from a single demo app toward production concerns: multi-tenancy, access control, public-vs-private routes, data aggregation, and export pipelines.
5. (Advanced, Agentic AI twist) AI form architect that builds and adapts forms from a prompt. On top of the schema-driven engine from variations 1–3, add an LLM-powered agent that turns a natural-language brief ("collect job applications for an engineering role; ask for a resume upload and only show a GitHub link if the role is Engineer") into a complete, valid form schema — fields, types, labels, and conditional rules — emitted as structured JSON via tool/function calling, then validated against your engine before saving. Go further with an adaptive runtime agent that, mid-fill, suggests follow-up questions based on prior answers, and a "summarize responses" agent that reads collected submissions and returns insights. Emphasize guardrails: schema validation, constraining the model to only the five supported field types, and graceful fallback when the model returns malformed output. This blends the form-builder domain with the Agentic AI track — structured output, tool use, and validation loops.

Reference Links

• MERN Airtable form builder reference implementation (GitHub — Rony-2004/airtable) — A public repo implementing exactly this kind of Airtable-connected MERN form builder; useful as a structural reference for OAuth, base/table/field fetching, and writing records back to Airtable. (Read for ideas only — submit original work.)
• Air-Table-Form (GitHub — sumitkr0308/Air-Table-Form) — Another community implementation of an Airtable form app; good for comparing data-model and API-route choices.
• Frontend Interview Challenge: Dynamic Form in React (Medium) — A real, timed interview challenge to build a JSON-config-driven dynamic form in React with conditional rendering and validation, explicitly without react-hook-form. Closely mirrors the conditional-logic core of this task; ideal prep for variation 1.
• Building and sharing forms in Airtable (official docs) — Airtable's own documentation on form conditional logic and which field types are supported; clarifies how native Airtable conditions behave and that computed fields aren't supported in forms.
• Conditional Logic in Airtable Forms — show/hide patterns guide (filla.io) — A walkthrough of conditional show/hide patterns for Airtable forms; helpful mental model when designing your own rule engine and example use cases.
• 5 Simple Steps for Authentication and Authorization in MERN Stack (GeeksforGeeks) — Background reference on wiring auth/session handling in a MERN app, relevant to storing the OAuth token and protecting builder routes.