Back
Dashboard i mapa polskiej elektroenergetyki
Cel projektu
Zebrać wszystkie możliwe dane o polskiej sieci elektroenergetycznej w jednym miejscu i podawać je w sensowny sposób przez zaawansowaną aplikację webową.
Zakres prac
Projektowanie UX/UI
Development
Integracja systemów
Czas trwania
500h
Technologie
Laravel
ReactJS
PHP 8
Klient
Politechnika Warszawska
Po ustaleniu potrzeb użytkowników i wymagań biznesowych zaczęliśmy wireframowanie
Dzięki gotowemu zestawowi do wireframowania zawierającemu elementy wizualizacji danych mogliśmy dzielić się pomysłami znacznie szybciej i dokładniej niż przy wireframowaniu od zera.
Po kilku iteracjach projektowych przeszliśmy do części UI
W tym konkretnym projekcie postawiliśmy na styl semi-neomorficzny. Umożliwił on znacznie czystszy, estetyczny interfejs dashboardu, bez kompromisów w zakresie użyteczności przy przeglądaniu dużych ilości danych w formie tabeli lub mapy.
Aplikacja została zaprojektowana do pracy zarówno w jasnej, jak i ciemnej wersji
Zmniejsza to obciążenie wzroku użytkowników podczas dłuższego monitorowania danych. Projektowanie zarówno dla trybu jasnego jak i ciemnego było jednym z głównych wyzwań projektowych, z którymi musieliśmy się zmierzyć, głównie ze względu na używanie wielu kolorów do wizualizacji danych
Podczas projektowania opracowaliśmy podstawowy design system
Pomaga nam utrzymywać spójność w projektach i dobrze organizuje kod. Wprowadziliśmy też wiele komponentów do design systemu, co znacznie skróci czas (i obniży koszty) poświęcany na rozwijanie nowych funkcji
Aplikację zbudowaliśmy na 8. edycji frameworka Laravel, co umożliwiło jeszcze szybszy i bardziej niezawodny development
Używa systemu cachowania Redis, co pozwala na szybsze wyświetlanie danych. Dane wyświetlane na dashboardzie są zintegrowane z zewnętrznymi systemami za pomocą REST API. Do stworzenia warstwy frontendowej aplikacji zdecydowaliśmy się użyć frameworka React.js w połączeniu z TypeScript, dzięki czemu udało nam się zbudować modułową strukturę projektu, elastyczną pod kątem przyszłych funkcjonalności. Ponadto dzięki możliwościom TypeScriptu wyeliminowaliśmy potencjalne niezgodności związane z obsługą danych z API. Zastosowanie wymienionych technologii sprawiło, że w formie PWA aplikacja działa płynnie jakby była natywna.
Dostarczyliśmy klientowi kompleksowe moduły dashboardu i mapy, będące solidnym fundamentem dla dalszych rund rozwoju aplikacji
Zobacz na żywo
Porozmawiajmy o Twoim projekcie!
Opowiedz nam o swoim projekcie. Pomożemy zaplanować architekturę, zakres i realizację.
