CodersCamp 2021 - Fullstack Project

CodersCamp (https://www.coderscamp.edu.pl/) - Największy otwarty kurs programowania webowego

Good Boi App

Rewolucyjna aplikacja, zmieniająca oblicze świata polskiego obedience.

Zainspirowana potrzebami i oparta na konsultacjach społecznych aplikacja całościowo rozwiązująca kwestię cyfryzacji tej dyscypliny sportowej, umożliwiająca integrację potrzeb organizatorów, sędziów i zawodników. Nie wiesz co to obedience? https://johndog.pl/blog/zyciezpsem/obi-ogole-znaczy/

Zawartość

• Przegląd
  • Funkcjonalności
  • Linki
• Proces tworzenia
  • Zbudowane z
  • W przyszłości
• Autorzy
• Podziękowania
• Screeny

Przegląd

Funkcjonalności

• Uzupełnianie kart ocen w aplikacji mobilnej
• Rejestracja dla zawodników i możliwość dodawania posiadanych psów
• Zgłoszenia na zawody bez konieczności żmudnego wpisywania tych samych danych - wystarczy kilka kliknięć
• Profil użytkownika
• Dostęp do wyników zawodów archiwalnych z całej Polski
• Light & Dark mode

Linki

• Demo
• Design
• Wiki

Proces

Zbudowane z użyciem

Zapraszamy do odnalezienia easter egg ukrytego w naszej apce :)

FRONTEND

• React
• Styled Components
• Vercel
• Figma
• React Router
• Mobile first
• Atomic Design
• By nasz kod był lepszej jakości, bardziej uporządkowany i czytelniejszy, używaliśmy eslint, prettier, stylelint
• Wiadomość z formularza kontaktowego pojawi się na mailu dzięki emailJS
• Testowaliśmy aplikację przy użyciu RTL oraz Jest
• Ikonki wstawiliśmy dzięki Font Awesome oraz React Icons
• Pomocne okazały się również wtyczki do VSC- sort-imports oraz 'px to rem'
• Kontrola nad propsami- propTypes
• React hook form - do obłsugi formularzy

BACKEND

• node
• nodemon :pomogło nam w automatycznym odświeżaniu danych przy pracy na backendzie
• base64url
• cookie-parser: do analizy plików cookie
• dotenv: do zarządzania zmiennymi środowiskowymi
• express: usprawniał pracę i rozszerzał funkcjonalności node
• helmet: pomógł zabezpieczyć aplikację
• jsonwebtoken: wsparł nas w autoryzacji i autentykacji
• mongoose: tworzenie schematów w mongoDB
• mongoDB: nierelacyjna baza danych
• passport: autoryzacja
• swagger: automatyczna dokumentacja api

W przyszłości

• Drukowanie raportów i protokołów
• Galeria zdjęć z zawodów
• Anglojęzyczna wersja językowa
• Wstawianie zdjęcia przez użytkownika
• Logowanie przez gmail i facebook

Autorzy

• Katarzyna Chmielecka
• Alicja Kondrat UI/UX Designer, Product Owner
• Monika Krella Tech Leader
• Tomasz Skrętkowski Development Manager
• Adam Smycz Tech Leader
• Robert Soldynski

Podziękowania

Chcieliśmy serdecznie podziękować naszej mentorce Weronika Boszko Lucena za cierpliwość i wsparcie ♥

Screeny