Practical REST API Tutorial
How to Create a REST API Online for Frontend Development
Create hosted REST API endpoints, return your own JSON and call them from your frontend while the production backend is still being built.
What we are building
A small products REST API
We will create several endpoints that look like a real backend API, then call them from frontend code using normal HTTP requests.
/productsReturn the complete product list
/products/1Return one product
/productsSimulate creating a product
[
{
"id": 1,
"name": "Wireless Headphones",
"price": 79.99,
"inStock": true
},
{
"id": 2,
"name": "Mechanical Keyboard",
"price": 109.99,
"inStock": true
}
]Plan the API contract
Decide what your frontend expects before creating endpoints
Start with the screens and actions your frontend needs. A product list needs a collection endpoint, a details page needs an individual resource endpoint, and a create form usually needs a POST route.
| Frontend need | Method | Route |
|---|---|---|
| Product list | GET | /products |
| Product details | GET | /products/1 |
| Create product form | POST | /products |
Design the contract first
If your mock routes and JSON structures match the future production API, switching backends later becomes much easier.
Create the first endpoint
Create GET /products
Open Forge API and create a project or use the homepage generator. Choose GET, set the route to /products, then add the JSON response your frontend expects.
[
{
"id": 1,
"name": "Wireless Headphones",
"price": 79.99,
"inStock": true
},
{
"id": 2,
"name": "Mechanical Keyboard",
"price": 109.99,
"inStock": true
}
]Use the hosted URL
Your REST endpoint is available over HTTPS
A Forge API endpoint uses your project key and route:
https://apis.getforgeapi.com/YOUR_PROJECT_KEY/productsYou can test it from a browser for a GET request or from your terminal:
curl https://apis.getforgeapi.com/YOUR_PROJECT_KEY/productsCall it from the frontend
Fetch your REST API like a normal backend
Your frontend does not need Forge API-specific request code. It calls a normal HTTPS endpoint using fetch, Axios or another HTTP client.
The returned JSON can immediately power product cards, tables, dashboards and other API-driven UI.
const response = await fetch(
"https://apis.getforgeapi.com/YOUR_PROJECT_KEY/products"
);
if (!response.ok) {
throw new Error(`Request failed: ${response.status}`);
}
const products = await response.json();
console.log(products);Add more REST routes
Build the API contract your frontend needs
A useful REST API usually contains multiple resource routes. Add endpoints as the frontend requires them instead of building an entire backend upfront.
GET /products/1
Use an individual resource route for a product details screen.
{
"id": 1,
"name": "Wireless Headphones",
"price": 79.99,
"inStock": true
}POST /products
Use a POST endpoint while building and testing a create-product form.
{
"id": 3,
"name": "USB-C Hub",
"price": 49.99,
"inStock": true
}const response = await fetch(
"https://apis.getforgeapi.com/YOUR_PROJECT_KEY/products",
{
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: "USB-C Hub",
price: 49.99,
}),
}
);
const result = await response.json();Test real frontend states
Test more than successful responses
Frontends also need to handle slow requests and unsuccessful responses. Configure predictable API behaviour so those states can be built before production problems occur.
Custom JSON
Return the exact response shape required by the UI.
HTTP status codes
Test successful and unsuccessful request handling.
Response delays
Keep loading states visible long enough to design and test them.
Response headers
Model additional response behaviour required by the integration.
/products- Status
- 500
- Delay
- 1500ms
{
"error": "Unable to load products"
}Keep one API base URL
Do not hard-code complete URLs throughout your frontend
Keep the project-level API URL in one configuration file.
const API_BASE_URL =
"https://apis.getforgeapi.com/YOUR_PROJECT_KEY";
export default API_BASE_URL;Then create one reusable request helper:
import API_BASE_URL from "./config/api";
export async function apiRequest(
endpoint: string,
options: RequestInit = {}
) {
const path = endpoint.replace(/^\/+/, "");
const response = await fetch(
`${API_BASE_URL}/${path}`,
options
);
if (!response.ok) {
throw new Error(
`API request failed: ${response.status}`
);
}
return response.json();
}const products = await apiRequest("products");
const product = await apiRequest("products/1");
const createdProduct = await apiRequest("products", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
name: "USB-C Hub",
price: 49.99,
}),
});One configuration, many routes
Components can request products, users, orders and other resources without knowing where the API is hosted.
Switch to production later
Replace the mock backend without rewriting your frontend
When your production backend is ready, change the API base URL:
const API_BASE_URL =
"https://api.example.com";
export default API_BASE_URL;If the real backend keeps the same routes and JSON response shapes, the rest of your API integration can remain unchanged.
During development
https://apis.getforgeapi.com/YOUR_PROJECT_KEY
Production
https://api.example.com
Go deeper
Need a complete mock REST API?
This tutorial explains the workflow step by step. The Mock REST API page goes deeper into REST methods, frontend testing and using hosted endpoints while a production backend is still under development.
Framework examples
Connect the API to your frontend framework
Once the endpoints exist, follow a framework-specific guide for integrating Forge API into your application.
React
Learn how to connect React to a hosted Forge API endpoint.
Read tutorial →Next.js
Learn how to connect Next.js to a hosted Forge API endpoint.
Read tutorial →React Native
Learn how to connect React Native to a hosted Forge API endpoint.
Read tutorial →Vue
Learn how to connect Vue to a hosted Forge API endpoint.
Read tutorial →Angular
Learn how to connect Angular to a hosted Forge API endpoint.
Read tutorial →Frequently asked questions
Creating a REST API online
Can I create a REST API online without building a backend?
Yes. A hosted mock API can provide REST-style endpoints and JSON responses while your production backend is still being developed.
What URL does a Forge API endpoint use?
A public endpoint follows the format https://apis.getforgeapi.com/{PROJECT_KEY}/{ENDPOINT_PATH}.
Which HTTP methods can I use?
Forge API supports GET, POST, PUT, PATCH and DELETE endpoints.
Can I use my own JSON response?
Yes. You can define the JSON response your frontend expects so the mock API follows your planned API contract.
Can I use the API from React, Next.js or another frontend?
Yes. Forge API endpoints are hosted HTTPS URLs and can be called using standard HTTP clients from web and mobile applications.
What happens when my production backend is ready?
If your production backend keeps the same routes and response structures, you can replace the Forge API base URL while leaving most frontend request code unchanged.
Create your first REST endpoint now
Add a route, return your own JSON and connect your frontend to a hosted API URL in minutes.