Iokeep

What It Does

Iokeep is a full-stack note-taking app I've been building over 356 commits. Notes are organized into folders and notebooks, and everything flows through a Lexical rich-text editor. You write in the browser, your notes sync to the cloud, and they follow you across devices. There's a public landing page for visitors and an authenticated app for the actual note-taking.

The editor handles heading nodes (h1, h2, h3), bold/italic/underline formatting, and full undo/redo history. Auto-save kicks in after about a second of idle typing, so there's no save button to worry about.

Architecture

Frontend

The frontend is Next.js 15 on the App Router, organized into seven feature-based modules: NoteEditor, NoteManager, FolderManager, LoginForm, SignupForm, NavbarFeature, and ProfileManager. The Lexical editor runs four custom plugins: AutoSyncPlugin debounces changes and saves on idle, UpdateNoteDescription pulls the first two lines out as a preview, StatusBar shows the sync state, and ClearEditorOnDelete resets the editor after a note is removed. Data fetching uses SWR with optimistic mutations, so the note list updates instantly while the backend syncs in the background.

Auth

Auth is JWT with refresh-token rotation, wired through Next.js middleware. The /app/* routes are protected, and when an access token expires, the middleware refreshes it before the request goes through, so the user never sees a forced logout.

Backend

The backend is Express with TypeScript and MongoDB/Mongoose, and it mirrors the same structure: three feature modules (auth, notes, folders), each with model, service, controller, route, and types layers. A custom access-token middleware guards private endpoints, with a public-resource bypass for unauthenticated GET requests. Passwords are hashed with bcrypt, tokens are signed with HS256 and stored as cookies, and logout invalidates them. Configuration is environment-aware across dev, test, and prod.

The work split across two repos: 232 commits on the frontend at github.com/takam-alex-christian/iokeep-fe-v2 and 124 on the backend at github.com/takam-alex-christian/iokeep-be-v2.

What I Learned

• Auto-save on Lexical — Facebook's editor framework is powerful, but its plugin model demands a real understanding of the editor lifecycle. Nailing auto-save was the hardest part: debouncing input, separating real edits from initialization noise, and handling create and update paths differently.
• JWT refresh-token rotation — storing refresh tokens in the database, rotating them on logout, and refreshing access tokens transparently in Next.js middleware taught me how production-grade auth actually holds together.
• Feature-based architecture on both sides — keeping each feature self-contained with its own types, services, and components made the codebase navigable even past 350 commits.
• SWR's stale-while-revalidate — it was a perfect fit for the note list. The UI updates instantly while the data re-syncs in the background, with no spinners and no jank.