Zespół pracował w ramach kursu CodersCamp. Aplikację wykonali uczestnicy kursu z pomocą mentora. Zachęcamy do odwiedzenia profili członków zespołu, w celu zapoznania się z ich portfolio.
-
Małgorzata Bednarczuk (Developer)
-
Anna Koruc (UI)
-
Marta Probierz (Product Manager)
-
Weronika Kurek-Pękala (Product Owner)
-
Kasia Filip (Developer)
-
Sebastian Michalczyk (Tech Lead)
Celem projektu było dostarczenie aplikacji „Puppylog” pozwalającej użytkownikom na zapisanie do weterynarza swojego pupila. Zalogowany użytkownik może wybrać spośród trzech lekarzy kliniki. Po wyborze odpowiedniego weterynarza może dokonać rezerwacji terminu wizyty oraz samodzielnie dodawać swoje zwierzęta.
Każde zwierzę posiada indywidualną kartę pacjenta. Widnieje w niej imię, rasa, dane właściciela, historia chorób oraz inne ważne informacje dotyczące pupila. Wszyscy weterynarze mają dostęp do karty danego zwierzęcia oraz mogą ją edytować. Dodatkowo karta pacjenta jest uzupełniana przez weterynarza po każdej odbytej wizycie.
Aplikacja została wykonana według wymagań dostarczonych przez organizatorów CodersCamp.
Na głównej stronie znajduje się autorskie logo (kliknięcie na nie powoduje przeniesienie na stronę główną) oraz nawigacja, z poziomu której można bezpośrednio przejść do sekcji: About, Contacts, Sign Up czy Login. Dodatkowo widnieje tu motto przewodnie strony - „We love Pets!”, a także przycisk „GET STARTED”, po kliknięciu na który, zostaniemy przeniesieni na stronę logowania.
Jeżeli użytkownik jest już zarejestrowany, wówczas może się zalogować na stronę podając swój e-mail oraz hasło oraz klikając na „I’M A PETLOVER”. Po pomyślnym zalogowaniu się, otrzymuje on dostęp do kolejnych zasobów strony. W nawigacji zamiast przycisku „Login” pojawi się przycisk „My Account” oraz przycisk „Log out”.
Na stronę mogą się również logować lekarze podając odpowiedni adres e-mail oraz hasło. Specjaliści otrzymują nieco inny zasób strony.
W przypadku, gdy użytkownik jeszcze nie posiada konta na stronie, może się zarejestrować, podając następujące dane: imię, nazwisko, e-mail, numer telefonu oraz hasło. Dane wprowadzone przez użytkownika zostaną zapisane w bazie danych.
Zalogowany użytkownik jest witany na stronie – pojawia się napis Welcome oraz imię użytkownika. Otrzymuje on dostęp do takich zasobów, jak:
Tu użytkownik może przejrzeć swoje zwierzęta (znajdują się tam następujące dane: imię, gatunek, rasa oraz data urodzenia) bądź dodać nowe. Po kliknięciu przycisku „ADD PET”, użytkownik zostaje przeniesiony do formularza, do którego może wpisać wyżej wspomniane dane dotyczące swojego pupila, a następnie, klikając przycisk „SAVE”, zostanie założona karta zwierzęcia. Dane te zostają zapisane w bazie.
Po kliknięciu w zakładkę „My Visits” użytkownik zobaczy kalendarz. Dni, w które ma zaplanowane wizyty, zastały wzięte w kółko. Klikając na ten dzień, pojawią się szczegółowe informacje dotyczące zaplanowanej wizyty.
Użytkownik może również zarezerwować wizytę u wybranego przez siebie weterynarza po kliknięciu przycisku „ADD NEW VISIT”. Zostanie on przeniesiony do formularza, w którym będzie mógł wybrać zwierzę, lekarza, datę oraz godzinę nowej wizyty. Dane te również zostaną zapisane w bazie.
Ostatnia zakładka to mój profil, gdzie użytkownik może przejrzeć dane, wprowadzone przez niego podczas rejestracji.
Zalogowany specjalista jest witany na stronie – pojawia się napis Welcome oraz imię specjalisty. Otrzymuje on dostęp do takich zasobów, jak:
Po kliknięciu w zakładkę „My Visits” specjaliście ukaże się kalendarz. Dni, w które ma zaplanowane wizyty, zastały wzięte w kółko. Klikając na ten dzień, pojawią się szczegółowe informacje dotyczące wizyt. Specjalista może uzupełnić historię choroby danego zwierzęcia, klikając na konkretną wizytę. Pojawi się wówczas okienko, w którym może wpisać bądź edytować niezbędne informacje na temat choroby danego zwierzęcia.
Ostatnia zakładka to mój profil, gdzie specjalista może przejrzeć dane, wprowadzone przez niego podczas rejestracji.
- Rejestracja oraz logowanie użytkownika.
- Nawigacja.
- Imienne powitanie użytkownika podczas zalogowania się.
- Sidebar.
- Dodanie karty zwierzęcia po uzupełnieniu formularza, a następnie możliwość ich przeglądania.
- Rezerwacja wizyty po uzupełnieniu formularza.
- Przeniesienie zarezerwowanych wizyt do kalendarza i możliwość ich przeglądania.
- Edycja danych.
- Dodanie oraz edycja opisu wizyty.
Nasz zespół zrealizował także responsywność stron.
Do tworzenia projektu został użyty Firebase. Jego funkcjonalność umożliwiła nam utworzenie bazy danych oraz uwierzytelnianie. Z kolei API platformy pozwoliło na przechowywanie danych w chmurze Firebase.
- Nasza aplikacja została wdrożona na Netlify.
- Biorąc pod uwagę fakt, iż nasza aplikacja jest implementowana przez kilku deweloperów, zdecydowaliśmy się na użycie biblioteki Prettier, służącej do formatowania kodu. Niniejsza biblioteka jest świetnym narzędziem, który wyłapuje błędy składni, automatycznie poprawia linie kodu według zdefiniowanej konfiguracji.
- JSX
- React
- Node.js
- Firebase
- Material UI
- Visual Studio Code
- Yarn
- Figma
- Trello
Aby uruchomić aplikację na lokalnej maszynie, wykonaj następujące kroki:
- Sklonuj repozytorium.
- Otwórz je w ulubionym edytorze.
- Zainstaluj zależności za pomocą komendy: yarn.
- Wystartuj serwer za pomocą komendy: yarn start
Aplikacja będzie dostępna pod adresem: http://localhost:3000/