Go!
Мероприятия - сегодня!

Веб-приложение для отслеживания мероприятий

Структура

• О проекте
• Технологии
• Способы взаимодействия с проектом
  • Ознакомление
• Развертывание проекта
• Авторы

О проекте

В будущем GO - это веб-приложение, которое позволит быстро и легко отслеживать мероприятия и события крупных городов России. Go предлагает единую бонусную программу, спонсируемую государством, которая позволяет получать бонусы за участие в различных активностях. Пользователи могут использовать бонусы для приобретения билетов к большинству возможных мероприятий и событий города.

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

Технологии

Приложение разработано на связке Vue 3 + Vite с использованием Vuex и Router.

• Vite - для сборки и конфигурации
• Vuex - для хранения данных формата Json
• Router - для навигации

Карта реализована с помощью API сервиса Mapbox.

• Vue 3
• Vite
• Mapbox

Взаимодействие с проектом

Проект разделен на следующие этапы:

• Дизайн проект (опционально, но рекомендуется ознакомиться): Дизайн-проект в Figma, который показывает визуальное представление и стилистку веб-приложения. Из него можно оценить подход pixel perfect.
• Верстка с некоторым JavaScript (ветка layout): Ветка, на которой выполнена верстка основных компонентов и добавлены некоторые интерактивные элементы с использованием ванильного JavaScript.
• Vue приложение (ветка master): Главная ветка проекта, содержащая разработанное веб-приложение на основе фреймворка Vue 3. Здесь реализованы все функциональные возможности приложения.

Сам процесс ознакомления с проектом может включать в себя следующие шаги:

1. Первичный просмотр видео
2. Ознакомление с дизайн-макетом
3. Просмотр вёрстки (локально/pages)
4. Запуск веб-приложения в локальной среде или просмотр с помощью Netifty (ссылка ниже).

Поэтапное ознакомление позволит вам получить более полное представление о проекте и его технической реализации.

Ознакомление

Локально

sh:

git clone https://github.com/Benrise/GoApp.git

Netify:

https://resplendent-belekoy-f53266.netlify.app/

Для быстрого просмотра HTML5 верстки:

https://benrise.github.io/GoApp/ (GitHub Pages)

Ссылка на дизайн макет Figma:

Прототип: https://www.figma.com/proto/sHGiZ71sPiEAv1Bg0yJgpm/Lab---Go?type=design&node-id=58-857&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=58%3A857

Макет: https://www.figma.com/file/sHGiZ71sPiEAv1Bg0yJgpm/Lab---Go?type=design&node-id=0-1&t=971TvNhbe4ux2Ncl-0

Развертывание проекта с помощью npm

Для локального запуска веб-приложения необходим:

• npm

npm install npm@latest -g

npm run dev

Note: Если у вас Mac на ARM архитектуре, в случае ошибки установки модуля "node-sass", ниже представлено возможное решение:

npm uninstall node-sass
npm install --save-dev sass

Авторы

• Latypov Artem - Benrise - @benrise

Благодарность

• RTUITLab
• Ivan Laptev