Create an instant REST API for any database schema

As software developers, we often spend countless hours building backend APIs for simple CRUD operations on databases. This process involves:

• Writing boilerplate code for endpoints (GET, POST, PATCH, DELETE).
• Setting up authentication, validation, and error handling.
• Managing database connections, queries, and migrations.
• Testing and debugging the API to ensure it works as intended.

This repetitive work slows down development and takes focus away from building user-facing features. What if you could skip all of this and start developing your frontend application immediately?

In this article, we will explore how to use auto generated API in a sample Travel Agency Management React application.

Database Connection Strings vs. Data APIs

When building applications, we often choose between connecting directly to a database using a database connection string or leveraging a Data API. A database connection string provides low-level access, requiring developers to manage drivers, write SQL queries, and handle security concerns such as connection pooling and credentials. Additionally, developers must map SQL query outputs to database models or DTOs and manage migration files, which adds extra layers of complexity and boilerplate code. While this approach offers full flexibility and control, it slows down development.

In contrast, a Data API abstracts these details by exposing a ready-to-use RESTful interface for all CRUD operations. With a Data API, you can work with structured JSON responses instead of raw SQL outputs, allowing you to connect your frontend directly to the backend data layer and drastically reduce the need for manual mapping and backend maintenance.

Turning Your Database Schema into a Live Data API

With GibsonAI, you can create a database schema using prompts and deploy it to multiple database environments in minutes. What’s even better is that it automatically generates a RESTful API based on your database schema, enabling direct database access from your frontend applications or browser.

You can consume the API directly in a two-tier architecture (UI/Frontend → database) or use it alongside your existing backend as part of a three-tier architecture. GibsonAI ensures that your database is always accessible through a modern, scalable interface, making it easier to build applications and adapt to changes.

Building a React App with Auto-Generated APIs

Let’s explore how to build a React app that uses GibsonAI’s auto-generated APIs. Imagine you’re creating a travel agency management application. This app needs to manage users, destinations, bookings, and reviews. Instead of writing your own backend APIs for CRUD operations, you can connect your React UI directly to GibsonAI’s Data API and have everything ready to go.

You can find the full source code along with how to run instructions for this project on GitHub repository.

Clone Database Schema and get Data API Key

To get started, you need to create a GibsonAI account and clone the Travel Agency database schema.

1. Create a GibsonAI Account: Sign up at https://app.gibsonai.com

2. Clone the Travel Agency Database Schema:

   • Visit: https://app.gibsonai.com/clone/rRZ4wD9HDCdHO
   • This will clone the pre-built Travel Agency database schema to your GibsonAI account. It has a pre-built schema that includes all the necessary tables and relationships.

3. Deploy the Database:

   • After cloning, deploy the database schema in your GibsonAI project
   • This creates the necessary tables: travel_user, travel_destination, travel_booking, and travel_review

4. Get Your Data API Key:

   • Navigate to your project Data API section in the app

   

   • Copy your Data API Key. You'll need this key for the environment env file configuration below. This key will be used to authenticate your API requests.

   REACT_APP_GIBSON_API_KEY=your-gibsonai-project-api-key

Integrate Data API into a React application

You can start creating an API Service Layer, as it is implemented in src/services/api.ts API service layer to manage users, destinations, bookings, and reviews. This layer will handle API requests and responses, making it easy to integrate the API into your components.

import axios from 'axios';
import {
  TravelUser,
  TravelDestination,
  TravelBooking,
  TravelReview,
  CreateUserForm,
  UpdateUserForm,
  CreateDestinationForm,
  UpdateDestinationForm,
  CreateBookingForm,
  UpdateBookingForm,
  CreateReviewForm,
  UpdateReviewForm,
} from '../types';

const GIBSON_API_BASE_URL = 'https://api.gibsonai.com';
const GIBSON_API_KEY = process.env.REACT_APP_GIBSON_API_KEY;

// Create axios instance with GibsonAI configuration
const api = axios.create({
  baseURL: GIBSON_API_BASE_URL,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
    'X-Gibson-API-Key': GIBSON_API_KEY,
  },
});

...

You can also use GibsonAI MCP Server within your favorite AI editor VS Code or Cursor to generate this integration code with AI.

Use the API in Your Components

Once the API service layer is set up, you can use it in your React components to fetch, create, update, and delete data. For example, in the UsersPage.tsx component, you can use the userApi methods to manage users. The fetchUsers function retrieves all users from the API and updates the component's state. This ensures that the UI always reflects the latest data from the database.

import React, { useState, useEffect } from 'react';
import { userApi } from '../services/api';
import { TravelUser, CreateUserForm, UpdateUserForm } from '../types';
import toast from 'react-hot-toast';

const UsersPage: React.FC = () => {
  const [users, setUsers] = useState<TravelUser[]>([]);
  const [loading, setLoading] = useState(true);
  const [showModal, setShowModal] = useState(false);
  const [editingUser, setEditingUser] = useState<TravelUser | null>(null);
  const [formData, setFormData] = useState<CreateUserForm>({
    first_name: '',
    last_name: '',
    email: '',
    password: '',
    address: '',
  });

  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    try {
      setLoading(true);
      const data = await userApi.getAll();
      setUsers(data);
    } catch (error) {
      const message = error instanceof Error ? error.message : 'Failed to fetch users';
      toast.error(message);
    } finally {
      setLoading(false);
    }
  };
  
  ...

Stay Updated with Schema and API Changes

One of the standout features of GibsonAI is its ability to notify you about changes to your database schema and APIs. If you update your schema, GibsonAI automatically updates the API and informs you about the changes. This ensures that your frontend stays in sync with your backend, even as your database evolves. With GibsonAI, you can focus on building features while the platform handles the complexities of database management.

The Future: AI Agents Managing API Contracts

GibsonAI simplifies the development process by turning your database schema into a live Data API. By using GibsonAI, you can skip backend development, build frontend apps faster, and stay updated with schema changes automatically.

What excites me the most is the potential to go even further with AI Agents. Imagine having an agent that continuously monitors the GibsonAI API documentation. Whenever it detects changes, it generates or updates the API service layer in your project, adjusts client contracts, and even creates a pull request automatically on GitHub. With such a setup, schema evolution and API changes become a background process, freeing developers to focus on innovation. Currently, I am working on building this Agent, and more will come soon. Start using GibsonAI today and experience the future of database interaction.