Этот проект выполнен в качестве тестового задания в компанию Норси Транс. Также является моим первым знакомством с 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)