O projekcie

DDSP to panel podglądu projektów w sprincie. Stworzony został na cele zadania rekrutacyjnego.

Uruchomienie

Projekt można zobaczyć pod adresem https://ddsp.wkasolik.pl lub pobrać to repozytorium i uruchomić je lokalnie.

Jak uruchomić kod z repozytorium?

Potrzebujemy:

• node (projekt uruchamiany na wersji LTS 22.17.1)

• bun, npm, pnpm lub yarn (ja używałem bun 1.2.2)

• instancję bazy danych

  Ponieważ projekt używa bazy danych (pocketbase) można wykorzystać, tą która stworzona została w celach deweloperskich (credentialsy mogę podać) lub postawić własną z wykorzystaniem dokumentacji pocketbase.

• uzupełnić plik .env

  (przykład został również umieszczony w .env.example)

  DB_URL=<POCKETBASE DB URL>
  DB_TOKEN=<DB SUPERUSER AUTH TOKEN>

• wejść do pobranego, wypakowanego folderu i zainstalować potrzebne pakiety

  cd .\recruitment-ddsp-master\
  bun i
  

• zbudować projekt

  bun run build
  

• uruchomić

  bun run start
  

  W konsoli pojawi się adres na który trzeba przejść w przeglądarce. Standardowo jest to http://localhost:3000.

Opis oraz instrukcja użytkowania

Opis utworzonego panelu:

Stworzony panel zawiera kilka ekranów:

• Ekran główny

  Tutaj możemy zobaczyć wszystkie projekty które mamy dostępne w sprincie oraz poza nim.

  Przez sprinty można poruszać się naciskajac strzałkę w prawo lub w lewo. Aplikacja automatycznie wczyta i załaduje odpowiednie dane prezentując je w interfejsie.

  Każdy z projektów przedstawiony jest w postaci Card'a, gdzie projekty należące do sprintu posiadają informacje o ostatnim release oraz czy został wykonany w danym sprincie.

  • Zielony tickmark - wydany w sprincie
  • Czerwony tickmark - nie było release

  Po naciśnięciu linka changelog możemy zobaczyć szybko zmiany wprowadzone w tej wersji. Natomiast podgląd przeniesie nas na stronę projektu, gdzie mamy możliwość jego edycji oraz przeglądu wszystkich informacji o nim.

• Sprinty

  Ten ekran przedstawia wszystkie sprinty, które posiadamy dodane do panelu. Umożliwia podgląd krótkich informacji t.j czas trwania sprintu czy ile projektów jest do niego podpiętych. Mamy tutaj również akcje pozwalające się przenieść, do podglądu sprintu czy jego edycji. W tym miejscu również znajduje się przycisk odpowiadający za dodanie dowego sprintu.

• Sprint

  Tutaj możemy wyświetlić oraz zedytować wszystkie informacje dotyczące sprintu.

• Projekty

  Ekran pokazujący wszystkie projekty w aplikacji. Wyświetla wszystkie projekty umożliwiając przeniesienie się bezpośrednio do każdego z nich, jak i to tutaj znajduje się przycisk odpowiadający za dodanie nowego projektu.

• Projekt

  Tutaj możemy wyświetlić oraz zedytować wszystkie informacje dotyczące projektu - nazwę, opis, changelog. W tym dodać nowy release czy zedytować poprzednie.

Jak dodać nowy projekt?

• Przechodzimy do zakładki projekty
• Klikamy dodaj nowy projekt
• Uzupełniamy
• Klikamy zapisz

Jak zedytować projekt?

• Przechodzimy do odpowiedniego projektu. Można to zrobić bezpośrednio z ekranu głównego, lub z ekranu projekty
• Klikamy edytuj dane
• Uzupełniamy
• Klikamy zapisz

Jak dodać nowy sprint?

• Przechodzimy do zakładki sprinty
• Klikamy dodaj nowy sprint
• Uzupełniamy
• Klikamy zapisz

Jak zedytować sprint?

• Przechodzimy do odpowiedniego sprintu. Można to zrobić z ekranu sprintów
• Klikamy edytuj dane
• Poprawiamy dane
• Klikamy zapisz

Jak dodać nowy release?

• Będąc w odpowiednim projekcie (można do niego przejść bezpośrednio z ekranu głównego lub z zakładki projekty) wybieramy opcję dodaj nowy release
• Uzupełniamy dane
• Klikamy zapisz

Jak zedytować release?

• Będąc w odpowiednim projekcie (można do niego przejść bezpośrednio z ekranu głównego lub z zakładki projekty) znajdujemy relase, który nas interesuje
• Naciskamy na opcję edytuj release
• Poprawiamy dane
• Klikamy zapisz

Od autora

W poniższej części znajduje się background do całego projektu.

