Effortless API Integration with UI Now

UI Now simplifies API development by providing a well-structured framework for creating and managing API endpoints. Any file named route.js in the /app/api folder automatically acts as an API endpoint, ensuring a seamless integration process.

Key Features of API Management:

1. Preconfigured API Client:
   Use the api.js helper (an Axios instance with interceptors) to streamline API calls. It automatically:

   • Displays error messages for better debugging.

   • Redirects users to the login page on a 401 Unauthorized error.

   • Adds /api as the base URL (e.g., /api/user/posts becomes /user/posts).

2. Protected API Calls:
   Supabase handles authentication via cookies. This means you can make secure API calls directly from the front-end without extra configuration.

Front-End Example: User Profile

The following example demonstrates how to make a protected API call from the front-end using the preconfigured API client:

File: /app/user-profile/page.js

javascriptCopy code"use client";

import { useState } from "react";
import apiClient from "@/libs/api";

const UserProfile = () => {
  const [isLoading, setIsLoading] = useState(false);

  const saveUser = async () => {
    setIsLoading(true);

    try {
      const { data } = await apiClient.post("/user", {
        email: "new@gmail.com",
      });

      console.log(data);
    } catch (e) {
      console.error(e?.message);
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <button className="btn btn-primary" onClick={saveUser}>
      {isLoading && (
        <span className="loading loading-spinner loading-sm"></span>
      )}
      Save
    </button>

• How It Works:

  • The API client handles error interception and authentication.

  • Loading state management ensures a responsive UI.

Back-End Example: User API Endpoint

The back-end API integrates seamlessly with Supabase to handle authentication and data operations. Below is an example of an endpoint that inserts a user into the database:

File: /app/api/user/route.js

How It Works:

1. Supabase Authentication:
   The session is automatically managed with cookies, so no manual token handling is required.

2. Database Operations:
   Insert operations are seamlessly handled via Supabase’s query builder. Ensure that a users table exists in your database for this call to succeed.

3. Error Handling:

   • Missing data (e.g., email) is validated and returns appropriate status codes.

   • Server errors are logged and handled gracefully.

   • Unauthorized access (e.g., no active session) is blocked with a 401 response.

Why This Approach Matters:

• Simplicity: Preconfigured helpers eliminate the need for repetitive setup.

• Security: Supabase and Axios interceptors ensure secure and reliable API operations.

• Efficiency: Focus on building features, not handling boilerplate.

With UI Now’s tools, you can create robust, secure, and scalable APIs with minimal effort, empowering solopreneurs, entrepreneurs, and agencies to launch faster.