Frontend ждёт Backend: 5 способов начать работу прямо сейчас

Mock API — облачный сервис, который имитирует реальный API с теми же endpoints и ответами. Frontend код работает с Mock API точно так же, как будет работать с реальным API.

✅ Преимущества:

• Начать работу за 5 минут — регистрация и создание endpoints
• Реалистичные данные — имитация реального API
• Полная интеграция — код не меняется при переключении на реальный API
• Команда работает параллельно — единый URL для всех разработчиков
• Готово для демо клиентам — интерфейс с реальными данными
• Логирование запросов — отладка в реальном времени

🚀 Быстрый старт с LightBox API:

1. Зарегистрируйтесь на lightboxapi.ru

2. Создайте workspace и добавьте endpoints:

// Endpoint: GET /api/users
{
  "method": "GET",
  "path": "/api/users",
  "response": {
    "status": 200,
    "body": [
      {"id": 1, "name": "Иван Петров", "email": "ivan@example.com", "role": "admin"},
      {"id": 2, "name": "Мария Сидорова", "email": "maria@example.com", "role": "user"}
    ]
  }
}

// Endpoint: POST /api/users
{
  "method": "POST",
  "path": "/api/users",
  "response": {
    "status": 201,
    "body": {"id": 3, "name": "{request.body.name}", "message": "User created"}
  }
}

3. Используйте в React:

// config.js - переключение между mock и production
const API_URL = {
  development: 'https://api.lightboxapi.ru/mock/your-workspace',
  production: 'https://api.yourapp.com'
}[process.env.NODE_ENV];

export default API_URL;

// hooks/useUsers.js
import { useEffect, useState } from 'react';
import API_URL from '../config';

export function useUsers() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Работает с mock API точно так же как с реальным!
    fetch(`${API_URL}/api/users`)
      .then(res => {
        if (!res.ok) throw new Error('Failed to fetch');
        return res.json();
      })
      .then(data => {
        setUsers(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  return { users, loading, error };
}

// components/UserList.jsx
import { useUsers } from '../hooks/useUsers';

function UserList() {
  const { users, loading, error } = useUsers();

  if (loading) return <div className="spinner">Загрузка...</div>;
  if (error) return <div className="error">Ошибка: {error}</div>;

  return (
    <div className="user-list">
      {users.map(user => (
        <div key={user.id} className="user-card">
          <h3>{user.name}</h3>
          <p>{user.email}</p>
          <span className={`badge badge-${user.role}`}>{user.role}</span>
        </div>
      ))}
    </div>
  );
}

Цена: Бесплатно (1000 req/day) • Setup: 5 минут

Создайте локальный REST API из JSON файла за 1 минуту. Идеально для быстрых прототипов и индивидуальной работы.

Установка и настройка:

# Установка
npm install -g json-server

# Создайте db.json
cat > db.json << 'EOF'
{
  "users": [
    {"id": 1, "name": "John Doe", "email": "john@example.com", "role": "admin"},
    {"id": 2, "name": "Jane Smith", "email": "jane@example.com", "role": "user"}
  ],
  "posts": [
    {"id": 1, "title": "Hello World", "body": "First post content", "userId": 1},
    {"id": 2, "title": "Second Post", "body": "More content here", "userId": 2}
  ],
  "comments": [
    {"id": 1, "body": "Great post!", "postId": 1}
  ]
}
EOF

# Запустите сервер
json-server --watch db.json --port 3001

# Готово! API доступен на http://localhost:3001

Автоматические CRUD endpoints:

# Все ресурсы получают полный CRUD:
GET    http://localhost:3001/users      # Все пользователи
GET    http://localhost:3001/users/1    # Пользователь с id=1
POST   http://localhost:3001/users      # Создать пользователя
PUT    http://localhost:3001/users/1    # Обновить пользователя
DELETE http://localhost:3001/users/1    # Удалить пользователя

# Фильтрация и связи:
GET http://localhost:3001/users?role=admin
GET http://localhost:3001/posts?userId=1
GET http://localhost:3001/posts?_expand=user  # Подгрузить связанного user

✅ Плюсы: Очень быстро, CRUD из коробки, фильтрация, сортировка
❌ Минусы: Только локально, нет командной работы, нет логирования

Используйте статичные данные прямо в коде. Подходит для быстрого старта и простых прототипов.

// fixtures/users.js
export const mockUsers = [
  {id: 1, name: "Иван Петров", email: "ivan@example.com", role: "admin"},
  {id: 2, name: "Мария Сидорова", email: "maria@example.com", role: "user"},
  {id: 3, name: "Алексей Иванов", email: "alex@example.com", role: "user"}
];

export const mockPosts = [
  {id: 1, title: "Первый пост", body: "Содержимое поста...", userId: 1},
  {id: 2, title: "Второй пост", body: "Еще контент...", userId: 2}
];

// hooks/useUsers.js
import { useState, useEffect } from 'react';
import { mockUsers } from '../fixtures/users';

export function useUsers() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Имитируем задержку API
    const timer = setTimeout(() => {
      setUsers(mockUsers);
      setLoading(false);
    }, 500);

    return () => clearTimeout(timer);
  }, []);

  return { users, loading };
}

// Легко переключиться на реальный API позже:
export function useUsersReal() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        setUsers(data);
        setLoading(false);
      });
  }, []);

  return { users, loading };
}

✅ Плюсы: Максимально просто, не нужно ничего устанавливать
❌ Минусы: Нет реальных HTTP запросов, сложно имитировать loading/error states

Перехватывайте реальные HTTP запросы и возвращайте mock данные. Идеально для тестирования и разработки.

