mashamoreva / coin

🏦 Проект: "Coin."

Coin.

Данный проект - это веб-приложение на этапе MVP, объединяющее банковские операции с криптовалютами.

Функционал каждого из разделов:

• Форма входа пользователя
  Пользователь вводит логин и пароль на экране входа, авторизуется в системе. Регистрация через портал отсутствует, происходит в другом месте по приглашениям. Валидация требует заполнения полей "Логин" и "Пароль", не менее 6 символов и без пробелов.

• Список счетов пользователя
  После успешной авторизации, пользователь переходит в свой личный кабинет, по умолчанию в раздел просмотра списка своих счетов. Возможна сортировка счетов по номеру, балансу и времени последней транзакции.
  Кнопка "Создать новый счет" добавляет автоматически новый счет пользователю без дополнительных настроек.
  Кнопка "Открыть" на каждом счете перенаправляет на страницу подробного просмотра информации о счете.

• Просмотр информации о существующей карте и форма перевода средств
  Форма переводов позволяет осуществлять переводы между счетами, поле для ввода счета получателя c возможностью выбрать среди ранее использованных счетов.
  График истории баланса представлен в виде столбчатой диаграммы, отражая динамику баланса выбранного счёта за последние 6 месяцев. Самый актуальный месяц расположен справа. График масштабируется автоматически.
  История переводов предоставляет пользователю таблицу с 10 последними транзакциями текущего счета. Отрицательные суммы (исходящие переводы) выделены красным, положительные (входящие переводы) - зеленым.
  График баланса и история переводов являются кликабельными, обеспечивая переход в раздел подробного просмотра истории баланса.

• Подробный просмотр истории баланса
  График динамики баланса представлен в виде столбчатой диаграммы, отражая изменения баланса за последние 12 месяцев.
  График "Соотношение входящих и исходящих транзакций" аналогичен первому, но раскрашенный для отображения процентного соотношения доходных и расходных транзакций в каждом столбике.
  История переводов представлена таблицей из 25 последних транзакций.

• Валютные инструменты
  Пользователи могут мониторить состояние своих валютных счетов, просматривать последние изменения курса и осуществлять обмен валют. В разделе "Ваши валюты" отображаются коды валют с текущим балансом.
  Справа предоставлена информация об изменении курса обмена валютных пар; стрелка вверх или вниз сопровождает цифры изменения курса, подсвечивая направление изменения зеленым или красным цветом.

• Карта банкоматов
  На данной Яндекс.Карте представлены метки, обозначающие местоположение банкоматов.

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

• Webpack - система сборки, обеспечивающая эффективное управление зависимостями и бандлинг кода
• Redom - библиотека для создания пользовательских интерфейсов, облегчающая разработку динамических веб-приложений
• Navigo - маршрутизатор для создания навигации в приложениях, обеспечивает управление переходами между страницами
• SCSS - препроцессор CSS, предоставляющий дополнительные возможности для структурирования и стилизации кода стилей
• Yup - библиотека для валидации данных в JavaScript, удобная при работе с формами и вводом пользователя
• Chart.js - библиотека для построения графиков и диаграмм, обеспечивает визуализацию данных
• Yandex Maps (YMaps) - использована для интеграции карты банкоматов, предоставляет функционал работы с картами
• Cypress - инструмент для тестирования веб-приложений на JavaScript с браузерной средой, обеспечивающий легкость создания тестов и проверки функциональности в реальном времени

Инструкции по установке:

• cкачайте репозиторий с приложением или склонируйте его с помощью команды:

git clone https://github.com/MashaMoreva/coin.git

• перейдите в папку проекта:

cd coin

Backend

• перейдите в папку с backend-частью проекта:

cd backend

• установите необходимые зависимости:

npm install

• запустите сервер:

npm start

(по умолчанию сервер слушает на порту http://localhost:3000)

Frontend

• перейдите в папку с frontend-частью проекта:

cd frontend

• установите необходимые зависимости:

npm install

• запустите проект:

npm run dev

(приложение будет доступно по адресу http://localhost:8080/)

Запуск Cypress тестов:

• убедитесь, что у вас установлен пакет Cypress; если нет, установите его с помощью

  npm:

npm install cypress --save-dev

или используйте yarn:

yarn add cypress --dev

• откройте терминал в корневой директории проекта
• запустите Cypress с помощью команды:

npx cypress open

• в открывшемся интерфейсе Cypress выберите папку coin.cy.js для выполнения тестов

Ссылки:

• Макет в графическом редакторе Figma