💰 Честный Брокер

🎯 Цель

Дать пользователю общую информацию о компании + реализовать функционал личного кабинета (авторизация, торговля)

Содержание

• 🗃️ Описание

• 👀 Внешний вид

• 🧱 Стек

• 🚀 Запуск

• 📚 Постраничное описание

• ☎️ Контакты

• ⚖️ Остальное

🗃️ Описание

На сайте есть страница контактов и страница тарифов, а в личном кабинете реализована регистрация/авторизация по номеру телефона и паролю (с проверкой ввода) и синхронизацией данных с firebase + записью в cookie. В самом личном кабинете можно покупать и продавать акции и другие финансовые инструменты, пополнять/списывать деньги со своего счета, (цены подгружаются динамически, информация о каждом изменении баланса и состава портфеля записывается в firestore, так что при заходе с разных устройств вы попадете в один и тот же личный кабинет), просмотра текущих новостей рынка(также загружаются по api) и редактированием своего профиля.

👀 Внешний вид

Вид на пк

Главная страница

---

О нас

---

Тарифы

---

Страница входа/регистрации

---

Личный кабинет - Главная

---

Личный кабинет - Профиль

---

Личный кабинет - Торговля

---

Личный кабинет - Новости

---

Вид на телефоне

Главная страница

---

Мобильный хедер

---

О нас

---

Тарифы

---

Страница входа/регистрации

---

Личный кабинет - Главная

---

Личный кабинет - Профиль

---

Личный кабинет - Торговля

---

Личный кабинет - Новости

---

🧱 Стек

• React
• SCSS
• Parcel
• Firebase
• API

А также

• react-router
• react-ticker
• animate.css
• eslint
• prettier
• babel

🚀 Запуск

1. Скачать и установить Node JS и Git
2. Клонировать репозиторий

git clone https://github.com/Terro216/RTUITLab_Recruit.git
cd RTUITLab_Recruit

3. Установить зависимости

npm i

4. Запустить сайт

npm run start

Готово! Теперь остается открыть сайт в браузере (http://localhost:1234)

📚 Постраничное описание

1. Главная страница - рассказывается о компании, её принципах и преимуществах, демонстрируются отзывы (оформлены в виде бегущей строки) и предлагается открыть счёт:

---

• О нас - краткая история компании, контакты и адрес
• Тарифы - страница, показывающая тарифы обслуживания
• Бизнесу - находится в разработке IT-отделом компании
• Обучение - находится в разработке IT-отделом компании

---

2. Личный кабинет - попасть в него можно нажав на кнопку "Открыть счёт" в хедере или "Начать инвестировать" внизу экрана. Сначала открывается авторизация/регистрация пользователя, после которой происходит переход в сам личный кабинет:

---

• Главная - Отображает денежный баланс, стоимость приобретенных активов и выводит весь финансовый портфель. Так же присутствует возможность пополнить счет, вывести деньги, продать какие-либо финансовые инструменты
• Профиль - Показывает пользовательские данные, которые можно отредактировать. Так же здесь находится кнопка выхода из аккаунта
• Новости - Страница с новостями рынка, загружаемыми через api
• Торговля - На этой странице непосредственно можно покупать акции (и другие финансовые инструменты), искать их по тикеру и узнать текущий статус биржи и курс валют (все эти данные актуальные и загружаются через api)

---

☎️ Контакты

Мой сайт-портфолио
Все мои контакты в нём, а также на странице "О нас" этого сайта

⚖️ Остальное

Вдохновение, благодарности, API...

• Tradernet API
• News API
• Font Awesome Icons
• Bages
• Loading.io
• Chrome DevTools