OpeNotes — notatnik z logowaniem przez Google

01Wygląd aplikacji

Estetyka Google Keep — żółty header (#F5BA13), białe karty notatek na szachownicowym tle, Montserrat jako font, logo z ikoną żarówki (MUI TungstenIcon). Cztery oddzielne widoki połączone w SPA przez React Router.

strona główna — widok dla niezalogowanych (/)

ekran logowania — email/hasło + Google OAuth (/login)

panel notatek — formularz create + karty z edycją i usuwaniem (/notebook)

dialog edycji — MUI Dialog z TextField fullWidth (/notebook)

02Funkcjonalności

• Rejestracja — walidacja frontendowa (email format, min. 6 znaków, zgodność haseł) + walidacja po stronie serwera + bcrypt hash z 10 rundami soli. Po rejestracji auto-login przez req.login().
• Logowanie e-mailem — Passport Local Strategy, bcrypt.compare(), sesja serwerowa httpOnly. Rate limiter: max 3 próby / 15 minut (kody HTTP 429).
• Logowanie Google — OAuth 2.0 przez passport-google-oauth2. Jeśli e-mail istnieje — logowanie, jeśli nie — automatyczna rejestracja.
• CRUD notatek — dodawanie, wyświetlanie, edycja przez MUI Dialog, usuwanie. Optimistic UI update przy dodawaniu i usuwaniu (brak reload strony), pełny reload po edycji.
• Persystencja sesji — GET /api/check-session wywoływany przy starcie App, przywraca stan zalogowania po odświeżeniu strony.
• Ochrona routów — React Router z Navigate: zalogowany → przekierowanie z /login na /notebook; niezalogowany → z /notebook na /login.

03Architektura — SPA + REST API

Klasyczna architektura rozdzielonego frontendu i backendu. React SPA (port 5173) komunikuje się z Express REST API (port 3000) przez Axios z withCredentials: true — to kluczowe dla sesyjnych cookies w środowisku cross-origin.

React SPA (Vite :5173)           Express API (:3000)          PostgreSQL
        │                               │                              │
        │ axios.get('/api/check-session')│                              │
        │ withCredentials: true ────────▶│                              │
        │                               │ req.isAuthenticated()         │
        │◀─────────────── {loggedIn: true, user} ──────────────────────│
        │                               │                              │
        │ axios.get('/api/shownotes') ──▶│ SELECT FROM notes            │
        │                               │ WHERE userid = $1 ───────────▶│
        │◀─────────────── {data: [...notes]} ◀─────────────────────────│
        │                               │                              │
        │ axios.post('/api/postnote') ──▶│ INSERT INTO notes            │
        │                               │ VALUES (...) ────────────────▶│
        │◀─────────────── 201 Created ◀─────────────────────────────────│

04Autentykacja — Passport + sesje + OAuth

Trzy ścieżki autentykacji obsługiwane przez Passport.js w jednym pliku backendowym.

// Sesja httpOnly — niedostępna dla JavaScript w przeglądarce
app.use(session({
  secret: process.env.SESSION_SECRET,
  cookie: {
    httpOnly: true,
    sameSite: "lax",
    maxAge: 60 * 60 * 1000   // 1 godzina
  }
}));

// Rate limiter: blokada po 3 nieudanych próbach / 15 minut
const loginLimiter = rateLimit({
  windowMs: 15 * 60 * 1000,
  max: 3,
  message: { message: "Too many login attempts. Try again later." }
});

// Google OAuth — auto-rejestracja jeśli email nie istnieje w bazie
const result = await db.query("SELECT * FROM users WHERE email = $1", [profile.email]);
if (result.rows.length === 0) {
  const newUser = await db.query(
    "INSERT INTO users (email, password) VALUES ($1, $2) RETURNING *",
    [profile.email, "google"]  // placeholder hasła dla kont OAuth
  );
  return done(null, newUser.rows[0]);
}

05Architektura React

Aplikacja zbudowana jako SPA z 8 komponentami funkcyjnymi. Stan zalogowanego użytkownika (user) przechowywany w App.jsx i przekazywany propami do komponentów. Hooki useState + useEffect do lokalnego stanu i efektów ubocznych.

• CreateArea — rozwijany formularz (collapsed → expanded) z animacją MUI Zoom. Pole tytułu pojawia się dopiero po kliknięciu textarea. Floating Action Button z ikoną + do zapisu.
• Note — karta z przyciskami MUI DeleteIcon i ModeEditIcon. Kliknięcie edycji ustawia isEditing: true, co otwiera dialog.
• NoteEditorDialog — MUI Dialog fullWidth z TextField dla tytułu (single line) i treści (multiline 4 rows). Lokalny stan title/content synchronizowany z propsami przez useEffect([open, note]).
• Notebook — pobiera notatki przez Axios przy useEffect([], []) (raz po mount). Optimistic update: po dodaniu notatki setUserNotes(prev => [...prev, newNote]) bez dodatkowego fetcha.

// CreateArea — expand on click, Zoom animation on FAB
function CreateArea(props) {
  const [isExpanded, setExpanded] = useState(false);

  return (
    <form className="create-note">
      {isExpanded && <input name="title" placeholder="Title" />}  {/* pojawia się po kliknięciu */}
      <textarea
        onClick={() => setExpanded(true)}   {/* kliknięcie → expand */}
        rows={isExpanded ? 3 : 1}
        placeholder="Take a note..."
      />
      <Zoom in={isExpanded}>           {/* FAB pojawia się z animacją */}
        <Fab onClick={submitNote}><AddIcon /></Fab>
      </Zoom>
    </form>
  );
}

06REST API — endpointy

07Stack technologiczny

08Czego dowodzi ten projekt