Установка:

npm install msw --save-dev
npx msw init public/ --save  # Для браузера

Настройка handlers:

// src/mocks/handlers.js
import { rest } from 'msw'

export const handlers = [
  // GET /api/users
  rest.get('/api/users', (req, res, ctx) => {
    return res(
      ctx.status(200),
      ctx.json([
        {id: 1, name: "John Doe", email: "john@example.com"},
        {id: 2, name: "Jane Smith", email: "jane@example.com"}
      ])
    )
  }),

  // GET /api/users/:id
  rest.get('/api/users/:id', (req, res, ctx) => {
    const { id } = req.params
    return res(
      ctx.status(200),
      ctx.json({id: Number(id), name: "User " + id, email: `user${id}@example.com`})
    )
  }),

  // POST /api/users
  rest.post('/api/users', async (req, res, ctx) => {
    const body = await req.json()
    return res(
      ctx.status(201),
      ctx.json({id: Date.now(), ...body, message: "User created"})
    )
  }),

  // Имитация ошибки
  rest.get('/api/error', (req, res, ctx) => {
    return res(
      ctx.status(500),
      ctx.json({error: "Internal Server Error"})
    )
  }),

  // Имитация медленного ответа
  rest.get('/api/slow', async (req, res, ctx) => {
    await ctx.delay(2000)  // 2 секунды задержки
    return res(ctx.json({message: "Slow response"}))
  })
]

// src/mocks/browser.js
import { setupWorker } from 'msw'
import { handlers } from './handlers'

export const worker = setupWorker(...handlers)

// src/index.js - запуск в development
async function enableMocking() {
  if (process.env.NODE_ENV !== 'development') {
    return
  }
  const { worker } = await import('./mocks/browser')
  return worker.start({
    onUnhandledRequest: 'bypass'  // Пропускать незамоканные запросы
  })
}

enableMocking().then(() => {
  ReactDOM.render(<App />, document.getElementById('root'))
})

Использование в тестах (Jest + React Testing Library):

// src/mocks/server.js
import { setupServer } from 'msw/node'
import { handlers } from './handlers'

export const server = setupServer(...handlers)

// setupTests.js
import { server } from './mocks/server'

beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

// UserList.test.js
import { render, screen, waitFor } from '@testing-library/react'
import { rest } from 'msw'
import { server } from './mocks/server'
import UserList from './UserList'

test('renders users from API', async () => {
  render(<UserList />)

  await waitFor(() => {
    expect(screen.getByText('John Doe')).toBeInTheDocument()
  })
})

test('handles API error', async () => {
  // Переопределяем handler для этого теста
  server.use(
    rest.get('/api/users', (req, res, ctx) => {
      return res(ctx.status(500))
    })
  )

  render(<UserList />)

  await waitFor(() => {
    expect(screen.getByText(/error/i)).toBeInTheDocument()
  })
})

✅ Плюсы: Реалистичные HTTP запросы, отлично для тестов, перехват на уровне сети
❌ Минусы: Требует настройки, только для JavaScript/TypeScript проектов

Согласуйте OpenAPI спецификацию с backend командой до начала разработки. Спецификация становится контрактом между frontend и backend.

OpenAPI спецификация:

# openapi.yaml
openapi: 3.0.0
info:
  title: Users API
  version: 1.0.0
  description: API для управления пользователями

servers:
  - url: https://api.yourapp.com
    description: Production
  - url: https://api.lightboxapi.ru/mock/workspace
    description: Mock API

paths:
  /api/users:
    get:
      summary: Получить список пользователей
      responses:
        '200':
          description: Успешный ответ
          content:
            application/json:
              schema:
                type: array
                items:
                  $ref: '#/components/schemas/User'
              example:
                - id: 1
                  name: "Иван Петров"
                  email: "ivan@example.com"
                  role: "admin"
    post:
      summary: Создать пользователя
      requestBody:
        required: true
        content:
          application/json:
            schema:
              $ref: '#/components/schemas/CreateUser'
      responses:
        '201':
          description: Пользователь создан

  /api/users/{id}:
    get:
      summary: Получить пользователя по ID
      parameters:
        - name: id
          in: path
          required: true
          schema:
            type: integer
      responses:
        '200':
          description: Успешный ответ
          content:
            application/json:
              schema:
                $ref: '#/components/schemas/User'
        '404':
          description: Пользователь не найден

components:
  schemas:
    User:
      type: object
      required:
        - id
        - name
        - email
      properties:
        id:
          type: integer
          example: 1
        name:
          type: string
          example: "Иван Петров"
        email:
          type: string
          format: email
          example: "ivan@example.com"
        role:
          type: string
          enum: [admin, user]
          default: user

    CreateUser:
      type: object
      required:
        - name
        - email
      properties:
        name:
          type: string
        email:
          type: string
          format: email
        role:
          type: string
          enum: [admin, user]

Workflow:

1. Согласуйте спецификацию с backend командой
2. Импортируйте в LightBox API — получите mock endpoints автоматически
3. Сгенерируйте TypeScript типы из спецификации
4. Разрабатывайте frontend с типобезопасностью
5. Backend реализует по той же спецификации
6. Переключитесь на production URL — всё работает!

Генерация TypeScript типов:

# Установка генератора
npm install openapi-typescript-codegen --save-dev

# Генерация типов
npx openapi-typescript-codegen --input openapi.yaml --output src/api/generated

✅ Плюсы: Гарантия совместимости frontend и backend, типобезопасность, документация из коробки
❌ Минусы: Требует времени на согласование, нужна дисциплина команды