Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings
Open more actions menu

Repository files navigation

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

project image

Развернутое приложение на 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. На фронте реализована проверка простых ошибок для уменьшения нагрузки на сервер с отображением ошибки в конкретной строке ввода. При отправке неверных данных логина или пароля на сервер появляется информация об ошибочно введенных данных (данная информация приходит с сервера).

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

project image

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

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

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

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

project image

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

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

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

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

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

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

project image

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

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

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

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

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

project image

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

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

project image

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

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

npm run dev

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

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

About

Personal account for interaction with crypto wallets and the ability to exchange currencies

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages

Morty Proxy This is a proxified and sanitized view of the page, visit original site.