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

«Разработка SPA-фронтенда для визуализации данных об аэропортах на React, TypeScript» — Владилен Минин (Result School, основатель)

Воркшоп с конференции Ural Digital Weekend 2022 (8 июля 2022)

В рамках воркшопа Владилен спроектировал и разработал интерфейс для визуализации данных об аэропортах.

Для реализации он использовал React JS, TypeScript и Rest API из первого воркшопа на тему «Разработка бэкенда (Rest API) для сервиса работы с открытыми данными об аэропортах. Стек: Python (Django), PostgreSQL». Ссылка на воркшоп:    • Разработка бэкенда для сервиса работы с от...  

В процессе реализации Владилен затронул следующие стадии разработки:

Сборка интерфейса на основе готового шаблона
Верстка темплейтов c Tailwind CSS
Создание основных компонентов, настройка роутинга
Разработка API-слоя, разработка сторы
Интеграция сторы с интерфейсом
Частичное покрытие функционала тестами

В результате у нас получился интерфейс веб-приложения, который использует Rest API из первого воркшопа.

Public API: http://146.185.211.116:8000/api/
Ссылка на репозиторий: https://github.com/Ural-Digital-Weeke...

Сайт конференции — 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 Вопросы из зала