Building a Frontend Without a Backend

The Frontend-First Approach

Waiting for backend APIs to be ready before starting frontend development wastes valuable time. With mock APIs, you can build your entire frontend in parallel with backend development.

Setting Up Your Project

Let's build a simple bookstore app using AximCode's Bookstore API. The API provides realistic data for books, authors, and orders.

Fetching Books

const API_BASE = 'https://apis.aximcode.com/v1/bookstore';

async function getBooks(page = 1, limit = 10) {
  const response = await fetch(
    `${API_BASE}/books?page=${page}&limit=${limit}`
  );
  return response.json();
}

// Usage
const { books, total, page } = await getBooks(1, 20);
console.log(`Showing ${books.length} of ${total} books`);

Handling CRUD Operations

Mock APIs support full CRUD operations. Changes are session-scoped, so you can experiment freely without affecting other users.

Creating a Book

async function createBook(bookData) {
  const response = await fetch(`${API_BASE}/books`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(bookData),
  });
  return response.json();
}

// Example
const newBook = await createBook({
  title: 'The Great Adventure',
  author_id: 'author_1',
  price: 19.99,
  isbn: '978-0-123456-78-9'
});

Updating and Deleting

// Update a book
await fetch(`${API_BASE}/books/book_123`, {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ price: 24.99 }),
});

// Delete a book
await fetch(`${API_BASE}/books/book_123`, {
  method: 'DELETE',
});

Pagination and Filtering

The API supports standard pagination parameters:

// Get page 2 with 25 items per page
const { books } = await fetch(
  `${API_BASE}/books?page=2&limit=25`
).then(r => r.json());

Working with Related Data

The Bookstore API has relationships between entities. Books have authors, orders have items, etc.

// Get a book with its author
const book = await fetch(`${API_BASE}/books/book_1`)
  .then(r => r.json());

const author = await fetch(`${API_BASE}/authors/${book.author_id}`)
  .then(r => r.json());

console.log(`"${book.title}" by ${author.name}`);

Best Practices

Abstract your API calls: Create a service layer so you can easily swap mock APIs for real ones later.
Handle errors gracefully: Mock APIs can return errors too. Test your error handling.
Use TypeScript: Define interfaces that match the API responses for type safety.

When to Switch to Real APIs

Once your backend is ready, switching is straightforward:

// Before
const API_BASE = 'https://apis.aximcode.com/v1/bookstore';

// After
const API_BASE = 'https://your-api.example.com';

If you've abstracted your API calls well, this might be the only change needed!

AximCode Blog