enKontakt

e-cargo

Platforma szkoleń dla ośrodków szkolenia kierowców – zbudowałem dużą część front-endu: harmonogram, panel instruktora, kreator kursów i komponenty UI.

  • Vue 3
  • Inertia
  • Tailwind CSS

Aplikacja firmowa (Pesi) bez publicznego dostępu – na zrzutach zmyślone dane.

e-cargo – harmonogram zajęć z pojazdami w kolumnach
  • 8 mies.główna część projektu – od grudnia 2025 do wydania w lipcu 2026
  • 32komponenty UI, z których korzysta cały zespół – pola, okna, tabele, podpowiedzi
  • 171ikon jako komponenty Vue – jeden zestaw w całej aplikacji
  • 4role użytkowników – administrator, ośrodek, instruktor i kursant – w każdym panelu moje widoki

Co zbudowałem

e-cargo to platforma dla ośrodków szkolenia kierowców zawodowych: kursy online dla kursantów, harmonogram zajęć z instruktorami, pojazdami i salami oraz dokumenty. Pracowałem nad nią w zespole Pesi – główna część, do wydania na produkcję, trwała od grudnia 2025 do lipca 2026. W Vue 3 i Inertia zbudowałem dużą część widoków i komponenty, z których korzysta cały zespół. Najbardziej jestem zadowolony z biblioteki komponentów – tworzyłem ją od zera. Każdy nowy element projektowałem trochę dłużej, żeby przewidzieć, co może przestać działać. Przekonałem też grafika, żeby projekt opierał się na powtarzalnych elementach. Wyszedł z tego fajny produkt 🙂

Najważniejsze cechy

  • Biblioteka komponentów dla całego zespołu – pola formularzy, własny wybór daty i godziny, okna, tabele, podpowiedzi i ponad 170 ikon
  • Harmonogram zajęć dla instruktorów, pojazdów i sal – rezerwacja przeciąganiem po osi czasu i ostrzeżenia o kolizjach
  • Panel instruktora – dostępność stała i jednorazowa, nieobecności i rezerwacje, także na telefonie
  • Kreator szkoleń – struktura kursu w drzewku, biblioteka gotowych modułów i slajdów, wersje językowe
  • Kurs dla kursanta – slajdy z nagraniami audio, notatki, testy z wyjaśnieniami i podsumowanie modułu
  • Pulpity ośrodka i administratora oraz ukrywanie danych osobowych jednym przełącznikiem

Jak to wygląda

Zrzuty z aplikacji ze zmyślonymi danymi – kliknij zrzut, żeby go powiększyć.

  • Harmonogram – dzień z pojazdami w kolumnach, kolizje oznaczone na czerwono, nowa rezerwacja przeciąganiem po osi czasu
  • Pulpit ośrodka – szybkie akcje, ostatnio rozpoczęte szkolenia, urlopy, ubezpieczenia pojazdów i niedyspozycje
  • Dostępność instruktora – stały grafik tygodnia, niestandardowe godziny, urlopy i kalendarz miesiąca
  • Edytor testu – pytania z wyjaśnieniami odpowiedzi, próg zdawalności i losowanie pytań
  • Edycja pytania – treść, odpowiedzi, wyjaśnienie i przypisany slajd z nagraniem audio

1 / 5

Harmonogram zajęć

Harmonogram – dzień z pojazdami w kolumnach, kolizje oznaczone na czerwono, nowa rezerwacja przeciąganiem po osi czasu

Rozwiązania w szczegółach

Rzeczy z kodu, które najlepiej pokazują, jak pracuję.

  • Własny wybór daty i godziny

    Jedno pole na datę, datę z godziną albo samą godzinę – z widokiem dni, miesięcy i lat, granicami min/max i formatem „10 cze 2026”. Zastąpiło zwykłe pola daty w kolejnych widokach.

  • Zaznaczanie na osi czasu

    Wspólna logika dla harmonogramu ośrodka, instruktora i profilu kursanta – krok 15 minut, a na dotyku przytrzymanie 400 ms i tolerancja ruchu, żeby przewijanie nie tworzyło przypadkiem rezerwacji.

  • Podpowiedź tylko przy uciętym tekście

    Gdy nazwa nie mieści się w polu i kończy wielokropkiem, po najechaniu widać pełną treść – a gdy się mieści, podpowiedzi nie ma. Działa też w polach wyboru (select), gdzie zwykłe porównanie szerokości zawodzi – tekst mierzę w ukrytym elemencie z tą samą czcionką.

  • Okienka, które nie wychodzą za ekran

    Podpowiedzi, menu i listy wyboru same wybierają stronę, po której się otworzą, i trzymają odstęp od krawędzi – także przy przewijaniu strony.

← Wszystkie projekty

Masz projekt do zrobienia?

Albo szukasz kogoś do zespołu? Napisz kilka zdań – odpowiem w ciągu 72 godzin.

Imię, e-mail i treść wiadomości wykorzystam tylko po to, żeby odpowiedzieć. Szczegóły w polityce prywatności.