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

https://github.com/margo-yunanova/pay2u-subscriptions-hackathon

Мобильное приложение для агрегации сервисов подписок для PAY2U
https://github.com/margo-yunanova/pay2u-subscriptions-hackathon

mock-service-worker mui react react-hook-form react-router redux-toolkit swiper typescript yup-validation

Last synced: 2 months ago
JSON representation

Мобильное приложение для агрегации сервисов подписок для PAY2U

Awesome Lists containing this project

README

          

# Сервис подписок для Pay2U

Приложение разработано в рамках хакатона по созданию MVP Веб-приложения с новым UX для PAY2U.

## Ссылка на деплой приложения
https://pay2u-ru.netlify.app

## Сборка и запуск проекта

### Запуск в режиме разработки

```bash
npm install
npm run dev
```

### Локальное тестирование приложения

```bash
$ npm run build
$ npm run preview
```

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

Фронтенд написан на React + TypeScript со сборщиком Vite

|Пакеты|Назначение|
|:----|:----|
|[MUI](https://mui.com/)|Библиотека компонентов для создания интерфейсов на Material Design System от Google|
|[Fontsource/roboto](https://www.npmjs.com/package/@fontsource/roboto)|Пакет со шрифтами|
|[Swiper](https://swiperjs.com/)|Библиотека для реализации карусели.|
|[React-coolicons](https://www.npmjs.com/package/react-coolicons)|Библиотека иконок Сoolicons.|
|[Reduxjs/toolkit](https://redux-toolkit.js.org/)|Фреймворк для получения данных.|
|[React-router](https://reactrouter.com/en/main)|Библиотека для переключения и маршрутизации страниц.|
|[React-hook-form](https://react-hook-form.com/)|Библиотека для работы с формами.|
|[React-imask](https://www.npmjs.com/package/react-imask)|Библиотека для преобразования отображаемых данных для форм.|
|[Yup](https://github.com/jquense/yup)|Библиотека для валидации данных.|
|[Use-debounce](https://www.npmjs.com/package/use-debounce)|Библиотека, которая позволяет отменить и отложить на какое-то время её повторные вызовы
|[MSW](https://mswjs.io/)|Библиотека для имитации API, которая позволяет создавать мок, перехватывая запросы на сетевом уровне.|

## Дизайн приложения

[Ссылка на Figma](https://www.figma.com/file/4AQJbXciO0LZJBN0UuYgCm/%D0%A5%D0%B0%D0%BA%D0%B0%D1%82%D0%BE%D0%BD-%2B.-11-%D0%BA%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D0%B0?type=design&node-id=963-3132&mode=design&t=mpJQHQUKhz355Z9A-0)

## Бэкенд приложения

[Репозиторий бэкенда](https://github.com/zalgan05/PAY2U_team11)

[API](https://app.swaggerhub.com/apis/ZALGAN94_1/PAY2U/1.0.0)

## Реализованный функционал

1. Главный экран (2.1-2.3)
1. Каталог (4.1-4.4)
1. Карточка подписки (9.1)
1. Оформление подписки (10.1-10.2)
1. Мои подписки (3.1-3.5)
1. Карточка подписки (9.2)
1. Управление подпиской (11.1-11.3)
1. Онбординг (1.1-1.2)
1. Избранное (5.1-5.2)

## В разработке приложения в составе 11 команды участвовали:

|Фамилия Имя|Контакты|Роль|
|:----|:----|:----|
|Юнанова Маргарита|[Telegram](https://t.me/MargoY)|🔨 Frontend(web)|
|Мариненко Артём|[Telegram](https://t.me/zalgan), [@zalgan05](https://github.com/zalgan05)|⚙️ Backend|
|Кравцов Данила|[Telegram](https://t.me/Lester_Tesla)|☑️ PM|
|Рябченкова Наталья|[Telegram](https://t.me/NatashaTef)|🛵 PdM|
|Екатерина Рябова|[Telegram](https://t.me/kkaterokk)|🎨 Design|
|Замураев Владимир|[Telegram](https://t.me/Vladimir_Zamuraev)|🎨 Design|
|Прокофьева Полина|[Telegram](https://t.me/iampoly)|🎨 Design|
|Кислейко Ксения|[Telegram](https://t.me/ksenia_2722)|📈 SA|
|Раджабов Гамид|[Telegram](https://t.me/GamidRadzhabov)|📈 SA|
|Грейлих Евгений|[Telegram](https://t.me/BarristanKell)|🎯 BA|