MyNotesik to responsywna aplikacja webowa typu SPA (Single Page Application), która redefiniuje tradycyjne podejście do robienia notatek. Dzięki integracji z modelem Gemini AI, każda notatka staje się punktem wyjścia do interaktywnej sesji coachingowej lub analizy merytorycznej.

🌟 Wybrane Funkcje Frontendowe

• Interaktywny Asystent AI (Context-Aware): Unikalny chatbot zintegrowany z każdą notatką. AI analizuje treść konkretnego wpisu, pełniąc rolę „osobistego coacha” – pomaga rozwiązywać problemy, streszczać myśli lub generować nowe pomysły w oparciu o kontekst.
• Dynamiczny User Experience: Zastosowanie biblioteki Material UI oraz animacji Zoom/Fab zapewnia płynne i nowoczesne wrażenia z użytkowania (np. automatycznie rozwijany obszar tworzenia notatek).
• Kompleksowy System Zarządzania Kontem: W pełni funkcjonalny panel użytkownika pozwalający na bezpieczną zmianę hasła oraz dwuetapowe usuwanie konta (zabezpieczenie typu hard-confirmation).
• Intuicyjny CRUD: Błyskawiczne dodawanie, edytowanie (inline editing) i usuwanie notatek z natychmiastowym odświeżeniem stanu aplikacji (State Management).

---

🛠️ Architektura i Technologie

Aplikacja została zbudowana z wykorzystaniem najnowszych standardów ekosystemu React.

Technologia	Rola w projekcie
React 18	Wykorzystanie Hooków (useState, useEffect, useRef) do zarządzania logiką.
Vite	Wykorzystanie nowoczesnego build-toola dla błyskawicznego Hot Module Replacement (HMR).
React Context API	Globalne zarządzanie stanem autoryzacji (AuthContext) i danymi użytkownika.
Material UI (MUI)	System komponentów i ikon zapewniający spójny, profesjonalny design.
Axios / Fetch API	Komunikacja z autorskim API oraz bezpośrednia integracja z Google Gemini API.
React Router	Zarządzanie nawigacją i strukturą adresów URL.

---

🧠 Zaawansowane Rozwiązania Techniczne

1. Integracja AI (Gemini 2.0 Flash)

Zaimplementowałem bezpośrednią komunikację z modelem Gemini, przesyłając dynamicznie generowany System Prompt. Dzięki temu asystent „wie”, o czym jest notatka, zanim użytkownik zada pierwsze pytanie.

2. Bezpieczeństwo i Optymalizacja

• Proxy Configuration: Skonfigurowałem Vite Proxy, aby uniknąć problemów z CORS podczas komunikacji z backendem w środowisku deweloperskim.
• Zabezpieczone Trasy: Zastosowanie wzorca Conditional Rendering w komponencie App.jsx, który automatycznie przekierowuje nieautoryzowanych użytkowników do formularza logowania.
• Płynny UI: Autorski system Auto-scroll w chatbocie, wykorzystujący useRef, aby zawsze wyświetlać najnowsze odpowiedzi od AI.

3. UX Writing & Error Handling

Aplikacja posiada rozbudowaną logikę obsługi błędów (np. fallback dla AI w przypadku braku połączenia) oraz czytelne komunikaty sukcesu (np. po zmianie hasła czy rejestracji).