Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/mashamoreva/coin

🏦 Проект: "Coin."
https://github.com/mashamoreva/coin

cypress sass webpack

Last synced: about 2 months ago
JSON representation

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

Host: GitHub
URL: https://github.com/mashamoreva/coin
Owner: MashaMoreva
Created: 2023-12-22T12:31:45.000Z (about 1 year ago)
Default Branch: main
Last Pushed: 2024-01-29T17:02:41.000Z (12 months ago)
Last Synced: 2024-01-30T16:39:51.722Z (12 months ago)
Topics: cypress, sass, webpack
Language: JavaScript
Homepage:
Size: 1.34 MB
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# Coin.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

```sh
cd coin
```

_Backend_

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

```sh
cd backend
```

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

```sh
npm install
```

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

```sh
npm start
```

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

_Frontend_

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

```sh
cd frontend
```

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

```sh
npm install
```

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

```sh
npm run dev
```

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

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

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

npm:

```sh
npm install cypress --save-dev
```

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

```sh
yarn add cypress --dev
```

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

```sh
npx cypress open
```

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

#### Ссылки:

- [Макет в графическом редакторе Figma](https://www.figma.com/file/JUJVDoP27x18v4Eqt66SdK/Bank-Diploma?node-id=1%3A3)