ToDo List

ToDo List

react / styled-components / express / mongoose / mongodb

ToDo List, to prosty projekt aplikacji internetowej napisany w ramach projektu zaliczeniowego na studia. Głównym założeniem była prostota w użytkowaniu oraz chęć wyłamania się ze schematów i stworzenie produktu banalnego różniącego się jednak od obecnych w Internecie podobnych aplikacji. Roboczo nazwany "ToDo List" posiada prosty system autentykacji i autoryzacji użytkowników. Rejestracja jak i logowanie to podanie adresu email-owego oraz odpowiedniego hasła, zaś dostęp przyznawany jest na podstawie tokenu ustawianego w ciasteczku na okres 24 godzin. W przypadku wejścia na stronę z formularzem logowania bądź bezpośrednio na panel zadań, użytkownik korzysta z komponentu nadrzędnego, który wykonuje odpowiednie zapytanie sprawdzające czy token zawarty w ciasteczku jest aktualny i przypisany do użytkownika. Jeżeli jakakolwiek odpowiedź na powyższe pytania jest fałszywa, to zwracany jest błąd, a użytkownik przekierowywany na stronę z logowaniem. W innym przypadku autoryzacja kończy się powodzeniem i użytkownik może zacząć zarządzać swoją listą zadań.

Główną funkcjonalnością, poza możliwością tworzenia kont i oparcie sesji o token zapisany w ciasteczku, jest opcja tworzenia i modyfikowania zadań, które powstały w ramach listy. Dostępne są podstawowe operacje jak tworzenie, modyfikacja oraz usuwanie. Dodatkowo tworzone zadania mogą występować w ramach kilku kategorii, co pozwala na sprawne grupowanie w celu filtrowania konkretnych zadań. Aplikacja nie posiada żadnego centralnego konta w postaci administratora, ani głównego panelu zarządzania. Zaś całe bezpieczeństwo opiera się o metody walidacji, które mają za zadanie zabezpieczyć bazę danych, a co za tym idzie informacje, które otrzymuje również użytkownik.

Aplikacja została stworzona w oparciu o ReactJS bez użycia TypeScripta. Za nadanie wyglądu przez odpowiednie style odpowiada Styled-Components w którym szybko i bezproblemowo ustawione zostały zarówno style globalne jak i dla każdego, pojedynczego komponentu. Natomiast część Front-End-ową zamyka biblioteka do nawigacji React-Router. W przypadku Back-End-u postawione zostało na sprawdzony framework do tworzenia aplikacji internetowych dla NodeJS o nazwie ExpressJS razem z Mongoose. Bazą danych oczywiście jest MongoDB dostarczana zewnętrznie.

Zobacz projekt na stronie Github.com