Po przeczytaniu zadania (dokładny opis niżej) wpadłem na pomysł jego realizacji. Jako, że bardziej znam next-a postanowiłem wykorzystać właśnie jego. Jednak po oddaniu zadania wycenionego na 3-7 dni, chcę podjąć rękawicę raz jeszcze i napisać to w angularze.

Napoczątku narysowałem sobie UI jako szybki szkic, ktory później zamierzałem minimalnie odwzorować.

Zamiast używać mockowan-e dane wykorzystałem działające api stworzone dzięki pocketbase, które zamaskowałem pisząc CRUD w next-js api.

Do pobierania danych ze stworzonego api wykorzystałem SWR.

Opis zadania

Kliknij, aby rozwinąć i przeczytać powierzone mi zadanie

Zadanie rekrutacyjne – Panel podglądu sprintów i wersji (redacted)

Kontekst biznesowy:

W (redacted) prowadzimy jednocześnie kilka projektów, które pracują w tym samym cyklu sprintowym (np. 2 tygodnie). Potrzebujemy prostego panelu, który pomoże członkom zespołu i interesariuszom szybko zorientować się:

• Jaki sprint jest aktualnie realizowany
• Które projekty biorą udział w tym sprincie
• Czy dla danego projektu był wykonany release w danym sprincie
• Kiedy release nastąpił
• Jaki był changelog danej wersji
• Widok mobilny

Dodatkowo zależy nam na możliwości:

• dodawania nowych projektów do panelu
• edycji już istniejących danych (np. zmiana changeloga, aktualizacja daty releasu itp.)

Co aplikacja powinna umożliwiać:

Widok główny:

• Lista projektów biorących udział w aktualnym sprincie
• Możliwość przełączenia się na poprzednie sprinty
• Dla każdego projektu:
  • Informacja, czy w sprincie był release
  • Data releasu (jeśli był)
  • Przycisk / akcja umożliwiająca podejrzenie changeloga

Changelog:

• Po kliknięciu np. w wersję / release – powinien pojawić się changelog (lista zmian, może być prosty ul > li).

Funkcjonalności edycyjne:

• Dodawanie nowych projektów (z przypisaniem do sprintu)
• Edycja danych sprintu lub projektu (np. zmiana daty, aktualizacja changeloga, zaznaczenie że był release)
• Dane mogą być przechowywane lokalnie (np. w state / JSON / localStorage)

Wymagania techniczne:

• Technologia: React / Next.js / Angular (dowolna z tych)
• Kod powinien być czytelny, dobrze zorganizowany i opatrzony typami (TypeScript)
• Nie jest wymagane połączenie z backendem – możesz pracować na danych mockowanych lub trzymanych lokalnie
• UI może być proste – ważniejsza jest funkcjonalność i jakość kodu

Bonus (opcjonalnie):

• Wyszukiwarka projektów

  Może źle napisałem, możesz zrobić wyszukiwanie po changelogach żeby zlokalizować temat kiedy by wrzucany do projektu

• Filtrowanie sprintów po tym, czy był release

Jak oddać zadanie:

• Prześlij repozytorium GitHub lub spakowany projekt (zip)
• Dołącz krótkie README z opisem, jak uruchomić aplikację lub adres url do działającego demo

Czas realizacji:

Decyzja kandydata

Poprawki i dodatkowe funkcjonalności, które należałoby wprowadzić (zdaniem autora):

Poniżej znajduje się lista udogodnień oraz modyfikacji, które warto było by rozwarzyć, przed wykorzystaniem takiego rozwiązania.

• Poprawić UI:

  • Możliwe rozwiązania
    • Wykorzystanie gotowych komponentów np. z ANT-DESIGN, SHAD/CN
    • napisanie customowych komponentów

• Wykorzystanie production-ready bazy danych lub lokalnie okodowanej wersji z pomocą np. prisma i sqlite

• Dodać zabezpieczenie przed nieautoryzowanym dostępem

  Może to zostać rozwiązane poprzez:

  • dodanie kont dla indywidualnych użytkowników
  • zabezpieczenie dostępu do panelu hasłem znanym tylko autoryzowanym osobom oraz umożliwieniem dostępu tylko z sieci wewnętrznej

  Jeśli zostaną dodane konta, można pokusić się również o dodanie trackingu informacji, kto wprowadził zmiany.

• Automatyczne pobieranie release oraz wersji z systemu kontroli wersji - np. github.

• Dodanie informacji ile minęło od czasu ostatniego sprintu

• Możliwość wyboru/przeglądu sprintów z kalendarza

• Dodanie bardziej kompleksowej wyszukiwarki

• Dodanie konfigurowalnej długości sprintów z poziomu aplikacji; Ułatwiło by to ich tworzenie. Automatycznie uzupełniony end-date.

• Dodać paginację do sprintów / projektów

• Dodać usuwanie (częściowo okodowane, nie włączone w projekcie)