-
Notifications
You must be signed in to change notification settings - Fork 1
Docs (Ru)
-
Pulic page - доступна только для не аутентифицировнного юзера. Если пользователь аутентифицирован - редирект на внутреннюю страницу.
-
Private page - доступна только для аутентифицировнного юзера(который уже выполнил вход). Если пользователь не аутентифицирован - редирект на публичную страницу(чаще всего /sign-in).
-
Pulic & Private page - доступна и для аутентифицированного и для не аутентифицированного пользователя. В зависимости от того, выполнил ли пользователь вход, может немного меняться её внешний вид и функционал.
/index - главная и основная страница. Сверху хедер. Ниже - таблица со списком валют, как на главной CoinMarketCap. по типу https://coinmarketcap.com/coins.
Функционал хедера:
-
Логотип. По клику на него редирект на страницу /index.
-
Поиск - инпут с автодополнением
-
Меню
- All coins (страница /index)
У аутентифицированного пользователя в меню добавляются страницы:
- Portfolio (private-страница /app)
- Transactions (private-страница /transactions)
-
Значения Market Cap(общая капитализация всех криптовалют), 24h Vol(обьем торгов по всем валютам за последние 24 часа) и BTC Dominance(отношение капитализации биткойна к капитализации всех криптовалют)
-
Sign In / Sign Up - для не аутентифицированного пользователя. У аутентифицированного пользователя там отображается его email и дропдаун с ссылками на Settings и Log out.
Поля таблицы:
- № - номер валюты в порядке по капитализации.
- Coin - Название валюты
- Market Cap - Текущая капитализация валюты
- Price - Стоимость валюты(в usd)
- Volume(24h) - Обьем торгов по валюте на биржах за 24 часа
- Circulating Supply - кол-во выпущеных монеток
- Change(24h) - %, на который изменилась стоимость валюты за последние 24 часа. Если цена выросла - зелёного цвета, если опустилась - красного
- Price Graph (7d) - график изменения цены стоимости валюты за последние 7 дней
- Watchlist - иконка со звездой, по клику на которую валюта должна добавляться в Watchlist(аналог Favourites), если юзер залогинен. Если не залогинен - по клику на неё открывается страница Sign in. Для залогиненого пользователя - если иконка в его Watchlist, то она активна(закрашена) по клику на неё - валюта убирается из Watchlist. Просмотреть Watchlist юзера можно на отдельной странице /watchlist
Таблица будет сделана на react-virtualized(https://bvaughn.github.io/react-virtualized/#/components/List) для того чтобы показать наш скилл и реализовать Lazy loading валют как только юзер доскролли до конца(пагинации не будет !!!)
/coin/:id - таблица с информацией о конкретной валюте (по типу https://coinmarketcap.com/currencies/bitcoin).
Список того что на ней должно быть:
- Хедер(аналогично странице /index)
- Небольшой блок с названием валюты и всей общей информацией, аналогичной той что есть в таблице на странице /index и ссылка на сайт криптовалюты.
- График изменения цены валюты с фильтрами по времени отображения данных на нём. Фильтры:
- 24 часа
- 1 неделя
- 1 месяц
- 3 месяца
- 1 год
- Всё время(по умолчанию)
- Инпут, по клику на который открывается 2 календаря, на которых можно выбрать кастомный диапазон дат- MVP 2.0
- Подробная информация о валюте (пару абзацев текста о валюте)
- Статистика:
- Bitcoin price
- Bitcoin ROI
- Market rank
- Market cap
- 24h volume
- Circulating supply - текушее колличество монет в обороте
- Total supply - текушее колличество монет
- Max supply - максимальное колличество монет(все могут быть ещё не намайнены)
- All time high - максимальная цена за всё время
- All time low - минимальная цена за всё время
- Yesterday’s Open / Close - цена на начало и конец вчерашнего дня
Отдельная страница с двумя полями (email и password), кнопкой "Sign in", и ссылкой на регистрацию /sign-up (на случай если у юзера ещё нет аккаунта).
Если данные введены некорректно, то выскакивает Toast с ошибкой.
Отдельная страница с тремя полями (email, password, confirm_password), кнопкой "Sign up", и ссылкой на страницу /sign-in(на случай если у юзера уже есть аккаунт).
Для того чтобы регистрация прошла у пользователя должен быть валидный мейл, пароли, password и confirm_password должны совпадать и быть больше либо равны 8 символов.
Если данные введены некорректно, то выскакивает Toast с ошибкой.
Список того что на ней должно быть:
- Хедер(аналогично странице /index), для аутентифицированного пользователя
- Stats - Блок с краткой сводкой по крипто-себережениям юзера:
- Current Value(USD) - текущяя стоимость всех крипто-активив юзера
- 24hr change - изменение цены портфолио юзера за 24 часа - отображается в USD и в % рядом. Зеленого цвета - если стоимость портфолио выросла, красного - если понизилась.
- Total Cost(USD) - сумма, которую юзер потратил на покупку крипты(то, что он вложил)
- Total Profit(USD) - Разность Current Value(USD) и Total Cost(USD). Можно тоже подсвечивать цветами.
- График изменения стоимости портфолио юзера, с фильтрами по времени отображения данных на нём. В зависимости от того когда юзер создал сделал первую транзакцию открываются некоторые фильтры(т.е, если он добавил первой транзакцией покупку BTC 9 дней назад, то ему будут доступны филтрры только по "24 часа", "1 неделя", и "Всё время". Фильтры:
- 24 часа
- 1 неделя
- 1 месяц
- 3 месяца
- 1 год
- Всё время(по умолчанию)
- Инпут, по клику на который открывается 2 календаря, на которых можно выбрать кастомный диапазон дат- MVP 2.0
- Holdings - таблица, в которой отображена суммарная статистика активов пользователя. Сортировка идёт по текущей стоимости валют в портфолио. Т.е если у юзера 0,5 BTC, которые сейчас стоят 5к$ и 10XRP, которые сейчас все стоят 25$, то BTC будет идти выше. Поля таблицы(часть из этих данных можно скрыть, и сделать чтобы они выезжали по клику на конкретный ряд в таблице под ним, а по-умолчанию оставить самые основные значения):
- № - номер валюты в порядке по "доминированию" в портфолио юзера
- Coin - Название валюты
- My value - Текущая стоимость сбережений юзера в данной валюте
- Amount - Колл-во валюты, которые есть у юзера(не в $, а именно в данной воллюте)
- Price - Текущая стоимость валюты(в usd)
- Change(24h) - %, на который изменилась стоимость валюты за последние 24 часа. Если цена выросла - зелёного цвета, если опустилась - красного
- Total Cost - кол-во USD, которые юзер вложил в данную валюту
- Profit - Разность My Value и Total Cost. Можно тоже подсвечивать цветами и выводить в USD и %
- Transactions - Таблица из 5-10 последних транзакцию юзера. В ней должны быть такие значения:
- Coin - Название валюты
- Type - тип транзакции(покупка / продажа)
- Date - Дата транзакции
- Amount - Кол-во валюты в транзакции(0.5 BTC, 21 XRP, и т.д)
- Price - Стоимость транзакции(в usd) Также рядом должны быть кнопки "View all" - переводит на страницу /transactions и "Add transaction" - открывает модальное окно для добавления новой транзакции
- Dominance chart - Pie chart, которая показывает сколько %(в usd) каждой валюты у юзера в отношении к полной стоимости его портфолио на текущий момент. Таким образом он будет понимать каких валют у него больше, а каких, наоборот, лучше прикупить для диверсификации.
Список того что в нём должно быть:
- Coin - Название валюты, выбирается из инпута с автодополнением
- Type - тип транзакции(покупка / продажа)
- Date - Дата транзакции
- Amount - Кол-во валюты в транзакции(0.5 BTC, 21 XRP, и т.д)
- Price - Стоимость транзакции(в usd)
- Save - кнопка, по которой закрывается модальное окно и происходит добавление/сохранение транзакции
/transactions - внутренняя страница на которой можно просмотреть все транзакции юзера и удалить/редактировать транзакцию.
Список того что на ней должно быть:
- Хедер(аналогично странице /index и /app), для аутентифицированного пользователя
- "Add transaction" - открывает модальное окно для добавления новой транзакции
- Transactions - Таблица транзакций юзера. В ней должны быть такие значения:
- Coin - Название валюты
- Date - Дата транзакции
- Amount - Кол-во валюты в транзакции(0.5 BTC, 21 XRP, и т.д)
- Price - Стоимость транзакции(в usd)
- Type - тип транзакции(покупка / продажа)
- Edit - иконка(кнопка), по которой открывается модальное окно, аналогичное тому что для добавления новой транзакции, но уже с предзаполненными полями.
- Delete - иконка(кнопка), по которой удаляется определенная транзакция из таблицы и из БД.