Octoberfest 2023 project on Angular

Этот проект выполнен в качестве тестового задания в компанию Норси Транс. Также является моим первым знакомством с Angular.

Запуск проекта

Проект можно открыть и потыкать по ссылке

Либо же запустить его локально при помощи команд

git clone https://github.com/erik770/Octoberfest-angular-app.git

cd ./Octoberfest-angular-app

npm ci && npm run start

Затем в браузере открыть http://localhost:4200 с проектом

Некоторые замечания и комментарии к выполненному заданию

• Некоторые картинки и иконки в png формате тк, макета исходного не было дано, а найти прикольные svg картинки/иконки по такой теме оказалось нелегко. Так что я сделал выбор в пользу красивых png картинок, вместо посредственного дизайна с имеющимися в бесплатном доступе svg

• Реализовал некое подобие стора в сервисе пивоварен чтобы сохранять данные об уже загруженных заводах, и не делать лишние запросы при переходе к конкретной пивоварне. Хотел реализовать подобное хранение и для состояния пагинации и поисковой строки но уже решил не тратить на это время (зачеты тоже надо кому-то получать, ехех надеюсь на понимание)

• Наверное не лучшей идеей было использовать библиотеку компонентов, если я ей воспользовался только 1 раз, а на производительность, я подозреваю, это повлияло. Но я все же её использовал тк это было указано в стеке технологий, и подумал не лишним будет ознакомиться и научиться пользоваться

• Пришлось при деплое перейти на HashLocationStrategy тк насколько я понял сервак на GithubPages нельзя настроить например при помощи .htaccess файла, нашел решение проблемы только в переходе на хеш-стратегию

Краткое ТЗ

Необходимо создать приложение на Angular, в котором выводятся данные мировых пивоваренных заводов. Открытое JSON API для получения данных: https://www.openbrewerydb.org/

Приложение должно включать в себя три основных компонента (страницы):

• Главная страница - промо-лендинг Октоберфеста;
• Список заводов с функциональностью поиска;
• Описание завода.

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

• Текущая геолокация пользователя;
• Топ N ближайших заводов (параметр опциональный).

В компоненте со списком необходимо вывести:

• Поле поиска;
• Список с названиями заводов.

В компоненте с детализацией необходимо вывести:

• Название завода
• Контактную информацию: адрес/телефон/ссылку на сайт
• Отметить местоположение на интерактивной карте

Требования к приложению:

• Адаптивность: приложение должно адекватно выглядеть на экранах различного размера (mobile/tablet/desktop)

Стек технологий:

• Angular 14
• NgRx
• Библиотека UI-компонентов(например: PrimeNG, NgZorro, Taiga UI)