Aplikacja notatek z logowaniem
Prototyp aplikacji NoteHub z logowaniem, chronionymi trasami i panelem notatek.
RolaFrontend development i integracja logiki auth
TypAplikacja notesowa z autoryzacją
LokalizacjaProjekt kursowy
ZakresImplementacja logowania, ochrony tras, dashboardu notatek i operacji filtrowania.
StackNext.js, TypeScript, CSS, Auth, Middleware, API
Czas realizacji1 tydz.
Podsumowanie projektu
- Typ projektu
- Aplikacja notesowa z autoryzacją
- Cel
- Zbudować aplikację z logowaniem, ochroną tras i panelem do przeglądania oraz tworzenia notatek.
- Główne funkcje
- Logowanie i rejestracja
- Chronione trasy
- Profil użytkownika
- Lista notatek
- Filtrowanie kategorii
- Wyszukiwanie
- Tworzenie notatki
- Moja rola
- Frontend development i integracja logiki auth
- Stack
- Next.js
- TypeScript
- CSS
- Auth
- Middleware
- API
- Rezultat
- Działający prototyp aplikacji notesowej z podstawową autoryzacją, filtrowaniem i zarządzaniem notatkami.
Problem
Aplikacja z notatkami potrzebuje nie tylko listy wpisów, ale też bezpiecznego dostępu, podstawowej nawigacji po danych i szybkiego sposobu odnalezienia potrzebnych informacji.
Rozwiązanie
Projekt łączy logowanie, rejestrację, chronione widoki, profil użytkownika, listę notatek, filtrowanie według kategorii, wyszukiwanie i formularz tworzenia nowej notatki.
Efekt
Powstał prototyp aplikacji, który pokazuje pełny flow od wejścia na stronę, przez autoryzację, po pracę z notatkami w panelu użytkownika.
Co zrobiłem
- Zaimplementowałem logowanie, rejestrację i obsługę stanu użytkownika
- Wdrożyłem ochronę tras oraz logikę przekierowań w aplikacji
- Przygotowałem dashboard notatek i nawigację po widokach
- Dodałem filtrowanie kategorii i wyszukiwanie notatek
- Zaimplementowałem formularz tworzenia nowej notatki
- Zintegrowałem frontend z middleware i API aplikacji
Ekran startowy
Strona powitalna z krótkim opisem aplikacji NoteHub.
Logowanie
Formularz wejścia do aplikacji dla istniejącego użytkownika.
Rejestracja
Formularz utworzenia nowego konta użytkownika.
Profil użytkownika
Chroniona strona profilu z danymi zalogowanego użytkownika.
Panel notatek
Lista notatek z kategoriami, paginacją i akcją tworzenia nowego wpisu.
Filtrowanie kategorii
Widok notatek zawężony do wybranej kategorii.
Wyszukiwanie
Filtrowanie notatek po wpisanej frazie w polu wyszukiwania.
Tworzenie notatki
Formularz dodawania nowej notatki z tytułem, treścią i tagiem.
Potrzebujesz strony, która ułatwia klientom kontakt?
Przygotuję przejrzystą stronę z prostą ścieżką do zapytania, rezerwacji albo rozmowy.