tutorial7 min read26th June 2025

Backendless Fullstack Development: React useForm + RushDB

See how a single line of code can replace an entire backend infrastructure while preserving your data's natural structure. Perfect for rapid prototyping, MVPs, and applications with evolving data models.

By RushDB Team

tutorialtypesriptfullstackuseFormReactJSReactReact Hook Form

On this page

The Traditional Form Submission Flow
The Backendless Approach with RushDB
Let's See It In Action
1. Setting Up RushDB
2. Defining Our Form Schema
3. Submitting Form Data to RushDB
What's Happening Behind the Scenes?
Benefits of This Approach
1. Zero Backend Complexity
2. Preserve Natural Data Structures
3. Full-Stack Type Safety
4. Rapid Development
Querying the Data
Conclusion

RushDB

Give your agent a memory.

Push any JSON. Get graph relationships and vector search instantly — no schema, no pipeline, no setup.

Start building free →

FAQ

The Traditional Form Submission Flow

Let's consider what typically happens when building a form in a web application:

Define database schema/migrations

Create models with proper validation

Build controllers to handle data transformation

Set up services to process business logic

Design a REST API to connect your frontend

Implement API calls from your frontend form

Normalize nested data before storing it

This approach requires maintaining multiple data representations across your stack, writing repetitive boilerplate code, and continuously synchronizing changes between layers. Even with ORMs and other tools, the complexity remains significant.

The Backendless Approach with RushDB

RushDB offers a radically different approach by providing a graph database that:

Accepts any JSON structure directly

Automatically normalizes nested objects into a graph

Requires zero schema setup or migrations

Preserves the exact shape of your data

This means you can take your form data exactly as it is structured in your frontend and store it directly without any transformation or normalization.

Let's See It In Action

Let's examine a comprehensive form implementation using React Hook Form with Zod validation and RushDB for storage.

First, we initialize the RushDB client:

// db.ts
import { RushDB } from "@rushdb/javascript-sdk";

// Initialize RushDB
export const db = new RushDB(env.RUSHDB_API_TOKEN);

That's it! No schema definitions, no models, no complex setup.

You can get a free API token by signing up at app.rushdb.com. For more information on getting started, see the official documentation.

We use Zod to define the validation schema for our form:

// Form validation schema
const formSchema = z.object({
  // Personal Information
  firstName: z.string().min(2, "First name must be at least 2 characters"),
  lastName: z.string().min(2, "Last name must be at least 2 characters"),
  email: z.string().email("Invalid email address"),
  phone: z.string().min(10, "Phone number must be at least 10 digits"),
  dateOfBirth: z.string().min(1, "Date of birth is required"),

  // Address Information (nested object)
  address: z.object({
    street: z.string().min(5, "Street address is required"),
    city: z.string().min(2, "City is required"),
    state: z.string().min(2, "State is required"),
    zipCode: z.string().min(5, "ZIP code must be at least 5 characters"),
    country: z.string().min(2, "Country is required"),
  }),

  // Professional Information
  company: z.string().min(2, "Company name is required"),
  position: z.string().min(2, "Position is required"),
  experience: z.enum(["entry", "junior", "mid", "senior", "lead", "executive"]),
  salary: z.number().min(0, "Salary must be a positive number"),
  skills: z.array(z.string()).min(1, "At least one skill is required"),

  // Preferences (nested object with boolean values)
  preferences: z.object({
    newsletter: z.boolean(),
    notifications: z.boolean(),
    publicProfile: z.boolean(),
    dataSharing: z.boolean(),
  }),

  // Additional Information
  bio: z.string().max(500, "Bio must be less than 500 characters"),
  website: z.string().url("Invalid URL").optional().or(z.literal("")),
  linkedIn: z.string().url("Invalid LinkedIn URL").optional().or(z.literal("")),
  github: z.string().url("Invalid GitHub URL").optional().or(z.literal("")),
});

type FormData = z.infer<typeof formSchema>;

Give your agent a memory.

Related reading

Vector RAG vs GraphRAG vs Agentic RAG: Why There Is No Winner

Persistent Agent Memory for OpenClaw and Hermes with RushDB

Vector Search Doesn't Understand Data Structure