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

Описание приложения

Приложение реализует 2 части:

1 - Виджет CATS FACTS, показывающий случайный факт о котах при нажатии на соответствующую кнопку

2 - Виджет GET AGE FROM NAME, показывающий возраст по введенному имени при нажатии на кнопку "Get" или же по истечению 3 секунд после ввода

Как запустить приложение

Для запуска необходимо скачать все зависимости и запустить сервер следующими командами:

npm install

npm run start

После чего сайт будет доступен по ссылке http://localhost:3000

Стек технологий

• React + TypeScript
• Архитектура Feature-Sliced Design
• TanStack Query
• CSS Modules
• VK-UI Kit

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

Проект реализует принципы FSD имеет следующую структуру:

.
├── public/
│   └── index.html
└── src/
    ├── app/
    │   └── Здесь лежит компонент приложения
    ├── pages/
    │   └── Здесь лежат компоненты страниц
    ├── widgets/
    │   └── Здесь лежат компоненты отдельных виджетов
    ├── features/
    │   └── Здесь лежат компоненты бизнес логики
    ├── shared/
    │   └── Здесь лежат компоненты, используемые по всему проекту
    │
    └── index.tsx - точка старта приложения

Структура компонента имеет в себе:

.
└── Component/
    ├── lib/
    │   └── function.ts - некоторая вынесенная бизнес логика
    ├── type/
    │   └── type.ts - типы и интерфейсы ts
    ├── ui/
    │   ├── Component.tsx - интерфейс компонента, хуки, обработчики
    │   └── style.module.scss - стили css modules
    │
    └── index.ts - публичный API компонента