How to create a frontend demo with no backend (AI Mocking)

#api #frontend #tutorial #ai

You want quick customer demos?

You want to validate your idea by creating the UI for it first?

Or maybe you just want to keep coding instead of waiting for backend endpoints?

And with as little wasted code and time as possible?

In any case, you are in the right place, at the right time. Each of these can be addressed by using fake data, a mock API. Until now, doing this in a good way was a headache; you could use different kinds of tools which would provide a fake REST API for you that returned fake data which you had to manually define. The data looked fake if you didn’t put a lot of effort into it and on top of all that, you had to put extra time into refactoring the frontend to use your actual backend once it was ready.

That whole process was annoying and didn’t allow developers to properly create features or products with a frontend-first-philosophy.

Introducing Symulate

Launching on producthunt.com on November 6, 12:01 AM PST.

The new workflow

With Symulate you can create whole UIs without having a single backend endpoint. You define endpoints in the frontend with TypeScript types using the Symulate SDK. Requests made get a proper response with fake data generated by AI, just as you requested it. It gets cached allowing for quick responses on the next request. Once your schema changes, a new dataset is generated.

Your defined endpoints can be synced to the Symulate Platform in order to make them accessible to backend developers. There, the endpoints can also be exported to an OpenAPI spec file.

Your backend team implements the endpoints just as they are needed in the frontend. No iterations, no miscommunication.

Once the backend is ready, switch one configuration to tell the Symulate SDK to use the real backend API. At this point, no Symulate infrastructure is used anymore in your application.

This allows you to do exactly the things mentioned at the start of this article.

Example Implementation

Configure the Symulate SDK:

configureSymulate({
  symulateApiKey: 'sym_live_xxx',
  environment: 'development',
  generateMode: 'ai' // or 'faker' for unlimited free
})

Define a schema in any shape you want and pass instructions to Symulate for each property:

import { m, defineEndpoint } from '@symulate/sdk';
import type { Infer } from '@symulate/sdk';

// Define User schema
export const UserSchema = m.object({
  id: m.uuid(),
  name: m.person.fullName("Typical indian names"), // Custom instruction
  email: m.email(),
  avatar: m.internet.avatar(),
  role: m.array(m.string("['admin', 'user', 'guest']")),
  createdAt: m.date("recent"),
});

// Infer TypeScript type from schema
export type User = Infer<typeof UserSchema>;

Now use your new schema to define endpoints:

// Define endpoints
export const getUsers = defineEndpoint<User[]>({
  path: '/api/users',
  method: 'GET',
  schema: m.array(UserSchema),
  mock: {
    count: 9,
    instruction: 'Generate diverse software engineers from tech companies.',
  },
});

export const getUser = defineEndpoint<User>({
  path: '/api/users/:id',
  method: 'GET',
  schema: UserSchema,
});

Now you can use your endpoints and your User type anywhere in the application.

The result: 9 user objects with realistic looking data and Indian names, as requested.

The switch to a real backend is as simple as changing the Symulate configuration:

configureSymulate({
  environment: 'production',
  backendBaseUrl: 'http://localhost:3001' // or 'faker' for unlimited free
})

Done! You can now define as many endpoints as you like, in any shape. Fully typed, completely flexible. Need your user schema to have a “disabled” property? Just add it:

export const UserSchema = m.object({
  id: m.uuid(),
  name: m.person.fullName("Typical indian names"), // Custom instruction
  email: m.email(),
  avatar: m.internet.avatar(),
  role: m.array(m.string("['admin', 'user', 'guest']")),
  createdAt: m.date("recent"),

  // Disabled?
  disabled: m.boolean()
});

Immediately available in your UI. A new dataset is generated for your next request containing the new property.