Разработка SPA-фронтенда для визуализации данных об аэропортах на React, TypeScript — Владилен Минин

«Разработка SPA-фронтенда для визуализации данных об аэропортах на React, TypeScript» — Владилен Минин (Result School, основатель) Воркшоп с конференции Ural Digital Weekend 2022 (8 июля 2022) В рамках воркшопа Владилен спроектировал и разработал интерфейс для визуализации данных об аэропортах. Для реализации он использовал React JS, TypeScript и Rest API из первого воркшопа на тему «Разработка бэкенда (Rest API) для сервиса работы с открытыми данными об аэропортах. Стек: Python (Django), PostgreSQL». Ссылка на воркшоп: https://www.youtube.com/watch?v=AuVwn8XiAbQ В процессе реализации Владилен затронул следующие стадии разработки: Сборка интерфейса на основе готового шаблона Верстка темплейтов c Tailwind CSS Создание основных компонентов, настройка роутинга Разработка API-слоя, разработка сторы Интеграция сторы с интерфейсом Частичное покрытие функционала тестами В результате у нас получился интерфейс веб-приложения, который использует Rest API из первого воркшопа. Public API: http://146.185.211.116:8000/api/ Ссылка на репозиторий: https://github.com/Ural-Digital-Weekend/Frontend Сайт конференции — https://udwe.ru Сайт Spectr — https://digital-spectr.ru Организатор конференции — Spectr (https://digital-spectr.ru) Организационный партнер — Тэглайн (https://tagline.ru) Официальный сайт конференции — https://udwe.ru Официальный канал конференции — https://t.me/ural_digital_weekend Нанять команду Spectr — https://digital-spectr.ru/new-client #udweek #udw #ural_digital_weekend #digital #tagline #тэглайн #spectr #digitalspectr #мероприятие 00:00 Вступление от Владилена 1:00 Обзор проекта 3:30 Создание и настройка проекта 7:30 Маршрутизация 11:50 Создание навигации 14:50 Верстка главной страницы 19:10 Создание Store 30:05 Загрузка данных с сервера 44:30 Отображение данных в AirportCard 47:35 Обработка состояния загрузки и ошибки 48:45 Стилизация AirportCard 52:20 Обработка клика по AirportCard 54:50 Пагинация 1:10:35 Создание поисковика 1:31:25 Создание фильтров 2:01:10 Создание страницы AirportDetail 2:07:30 Создание авторизации 2:33:50 Вопросы из зала