BITOP FINANCES - это проект, реализовываемый в рамках практики в МГТУ им. Н.Э. Баумана. Сам проект заключается в ведении своего портфеля акций, которые покупаются за Бауман Монеты. Бауман Монеты генерируются посредством нажатия кликера на странице профиля: каждый клик добавляет одну монету, которые затем можно обменять на ценные акции. Побеждает тот пользователь, кто на момент завершения всех торгов (~ 2 недели) имеет в сумме наибольший портфель по количеству монет.
На скринах приложения с телефона можно увидеть, как выглядит приложение:
В проекте участвовало 4-о человек, здесь я представляю Frontend часть, которая была полностью реализована мной. Для фронта был выбран React+Typescript в связке с Redux и redux-toolkit. Сервер реализован на Go, но здесь он рассматриваться не будет, так как реализовывался он моим тиммейтом
Приложение разрабатывалось под мобильные устройства как мобильное приложение. Приложение состоит из следующих экранов:
- приветствие
- портфель акций
- история операций
- просмотр акции
- покупка/продажа акции
- новости/хартбит
- профиль-кликер
- таблица лидеров
Потыкать созданные в рамках проекта макеты можно сдесь: https://www.figma.com/proto/Qrz1QveyZpU5fcLcMfmIPP/BITOP-App-Design?node-id=840-2856&t=0PeAHqoWcJozWt3M-1&scaling=scale-down&content-scaling=fixed&page-id=183%3A2177&starting-point-node-id=840%3A2856
Все страницы макетов: свалка, прод и референсы - и соответствующие макеты можно смотреть здесь: https://www.figma.com/design/Qrz1QveyZpU5fcLcMfmIPP/BITOP-App-Design?node-id=0-1&t=BThAsnXztGEfMjGa-1
Для локального развертывания приложения вначале скачайте исходный код. В папке проекта запустите команду
npm install
для загрузки node modules (ВАЖНО, чтобы на ПК был установлен NodeJS)/
После установки node modules, запускаем сервер командой
npm start
И ждем открытие приложения в браузере. Так как приложение разрабатывалось для мобильных устройств, имеет смысл просматривать приложение как мобильное. Для этого в панели инструментов разработчика выберите отображение как для мобильного устройства (левый верхний угол)
Как до этого было уже показано, можно использовать приложение непосредственно на телефоне. Для этого необходимо:
- ПК, где на localhost развернуто приложение, и смартфон должны быть подключены к одному и тому же WI-FI
- На телефоне нужно ввести ipv4 адрес компьютера вместе с портом. Узнать адрес, например, на Windows можно командой:
ipconfig
В случае успеха вы сможете пользоваться приложением на экране своего смартфона