Projekt inżynierski · 2024/25
PipeQ
System kolejkowy dla biura obsługi studenta, odświeżany na żywo.
- Rola
- Frontend (Vue + Tailwind) w 4-osobowym zespole
- Rok
- 2024/25
- Stack
- Vue.js, Pinia, Tailwind CSS, Laravel 11, Laravel Reverb, Docker
- Uczelnia
- WSB Merito
- Zespół
- 4 osoby
- Realtime
- WebSockety
Wyzwanie
Od czego się zaczęło
W biurze obsługi studenta kolejka ustawiała się po prostu na korytarzu. Nikt nie wiedział, ile poczeka ani do którego okienka ma podejść. Potrzebny był prosty system, który to uporządkuje i da się go postawić na sprzęcie uczelni.
Rozwiązanie
Co zrobiłem
Backend zespół zrobił w Laravelu 11, a za WebSockety odpowiada Laravel Reverb. Dzięki temu kiosk, panel obsługi i tablica odświeżają się od razu.
Ja odpowiadałem za frontend. Wprowadziłem do projektu Vue i Tailwind CSS, przepisałem widoki z Bootstrapa, przeniosłem stan aplikacji do Pinii i podpiąłem go pod zdarzenia z backendu.
Panel koordynatora przebudowałem tak, żeby dało się go obsługiwać bez szkolenia. Zgłoszenia się przeciąga, dwuklik przywraca je do kolejki, a przy ryzykownych akcjach pojawia się potwierdzenie.
Najciekawsze elementy
Panel koordynatora z drag & drop
Bilety przeciąga się między stanowiskami i sprawami. Dwuklik przywraca zgłoszenie do kolejki, a system nie pozwala przenieść tego samego biletu dwa razy.
Widok kiosku dla studenta
Student wybiera, z czym przychodzi, dużymi przyciskami na ekranie dotykowym. Ten widok przepisałem z Bootstrapa na Vue i Tailwind.
Licznik czasu oczekiwania
Przy każdym bilecie widać, jak długo czeka, a kolor zmienia się z czasem. Obsługa od razu wie, kogo wziąć pierwszego.
Potwierdzenia przy ważnych akcjach
Zakończenie czyjejś kolejki albo wyczyszczenie wszystkich biletów trzeba potwierdzić w okienku. Komunikaty są po polsku i po angielsku.
Chcesz coś podobnego u siebie?
PorozmawiajmyNastępny projekt
Cortify Labs