Разработка SPA-фронтенда для визуализации данных об аэропортах на React, TypeScript — Владилен Минин
Автор: Spectr | Все об IT и разработке
Загружено: 2022-09-07
Просмотров: 586
«Разработка 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 Вопросы из зала
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке: