Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/vladbrok/react-dev-test-task

Тестовое задание на должность "Фронтенд разработчик React"
https://github.com/vladbrok/react-dev-test-task

Last synced: about 1 month ago
JSON representation

Тестовое задание на должность "Фронтенд разработчик React"

Host: GitHub
URL: https://github.com/vladbrok/react-dev-test-task
Owner: VladBrok
License: mit
Created: 2023-05-18T16:37:55.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2023-05-20T14:27:31.000Z (over 1 year ago)
Last Synced: 2024-10-23T00:38:50.540Z (3 months ago)
Language: TypeScript
Homepage: https://react-dev-test-task.vercel.app
Size: 691 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# Тестовое задание на должность "Фронтенд разработчик React"

## Задание

В рамках тестового задания требуется разработать пользовательский интерфейс для
отправки и получений сообщений WhatsApp
Время на выполнение задания: 5 дней
Требования:

1. Требуется разработать пользовательский интерфейс для отправки и получений
сообщений WhatsApp
2. Требуется использовать сервис GREEN-API https://green-api.com/
3. Требуется реализовать отправку и получение только текстовых сообщений
4. Требуется за прототип интерфейса взять внешний вид чата
https://web.whatsapp.com/
5. Требуется реализовать интерфейс максимально простым с минимальным набором
функций

6. Требуется отправку сообщений реализовать методом https://green-api.com/docs/api/sending/SendMessage/

7. Требуется получение сообщений реализовать методом https://green-api.com/docs/api/receiving/technology-http-api/

8. Требуется использовать технологию React

Ожидаемый результат:

- Пользователь переходит на сайт чата и вводит свои учетные данные из
системы GREEN-API (idInstance, apiTokenInstance)
- Пользователь вводит номер телефона получателя и создает новый чат
- Пользователь пишет текстовое сообщение и отправляет его получателю в
WhatsApp
- Получатель отвечает на сообщение в мессенджере WhatsApp
- Пользователь видит ответ получателя в чате

## Результат

### Локальный запуск проекта

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

1. Склонировать репозиротий

```sh
git clone https://github.com/VladBrok/react-dev-test-task.git
```

2. Перейти в папку с репозиторием

```sh
cd react-dev-test-task
```

3. Установить зависимости

```sh
npm i
```

4. Запустить dev сервер

```sh
npm run dev
```

### Экранные формы

1. Экран авторизации

![auth screen demo](public/demo/auth-screen.png)

2. Главный экран

![main screen demo](public/demo/main-screen.png)

3. Создание чата

![chat creation screen demo](public/demo/chat-creation.png)

4. Просмотр чатов и сообщений

![chats and messages view demo](public/demo/chats-and-messages.png)