Crypto App - личный кабинет для взаимодействия с криптокошельками и возможностью обмена валют

Развернутое приложение на Vercel

---

🔴 Тестовый аккаунт:

логин: admin

пароль: developer

---

⚠️ Из-за ограничений Vercel при работе api с папкой tmp некорректно отрабатывает добавление нового кошелька и переводы между кошельками/между валютами. Также из-за отсутствия поддержки websocket в vercel - неактивно "Изменение курса в режиме реального времени".

Что может приложение:

1. Осуществление авторизации пользователя с получением токена для возможности повторного открытия приложения без необходимости авторизации.
2. Получение всех существующих счетов аккаунта
3. Открытие нового счета внутри аккаунта
4. Получение детальных данных о счете: баланс, даты открытия, последней транзакции, списка всех транзакций, отображение динамики изменения баланса за последние 6 месяцев
5. Возможность осуществлять перевод средств между счетами аккаунта
6. Получение изменений курса валют в режиме реального времени посредством websocket
7. Получение данных о всех текущих валютах аккаунта
8. Возможность совершать обмен валюты внутри аккаунта
9. Присутствует мобильная версия для возможности использования приложения на разных устройствах

Используемые подходы и инструменты:

1. React
2. Redux/Toolkit
3. Redux Thunk
4. Formik
5. Axios
6. Recharts - отображение диаграмм
7. Scss
8. Vite

Подробнее о реализации проекта:

Основа:

- Данный проект реализован на базе Vite + React + Redux/thunk/p>

- Для обращения к api приложения использовался Axios/p>

- Стили написаны с нуля при помощи SCSS, присутствуют глобальные переменные стиля для возможности дальнейшего масштабирования проекта

Страница логина:

- На странице реализовано стандартное окно логина. Форма логина использует formik. На фронте реализована проверка простых ошибок для уменьшения нагрузки на сервер с отображением ошибки в конкретной строке ввода. При отправке неверных данных логина или пароля на сервер появляется информация об ошибочно введенных данных (данная информация приходит с сервера).

- В хедере после логина появляется иконка пользователя с возможностью логаута.

Страница аккаунта:

- На данной странице представлены все кошельки на текущем аккаунте. На данной странице реализована возможность сортировки по определенным параметрам.

- Также есть возможность открыть новый счет (при открытии нового счета отправляется запрос на сервер и сервер возвращает все текущие счета с только что созданным)

- Каждый счет представлен следующей информацией: номер счета, текущий баланс, дата открытия счета, дата последней транзакции.

Страница счета:

- На странице представлены детальная информация о счете: номер счета, текущий баланс, дата открытия и дата последней транзакции.

- Присутствует отображение динамики изменения баланса на счете за последние 6 месяцев.

- История переводов содержит последние 100 транзакций (для уменьшения нагрузки на UI рендер был ограничен 100 элементами при помощи селектора)

- Имеется возможность перевода средств между счетами аккаунта. Для удобства выбора в форме присутствуют все счета пользователя, а также сразу отображается текущий баланс каждого аккаунта.

- При отправке данных формы также присутствуют проверки как на фронте, так и на бэке. Каждая ошибка обрабатывается с последующим отображением в UI.

Страница обмена валют:

- На странице представлено изменение курса в режиме реального времени. Эти данные обновляются посредством websocket. Обновление происходит каждую секунду.

- Также представлены все валюты, которые есть на аккаунте.

- Есть возможность обмена данных валют внутри аккаунта.

- В форме также реализована обработка всех ошибок с отображением данных в UI

Мобильная верстка:

Для мобильных устройств реализован удобный и интуитивно понятный интерфейс. При совершении каких-либо операций реализовано отображение попап окна с уведомлением для улучшений UX.

Для работы с приложением:

сборка приложения

npm run dev

• запуск осуществляется по адресу http://localhost:5173/

Для тестирования всех возможностей приложения необходимо запустить backend-api локально (файлы api - https://github.com/maksim-leskin/c-money-api).

При запуске локально, в текущем проекте, в файле src/globalVars.js необходимо изменить параметр isLocal на значение true;