W tej sekcji znajdują się funkcjonalne prototypy aplikacji, które zostały stworzone w odpowiedzi na potrzeby wynikające z realizowanych zajęć. Każdy z nich odzwierciedla określone wymagania i programistyczne wyzwania.
GENERATOR LICZB LOSOWYCH
Narzędzie pozwala użytkownikowi na losowe generowanie liczb w określonym zakresie.
Funkcjonalność prototypu:
- aplikacja powinna generować losowe liczby w przedziale określonym przez użytkownika
- umożliwia wykluczanie duplikatów (jeśli opcja „bez duplikatów” jest zaznaczona)
- obsługuje błędne dane wejściowe (np. gdy wartość początkowa jest większa niż końcowa lub liczba losowań jest zbyt duża w stosunku do zakresu liczb)
Ulepszenia:
- możliwość kopiowania wyników do schowka
- obsługa generowania liczb zmiennoprzecinkowych, jeśli miałaby być taka potrzeba
- dodanie stylizacji i animacji dla lepszej czytelności
Przykładowa realizacja wykonana w React: build
GENERATOR KOLORÓW
Narzędzie umożliwia losowe wybieranie koloru oraz uzyskanie jego kodu w różnych formatach.
Funkcjonalność prototypu:
- prezentuje jego wartości w kodzie HEX
- prezentuje jego wartości w formacie RGB
Ulepszenia:
- historia wygenerowanych kolorów – pozwoliłaby użytkownikowi wrócić do wcześniej losowanych wartości
- generowanie palety kolorów zamiast jednego losowego koloru
- filtr kolorów – użytkownik mógłby ograniczyć losowanie np. do określonych tonacji (ciepłe/zimne kolory)
Przykładowa realizacja wykonana w React: build
TEST LICZB PIERWSZYCH
Narzędzie analizuje liczbę, podaje jej dzielniki i informuje użytkownika o jej właściwościach.
Funkcjonalność prototypu:
- aplikacja sprawdza, czy liczba ma tylko dwa dzielniki (1 i siebie samą)
- jeśli tak – zwraca komunikat, że liczba jest pierwsza
- jeśli nie – pokazuje pełną listę dzielników
- wynik jest prezentowany w przejrzysty sposób, co zwiększa czytelność
Ulepszenia:
- obsługa liczb ujemnych i zera – komunikaty informujące o ich statusie
- historia sprawdzonych liczb – lista ostatnio analizowanych wartości
Przykładowa realizacja wykonana w React: build
GENERATOR CSS BOX-SHADOW
Narzędzie przydatne dla programistów i projektantów stron www do łatwego dostosowywania efektu cienia dla elementów HTML.
Funkcjonalność prototypu:
- użytkownik dostosowuje parametry cienia za pomocą suwaków
- wybrany cień jest dynamicznie aktualizowany i wyświetlany w formacie CSS
- wygenerowany kod uwzględnia prefiksy -webkit- i -moz- dla kompatybilności z różnymi przeglądarkami
Ulepszenia:
- historia wygenerowanych stylów – użytkownik mógłby wrócić do wcześniej wygenerowanych efektów
- eksport ustawień w formie JSON lub pliku konfiguracyjnego CSS
Przykładowa realizacja wykonana w React: build
GRA „KAMIEŃ, PAPIER, NOŻYCE”
Prosta gra, w której użytkownik rywalizuje z komputerem. Gra opiera się na klasycznych zasadach:
- kamień pokonuje nożyce
- nożyce pokonują papier
- papier pokonuje kamień
Funkcjonalność prototypu:
- użytkownik wybiera jedną z trzech opcji: kamień, papier lub nożyce
- komputer losowo wybiera jedną z tych samych opcji
- wynik jest natychmiastowo obliczany i wyświetlany użytkownikowi
- gra informuje użytkownika o wyniku rundy: wygrana, przegrana lub remis
- możliwość rozpoczęcia nowej gry po zakończeniu rundy
Ulepszenia:
- możliwość grania do określonej liczby zwycięstw
- wskaźnik punktacji, aby śledzić wynik
- animacje, efekty dźwiękowe, motywy kolorystyczne
Przykładowa realizacja wykonana w React: build
APLIKACJA „TODO”
Prosta aplikacja do zarządzania listą zadań, w której użytkownik może dodawać, edytować, usuwać i oznaczać zadania jako ukończone. Powinna być responsywna, szybka i łatwa w użyciu.
Funkcjonalność prototypu:
- dodawanie zadań – użytkownik może dodać nowe zadanie, wpisując treść i naciskając „Dodaj”. Zadanie domyślnie oznaczone jako „nieukończone”
- usuwanie zadań – każde zadanie ma przycisk „Usuń”, aby je usunąć
- oznaczanie zadań jako ukończone – kliknięcie na zadanie oznacza je jako „ukończone” (np. przekreślenie tekstu)
- edycja zadań – możliwość edycji zadania po jego dodaniu
Ulepszenia:
- zachowywanie danych – dane powinny być przechowywane w localStorage lub na backendzie
- filtrowanie i sortowanie – filtry: „Wszystkie”, „Ukończone”, „Nieukończone” oraz możliwość sortowania według daty dodania lub ukończenia
Przykładowa realizacja wykonana w React: build
APLIKACJA „RZUT KOSTKĄ”
Prosta aplikacja umożliwiająca użytkownikowi wykonywanie wirtualnych rzutów sześcienną kostką K6. Wyniki rzutów są prezentowane w formie graficznych obrazków kostek, a ich suma jest automatycznie obliczana i wyświetlana
Funkcjonalność prototypu:
- użytkownik może wykonać rzut wybraną liczbą kostek (domyślnie 1)
- każdy rzut generuje losowe wartości od 1 do 6
- wyniki rzutów są wyświetlane jako obrazy odpowiadające wartościom kostek (np. 01.png, 02.png, …, 06.png)
Ulepszenia:
- dodanie historii rzutów
- tryb gry wieloosobowej (np. rzuty dla kilku graczy)
- dźwięki przy rzucaniu kostkami dla większej immersji
Przykładowa realizacja wykonana w React: build
APLIKACJA „USER MANAGEMENT”
Aplikacja zarządza danymi użytkowników i wyświetla prognozę pogody dla zdefiniowanego regionu.
Funkcjonalności prototypu:
- konto administratora posiada:
- możliwość dodawania (pola: imie, nazwisko, miasto, kraj, e-mail, hasło), edycji i usuwania użytkownika
- możliwość nadawania haseł dostępu użytkownikom
- generator haseł (wielkie litery A-Z, cyfry 0-9)
- konto użytkownika:
- dostępne po zalogowaniu się (login, hasło)
- wyświeta dane użytkownika
- wyświetla prognozę pogody dla zdefinowanego miasta
- dane użytkowników mogą być przechowywane w statycznym pliku JSON lub w dowolnie stworzonej usłudze REST API
Ulepszenia:
- wydruk do PDF wizytówki profilu użytkownika z prognozą pogody
- implementacja unit testów lub e2e