Zespół pracował w ramach kursu CodersCamp 2021. Aplikację została wykonana przez uczestników kursu pod okiem dwóch mentorów.
Mentorzy: Dariusz Knysak, Paweł Michalak
Uczestnicy:
Wersja demonstracyjna aplikacji jest dostępna TUTAJ.
Celem projektu było napisanie aplikacji wykorzystującej wiedzę nabytą z drugiego działu kursu tj. z następujących technologii: React, Redux-Toolkit, Material-UI. Zespół projektowy zdecydował się na aplikację własnego pomysłu. eWolontariat jest aplikacją umożliwiającą użytkownikowi zapisanie się do grona Wolontariuszy i aktywnie działanie wśród nich. Możliwe jest również stworzenie profilu organizacji, która poszukuje wolontariuszy i udostępnia aktualne zadania.
Aplikacja została wykonana wg wymagań dostarczonych przez organizatorów CodersCamp. Szablon projektu dostępny jest TUTAJ.
Zespół projektowy przygotował design przy użyciu aplikacji FIGMA. Projekt graficzny dostępny jest TUTAJ.
Po uruchomieniu aplikacji wyświetlone zostaje Menu główne zgodnie z założeniem SPA (Single Page Application). Homepage został podzielony na sześć sekcji, z których możemy się przenieść dalej (wyrenderować inne komponenty aplikacji). W stopce znajduje się logo aplikacji oraz odnośniki do strony organizatora kursu i repozytorium projektu na Githubie. Założenia aplikacji: pozyskiwanie nowych wolontariuszy oraz budowanie listy zadań (wypełnienie odpowiednich formularzy). Z poziomu każdego ekranu jest możliwość powrotu do Menu głównego po naciśnięciu logo aplikacji znajdującego się w lewym górnym rogu ekranu.
Ogólny profil użytkownika wyświetla podstawowe informacje podane przy rejestarcji. Aby przypisać do swojego profilu status wolontariusza należy wypełnić formularz, który pojawia się po kliknięciu przycisku "Zakładam sobie profil wolontariusza".
Profil użytkownika ze statusem wolontariusza. Jest możliwość komentowania wolontariuszy oraz kontaktu z nimi.
Lista dostępnych wolontariuszy. W tym module jest możliwość filtrowania użytkowników wg kategorii, kontaktu z nim poprzez wysłanie wiadomości e-mail.
Na tym profilu widoczny jest krótki opis organizacji, lista udostępnionych zadań przez nią oraz liczba wolontariuszy potrzebna do konkretych akcji. Jest możliwość dodania kolejnych zadań przez wypełnienie odpowiedniego formularza.
Lista dostępnych zadań. W tym module jest możliwość filtrowania zadań wg kategorii oraz przejscie na stronę zadania poprzez kliknięcie przycisku "Pomagam".
Szczegółowy opis zadania z widoczną sekcją komentarzy. Wolontariusz może przypisać się do zadania poprzez kliknięcie przycisku "Pomagam".
W trakcie developmentu wykorzystujemy:
- Komunikacja klient — serwer
- Functional Component
- React hooks
- Tworzenie list komponentów
- JSX
- React-Modal
- Testy jednostkowe
- Redux Thunk
Aby uruchomić aplikację na lokalnej maszynie, wykonaj następujące kroki:
- Zainstaluj zależności za pomocą komendy:
npm install - Wystartuj serwer developerski
npm run dev
Kod produkcyjny aplikacji znajduje się w katalogu src.
Przy użyciu narzędzia Trello rozdzielono poszczególne moduły. Każdy z członków zespołu miał do wykoniania jeden moduł. Komunikacja zespołu odbywała się głównie przez Google Meets i Discord.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent