Zespół pracował w ramach 24 godzinnego hackathonu „Hack-a-troll”. Zachęcamy do odwiedzenia profili członków zespołu, w celu zapoznania się z ich portfolio.
Celem projektu było dostarczenie aplikacji mającej na celu zbieranie odczuć użytkowników na temat prawdopodobieństwa braku wiarygodności treści znajdujących się w artykułach i innych materiałach, zamieszczonych w Internecie. Aplikacja ma również za zadanie przeprowadzanie analizy danych, po czym tworzenie na ich podstawie szczegółowych statystyk, do których wgląd ma każdy użytkownik.
Na stronie głównej można znaleźć szczegółowe informacje dotyczące aplikacji. Po wejściu na stronę, użytkownikowi ukaże się grafika, hasło naszej aplikacji „Nie daj się dezinformacji”, instrukcja działania oraz dwa przyciski: „Sprawdź artykuł” (kliknięcie na niego spowoduje przeniesienie na stronę ankiety) oraz „Baza linków” (kliknięcie spowoduje przeniesienie na stronę ze zgłoszonymi linkami).
Poniżej użytkownik może zapoznać się z krótką częścią informacyjną dotyczącą fake newsów oraz ze statystykami. Stronę główną zwieńcza aktywny link umożliwiający komunikację użytkownika z twórcami aplikacji.
Po kliknięciu w przycisk „Sprawdź artykuł”, użytkownik zostaje przeniesiony na stronę ankiety. Składa się ona z kilku części.
Na tej stronie użytkownik wprowadza link artykułu bądź materiału zamieszczonego w Internecie, który chciałby sprawdzić. Poniżej znajdują się przyciski z kategoriami. Zadaniem użytkownika jest wybranie odpowiedniej / odpowiednich kategorii. Kliknięcie na jakąkolwiek z nich spowoduje dodanie zielonego obramowania. Niżej znajduje się przycisk „Rozpocznij ankietę”, który przenosi użytkownika na kolejną podstronę.
Tutaj użytkownik może zauważyć losowo wybrane pytania dotyczące artykułu. Poniżej znajdują się trzy przyciski: „TAK”, „NIE WIEM” oraz „NIE”. Użytkownik powinien odpowiedzieć na 10 pytań zgodnie ze swoimi odczuciami. Dodatkowo, na dole znajduje się pasek postępu, podpowiadający na ile pytań użytkownik udzielił już odpowiedzi, a na ile jeszcze nie.
Po udzieleniu odpowiedzi na wszystkie pytania, użytkownik zostaje przeniesiony na kolejną podstronę, na której musi wpisać swój adres mailowy. Jest to konieczne, aby zweryfikować czy użytkownik nie jest botem, a także czy użytkownik nie dodał wcześniej tego samego artykułu. Następnie zostaje przeniesiony na stronę informacyjną.
W przypadku, gdy użytkownik po raz pierwszy dodał dany artykuł oraz swoje odczucia na temat jego prawdopodobieństwa, wówczas wklejony przez niego link, odpowiedzi i wynik zostają zapisane do bazy, a jego oczom ukazuje się podziękowanie za zgłoszenie.
Jeśli jednak użytkownik dodał ten sam artykuł ponownie, wówczas zostaje o tym poinformowany. Niżej znajdują się dwa przyciski: „Dodaj inny artykuł” (kliknięcie spowoduje przeniesienie na pierwszą część strony ankiety) oraz „Podmień ankietę” (kliknięcie spowoduje zamianę wyniku ze starego na nowy).
Na niniejszej stronie użytkownik może przejrzeć dodane do bazy artykuły. U góry znajdują się pola „Szukaj” oraz „Sortuj”, z kolei nieco niżej – dodane przez użytkowników linki. Każdy link posiada kategorie oraz wynik, pokazujący prawdopodobieństwo autentyczności danego materiału. Im mniej zadowolona emoji, tym prawdopodobieństwo fejka jest wyższe.
Po kliknięciu na konkretny link, użytkownik zostaje przeniesiony na stronę statystyk, gdzie może się zapoznać ze szczegółową analizą dotyczącą samego artykułu, jak i witryny.
Na potrzeby aplikacji zostało stworzone własne API.
- 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.
- React
- Node.js
- Express.js
- MongoDB
- Joi
- Nodemailer
- Mongoose
- i18next
- Redux
- SCSS
- Visual Studio Code
- Yarn
- Figma
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/