<Projekt Innowacje 2023 – Letnia podróż z Vue i Firebase/>

15 lipca 2023
📁 Edukacja
Paweł Rutkowski
Projekt Innowacje 2023 – Letnia podróż z Vue i Firebase

W letnim semestrze 2023 roku ponownie wziąłem udział w Projekcie Innowacje na Politechnice Łódzkiej – tym razem pracując z szóstką studentów. Naszym celem było przejście od solidnych podstaw nowoczesnego web developmentu do wspólnego projektu opartego na ekosystemie Vue.js i Firebase, z wyraźnym podziałem ról w zespole.

To nie była moja pierwsza przygoda z tym programem, dlatego chciałem, żeby ta edycja była bardziej zbliżona do realiów komercyjnych projektów: od uporządkowanego startu technicznego, przez regularną pracę iteracyjną, aż po jasny podział odpowiedzialności na część webową, mobilną i managerską.

Faza wprowadzająca – wspólny język i fundamenty

Pierwsze tygodnie poświęciliśmy na wyrównanie poziomu i zbudowanie wspólnego języka technologicznego. Zadbaliśmy o kilka kluczowych obszarów:

  • Git i GitLab – praca na branchach, merge requesty, code review, rozwiązywanie konfliktów.
  • VS Code i developer experience – konfiguracja środowiska, rozszerzenia dla Vue i TypeScript, automatyczne formatowanie i linting.
  • JavaScript i TypeScript – najważniejsze konstrukcje języka, asynchroniczność (Promises, async/await) i myślenie w kategoriach typów.
  • Vue.js i Firebase – pierwsze komponenty w Vue 3, prosta nawigacja, połączenie z Firebase Authentication i Firestore.

Zależało mi na tym, żeby studenci nie tylko uruchomili „coś, co działa”, ale zrozumieli, dlaczego środowisko jest skonfigurowane w taki, a nie inny sposób. Dlatego sporo czasu poświęciliśmy na czytanie dokumentacji i omawianie decyzji projektowych zamiast ślepego kopiowania tutoriali.

Faza projektowa – jedna aplikacja, różne role

Druga część semestru to przejście do właściwego projektu. Zamiast kilku małych aplikacji zdecydowaliśmy się na jeden wspólny system, nad którym wszyscy pracowali równolegle. Tutaj pojawił się kluczowy element tej edycji – podział ról w zespole:

  • Zespół web – odpowiedzialny za frontend w Vue.js: widoki, logikę biznesową, integrację z Firebase.
  • Zespół mobile – skoncentrowany na doświadczeniu użytkownika na urządzeniach mobilnych: responsywność, nawigacja, testy na różnych ekranach.
  • Rola managera – jedna osoba, która pilnowała backlogu, rozdzielała zadania, koordynowała komunikację i dbała o domykanie sprintów.

Dzięki temu studenci mogli spróbować różnych perspektyw: ktoś mógł zanurzyć się w kodzie, ktoś inny skupić się na UX i zachowaniu na małych ekranach, a manager zmierzył się z bardzo realnym problemem – jak połączyć różne style pracy i priorytety w jeden spójny plan.

Spotykaliśmy się regularnie, a między zajęciami działała tablica z zadaniami i krótkimi opisami „definition of done”. To proste narzędzie mocno uporządkowało komunikację i pokazało, jak niewielkie procesowe usprawnienia potrafią podnieść jakość pracy całego zespołu.

Technologia w praktyce – Vue i Firebase jako wsparcie, nie cel

Projekt opierał się na nowoczesnym, ale wciąż przystępnym stacku:

  • Vue 3 z Composition API – komponenty, reaktywność, dzielenie logiki na czytelne moduły.
  • Pinia – tam, gdzie lokalny stan przestawał wystarczać, wprowadzaliśmy store’y na potrzeby bardziej złożonych widoków.
  • Firebase Authentication i Firestore – logowanie użytkowników, praca na danych w czasie rzeczywistym, proste, ale bezpieczne reguły dostępu.
  • Firebase Hosting i CI/CD – automatyczne wdrożenia po merge do głównej gałęzi.

Od początku powtarzałem, że celem nie jest „nauczyć się Vue i Firebase na pamięć”, tylko zobaczyć, jak takie narzędzia pomagają dowieźć działający produkt. Dzięki gotowej infrastrukturze w chmurze mogliśmy skupić się na projektowaniu funkcjonalności, przepływach użytkownika i jakości kodu.

Wyzwania i mikro-sukcesy po drodze

Praca w sześcioosobowym zespole szybko pokazała typowe wyzwania:

  • Różne tempo nauki i odmienne wcześniejsze doświadczenia
  • Konieczność dogadywania się przy decyzjach technicznych
  • Łączenie pracy nad frontendem, mobile UX i organizacją zadań

Starałem się stopniowo oddawać studentom odpowiedzialność: zamiast narzucać rozwiązania, zadawałem dodatkowe pytania, odsyłałem do dokumentacji, zachęcałem do wzajemnego tłumaczenia sobie trudniejszych tematów. Dzięki temu pod koniec semestru coraz częściej widziałem sytuacje, w których problemy rozwiązywali już bez mojej bezpośredniej interwencji.

Efekt końcowy – coś więcej niż demo

Na koniec semestru mieliśmy aplikację, która nie była tylko zestawem pojedynczych ekranów, ale spójnym systemem:

  • Logowanie użytkowników przez Firebase
  • Praca na danych w Firestore
  • Dopracowana nawigacja i widoki działające dobrze również na telefonach
  • Proces wdrażania na hosting w chmurze

Dla studentów był to pierwszy kontakt z pełnym cyklem życia aplikacji – od pierwszego commita, przez code review, po realne wdrożenie. Dla mnie była to kolejna edycja Projektu Innowacje, która potwierdziła, że połączenie fazy wprowadzającej z pracą w jasno zdefiniowanych rolach daje najlepszy efekt: ludzie szybciej rosną, bo widzą zarówno techniczne detale, jak i szerszy kontekst zespołowej pracy.

Mam nadzieję, że dla tej szóstki studentów był to dobry punkt wyjścia do kolejnych, coraz bardziej samodzielnych projektów – niezależnie od tego, czy wybiorą ścieżkę web, mobile, czy zarządzanie produktem.

Udostępnij artykuł:

Paweł Rutkowski

Paweł Rutkowski

Full-stack developer, przedsiębiorca i pasjonat nowych technologii.

📚 Powiązane Posty

Inne artykuły, które mogą Cię zainteresować