Тестовое задание Frontend разработчика

Описание

Приложение для отображения и управления списком транзакций. Построено с использованием React, TypeScript, GraphQL и современных практик разработки.

Структура проекта

.
├── frontend/     # React приложение
└── backend/      # GraphQL сервер

Технологии

Фронтенд

• React 18
• TypeScript
• Vite
• ESLint + Prettier
• Jest + React Testing Library
• CSS Modules
• Apollo Client
• React Query
• JWT авторизация

Бэкенд

• Node.js
• TypeScript
• Apollo Server
• GraphQL
• Jest
• Prisma (ORM)
• JWT авторизация
• bcrypt для хеширования паролей

Функциональность

Бэкенд

1. GraphQL API с поддержкой:
   • Запросов (Queries):
     • Получение списка транзакций с пагинацией и фильтрацией
     • Получение детальной информации о транзакции
     • Получение информации о текущем пользователе
   • Мутаций (Mutations):
     • Создание новой транзакции
     • Обновление статуса транзакции
     • Регистрация пользователя
     • Авторизация пользователя
2. JWT авторизация:
   • Генерация JWT токена при успешной авторизации
   • Валидация JWT токена для защищенных эндпоинтов
   • Рефреш токен для обновления JWT
3. Валидация входных данных
4. Обработка ошибок

Фронтенд

1. Страницы авторизации и регистрации
2. Защищенные роуты
3. Хранение JWT токена в localStorage
4. Автоматическое обновление токена
5. Таблица транзакций с возможностью:
   • Фильтрации по дате, типу и статусу
   • Сортировки по любому столбцу
   • Пагинации (10 записей на странице)
6. Добавление новых транзакций через модальное окно
7. Кэширование запросов
8. Обработка ошибок и состояний загрузки

Модели данных

Пользователь

interface User {
  id: string;
  email: string;
  name: string;
  createdAt: string;
  updatedAt: string;
}

Транзакция

interface Transaction {
  id: string;
  date: string;
  type: 'income' | 'expense';
  amount: number;
  status: 'completed' | 'pending' | 'failed';
  description: string;
  userId: string;
  createdAt: string;
  updatedAt: string;
}

GraphQL схема

type User {
  id: ID!
  email: String!
  name: String!
  createdAt: String!
  updatedAt: String!
}

type Transaction {
  id: ID!
  date: String!
  type: TransactionType!
  amount: Float!
  status: TransactionStatus!
  description: String!
  userId: ID!
  createdAt: String!
  updatedAt: String!
}

type AuthPayload {
  token: String!
  refreshToken: String!
  user: User!
}

enum TransactionType {
  INCOME
  EXPENSE
}

enum TransactionStatus {
  COMPLETED
  PENDING
  FAILED
}

input RegisterInput {
  email: String!
  password: String!
  name: String!
}

input LoginInput {
  email: String!
  password: String!
}

type Query {
  transactions(
    page: Int!
    limit: Int!
    filters: TransactionFilters
  ): TransactionConnection!
  transaction(id: ID!): Transaction!
  me: User!
}

type Mutation {
  register(input: RegisterInput!): AuthPayload!
  login(input: LoginInput!): AuthPayload!
  refreshToken(token: String!): AuthPayload!
  createTransaction(input: CreateTransactionInput!): Transaction!
  updateTransactionStatus(
    id: ID!
    status: TransactionStatus!
  ): Transaction!
}

Запуск проекта

Через Docker

docker compose up -d

Локально

# Бэкенд
cd backend
npm install
npm run dev

# Фронтенд
cd frontend
npm install
npm run dev

Критерии оценки

1. Качество кода и его организация
2. Типизация и использование TypeScript
3. Тестовое покрытие
4. Производительность
5. UX/UI реализация
6. Качество GraphQL схемы и резолверов
7. Оптимизация запросов и кэширование
8. Безопасность и защита от уязвимостей
9. Качество реализации авторизации