Skip to content

feat: implement editor, auth, notes and writing session tracking#198

Open
CodesWithSubham wants to merge 6 commits into
vicharanashala:mainfrom
CodesWithSubham:feat/core-features
Open

feat: implement editor, auth, notes and writing session tracking#198
CodesWithSubham wants to merge 6 commits into
vicharanashala:mainfrom
CodesWithSubham:feat/core-features

Conversation

@CodesWithSubham
Copy link
Copy Markdown

@CodesWithSubham CodesWithSubham commented Apr 22, 2026

Overview

This PR completes Feature Requests (#1, #2, #3, #4, #5), introducing the core functionality of the application including the writing editor, authentication system, notes management and writing session tracking.

It establishes a full-stack foundation with a working backend (Express + MongoDB) and frontend (React + Lexical editor), along with telemetry collection for typing behavior.

Features Implemented

1. Basic Writing Editor (#1)

  • Introduced a clean and distraction-free writing editor

  • Built using Lexical with support for:

    • Rich text formatting
    • Autosave and content loading
    • Fullscreen editing

  • Added anti-distraction mode

    • Automatically resets when exiting fullscreen (ESC)

2. User Login and Registration (#2)

  • Implemented authentication system:

    • Email + password login/signup
    • Google OAuth (Continue with Google)

  • Backend with:

    • MongoDB adapter
    • Email verification, OTP and 2FA support

  • Added route protection and session handling

3. Capture Keystroke Timing (#3)

  • Implemented keystroke timing capture in editor

  • Records:

    • Time intervals between key events

  • Ensures:

    • No actual typed characters are stored
    • Only behavioral metadata is collected

4. Detect Pasted Text (#4)

  • Detects paste events inside the editor

  • Tracks:

    • When paste occurs
    • Size of pasted content

  • Helps distinguish typed vs pasted input

5. Save Writing Session Data (#5)

  • Introduced writing session tracking system

  • Stores:

    • Session metadata
    • Keystroke timings
    • Paste events

  • Links sessions to:

    • User
    • Note

Backend Highlights

Core Setup

  • Express-based backend (apps/backend)
  • Environment validation using Zod
  • MongoDB + Mongoose integration (VINotes DB)
  • Modular structure with scalable architecture

Authentication

  • better-auth integration with:

    • Email/password auth
    • Google OAuth
    • Session handling middleware

  • requireAuth middleware for protected routes

Notes & Writing Sessions

  • Mongoose models:

    • Note
    • WritingSession

  • API routes:

    • Notes (CRUD, search, pagination, favorites)
    • Writing sessions (create, patch, ping)

  • Zod-based request validation

Background Services

  • Stale session sweeper:
    • Automatically ends inactive sessions
    • Runs on server start/stop lifecycle

Middleware

  • CORS handling
  • Rate limiting
  • Centralized error handling

Frontend Highlights

Editor & Notes

  • Lexical-based editor with plugins

  • WritingSessionPlugin:

    • Captures keystrokes & paste events

  • Dashboard:

    • Notes listing (search, sort, pagination, favorites)

  • Pages:

    • EditNote
    • Dashboard

Authentication UI

  • Login/Register screens
  • Google OAuth integration
  • Route guards for protected pages

UI & UX

  • Components:

    • Navbar, Sidebar, NoteCard, ProfilePicture

  • Providers:

    • Theme
    • Toast notifications

  • Improved UX:

    • Loading states
    • Error boundaries

Workspace & Tooling

  • Monorepo setup with:

    • pnpm workspaces
    • turbo.json for orchestration

  • Shared ESLint config

  • Environment validation across frontend & backend

Notes

  • Initial implementation focuses on data collection and storage
  • No advanced analysis on typing behavior yet
  • System is designed to be extensible for future features

Summary

This PR delivers a complete, working system that:

  • Enables authenticated writing
  • Stores notes and sessions
  • Captures typing behavior safely
  • Provides a scalable backend + frontend architecture

Closes: #1, #2, #3, #4, #5

@CodesWithSubham
feat: initialize monorepo with frontend and backend setup
85957dd 
- add apps/frontend (React + Vite + Tailwind setup)
  - basic App component, index.html, Vite config
  - TypeScript configs and public assets

- add apps/backend (Express + TypeScript template)
  - tsconfig, tsup config, dev/start scripts

- introduce shared ESLint config package (@repo/eslint-config)
  - base, node, and vite presets

- configure workspace
  - root package.json
  - pnpm-workspace.yaml
  - turbo.json for task orchestration

- add project-level configs
  - .gitignore and .npmrc

Signed-off-by: Subham Duary <subhamduary11@gmail.com>
@CodesWithSubham
feat(auth): implement login, registration, Google OAuth and dashboard
4342323 
- implement user login and registration (email + password)
  - associate writing sessions with authenticated users
  - basic auth flow without advanced features

- add "Continue with Google" OAuth authentication

- backend: add authentication system
  - integrate better-auth with MongoDB adapter
  - add email/OTP/2FA/admin plugins
  - configure SMTP mailer (sendMail)
  - add env validation using zod
  - setup reusable Mongo client
  - add CORS, rate limiting, and error middlewares
  - add base routes and health check
  - update tsup config (mark better-auth as external)

- frontend: add auth UI, routing, and demo dashboard
  - integrate better-auth client
  - implement route guards and social login
  - setup React Router navigation
  - add UI components (Navbar, Sidebar, ProfilePicture, Loading, ErrorBoundary)
  - add Theme and Toast providers
  - add zod schemas for sign-in/sign-up
  - add environment validation
  - add dashboard with sample notes data

- workspace:
  - add packages/auth for shared access control
  - update dependencies across frontend and backend

Signed-off-by: Subham Duary <subhamduary11@gmail.com>
@CodesWithSubham
feat(notes): implement writing editor, notes API, and dashboard integ…
3d6b34a 
…ration

- add basic writing editor for distraction-free text input
  - integrate Lexical-based rich editor with formatting support
  - add anti-distraction mode and fullscreen editing
  - implement autosave and content loading

- backend: implement notes system
  - add MongoDB connection helper (connectToDatabase) and initialize DB (VINotes)
  - create Mongoose Note model with types
  - add auth middleware and requireAuth for protected routes
  - implement notes API:
    - list notes (search, sort, pagination, favorites)
    - create note
    - fetch single note
    - update note (Zod validation)
    - toggle favorite
  - add request validation utility (Zod-based)
  - extend Express types to include session/user
  - export Session type and configure tsconfig path aliases

- frontend: integrate notes UI and dashboard
  - add editor components (Editor, Toolbar, Titlebar, plugins)
  - create EditNote page and CreateNewNoteButton
  - update Dashboard:
    - fetch notes from API
    - implement search, sort, pagination, favorites
  - add Sidebar integration and NoteCard UI
  - add hooks (useDebounce, useNoteEditor)
  - add apiFetch utility and note types
  - improve UX with loading states and toasts
  - update routing to include edit note page

- misc:
  - remove unused icons.svg
  - clean up imports and dependencies

Signed-off-by: Subham Duary <subhamduary11@gmail.com>
@CodesWithSubham
feat(writing-sessions): add session tracking, keystroke timing, and p…
d79250e 
…aste detection

- implement writing session data storage
  - store session content metadata linked to user and note
  - enable basic session retrieval without analysis

- capture keystroke timing
  - record time intervals between key events (press/release)
  - ensure no actual typed characters are stored

- detect pasted text events
  - track paste occurrences in editor
  - record size of pasted content for analysis

- backend: add writing session system
  - create WritingSession Mongoose model and Zod schema
  - add routes under /api/notes/:noteId/writing-sessions:
    - create session
    - update session (patch/ping)
  - implement stale session sweeper service
    - auto-close inactive sessions
    - start on server boot, stop on shutdown
  - add DATABASE_NAME env (default: "ViNotes") and integrate with mongoose
  - increase express.json body size limit
  - mount writing-sessions router under notes

- frontend: integrate writing session tracking
  - implement WritingSessionPlugin for editor
    - capture keystroke timings and paste events
  - register plugin in Lexical editor
  - ensure editor remount using key in EditNote
  - apply minor UI and StrictMode adjustments
@CodesWithSubham
fix(editor): handle anti-distraction state on fullscreen exit and imp…
4c77d9e 
…rove stability

- fix anti-distraction state sync
  - reset antiDistraction when user exits fullscreen by taping ESC
  - prevent inconsistent UI state

- refactor Toolbar state handling
  - lift antiDistraction state to parent
  - remove local state from Toolbar
  - control fullscreen toggle via parent state

- fix WritingSessionPlugin stability
  - guard root/prevRoot listener attach & cleanup with optional chaining
  - prevent runtime errors when roots are null/undefined

- fix path resolution issues
  - update tsconfig (frontend & backend) to use "./src/*" aliases
  - remove baseUrl for consistent module resolution

- update turbo configuration
  - add DATABASE_NAME to environment variables

Signed-off-by: Subham Duary <subhamduary11@gmail.com>
Copilot AI review requested due to automatic review settings April 22, 2026 18:43
Copilot AI reviewed Apr 22, 2026
View reviewed changes
Copy link
Copy Markdown

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR establishes the initial full-stack foundation for Vi Notes: a React (Vite) frontend with a Lexical-based editor and session telemetry, and an Express + MongoDB backend with Better Auth, notes CRUD, and writing-session tracking.

Changes:

  • Set up monorepo tooling (pnpm workspaces, Turborepo tasks, shared ESLint config, shared auth package).
  • Implement frontend app shell + auth UI + notes dashboard + Lexical editor with autosave and writing-session telemetry capture.
  • Implement backend API for auth, notes CRUD/search/favorites, writing-session create/patch/ping, and stale-session sweeping.

Reviewed changes

Copilot reviewed 94 out of 101 changed files in this pull request and generated 22 comments.

Show a summary per file
File Description
turbo.json Adds Turborepo task definitions and env passthrough for builds.
pnpm-workspace.yaml Declares workspace package globs and build-only deps.
packages/eslint-config/vite.mjs Adds shared flat ESLint config for Vite/React projects.
packages/eslint-config/vite.d.ts Type declarations for the Vite ESLint config export.
packages/eslint-config/package.json Exposes base/node/vite ESLint configs via package exports.
packages/eslint-config/node.mjs Adds shared flat ESLint config for Node projects.
packages/eslint-config/node.d.ts Type declarations for the Node ESLint config export.
packages/eslint-config/base.mjs Defines shared JS/TS lint rules for the monorepo.
packages/eslint-config/base.d.ts Type declarations for the base ESLint config export.
packages/auth/tsconfig.json TS build config for shared auth/access-control package.
packages/auth/src/index.ts Re-exports auth access-control utilities.
packages/auth/src/access-control.ts Defines Better Auth access-control roles/statements.
packages/auth/package.json Declares shared auth package build outputs/exports.
package.json Root scripts and shared dependencies for the monorepo.
apps/frontend/vite.config.ts Vite config for the React frontend build/dev.
apps/frontend/tsconfig.node.json TS config for Vite config/build tooling.
apps/frontend/tsconfig.json TS project references for app + node configs.
apps/frontend/tsconfig.app.json TS config for the frontend application code.
apps/frontend/src/utils/resolveCallbackURL.ts Sanitizes callback URLs to prevent open redirects.
apps/frontend/src/utils/formatRelativeTime.ts Adds relative-time formatting helper for UI.
apps/frontend/src/utils/cn.ts Tailwind/clsx class merging helper.
apps/frontend/src/utils/CopyToClipboard.ts Clipboard helper with toast notifications and fallback.
apps/frontend/src/ui/ToolbarButton.tsx Shared toolbar button with hover tooltip.
apps/frontend/src/ui/NoteCard.tsx Note list card with favorite toggle UI.
apps/frontend/src/ui/NavIcon.tsx Icon button with optional tooltip and SR text.
apps/frontend/src/ui/Loading.tsx Loading overlay + navigation progress indicator.
apps/frontend/src/ui/Input.tsx Input and password input components.
apps/frontend/src/ui/Button.tsx Button + link-button components for UI consistency.
apps/frontend/src/types/theme.ts Theme context and theme type definitions.
apps/frontend/src/types/notes.ts Frontend note type contract.
apps/frontend/src/styles/index.css Tailwind v4 theme variables + global base styles.
apps/frontend/src/schemas/auth/signupSchema.ts Zod schema for signup form validation.
apps/frontend/src/schemas/auth/signInSchema.ts Zod schema for sign-in form validation.
apps/frontend/src/provider/ToastProvider.tsx React Toastify container setup with theme integration.
apps/frontend/src/provider/ThemeProvider.tsx Theme persistence + dark-mode class toggling.
apps/frontend/src/provider/ThemeContext.ts React context for theme state.
apps/frontend/src/lib/apiFetch.ts Typed fetch wrapper for backend API calls.
apps/frontend/src/layouts/RootLayout.tsx Layout with navbar/sidebar and route transition UI.
apps/frontend/src/hooks/useTheme.ts Hook wrapper for ThemeContext usage.
apps/frontend/src/hooks/useNoteEditor.ts Loads a note for the editor page and handles errors.
apps/frontend/src/hooks/useDebounce.ts Generic debounce hook for search/sorting.
apps/frontend/src/features/editor/plugins/WritingSessionPlugin.tsx Captures keystroke timing + paste telemetry; syncs to backend.
apps/frontend/src/features/editor/plugins/ContentLoaderPlugin.tsx Loads stored Lexical editor state into the editor.
apps/frontend/src/features/editor/plugins/AutoSavePlugin.tsx Debounced autosave of editor title/content/word count.
apps/frontend/src/features/editor/Toolbar.tsx Rich-text editor toolbar (formatting, lists, fullscreen, anti-distraction).
apps/frontend/src/features/editor/Titlebar.tsx Title input + save/unsaved status indicators.
apps/frontend/src/features/editor/Editor.tsx Lexical editor composition and plugin wiring.
apps/frontend/src/env.ts Zod-based frontend env validation.
apps/frontend/src/components/Sidebar.tsx Sidebar navigation and sign-out controls.
apps/frontend/src/components/ProfilePicture.tsx Renders user avatar or initial fallback.
apps/frontend/src/components/Navbar.tsx Navbar with theme toggle, auth CTAs, profile entry point.
apps/frontend/src/components/Footer.tsx Landing/footer component.
apps/frontend/src/components/ErrorBoundary.tsx React Router route-level error boundary component.
apps/frontend/src/components/CreateNewNoteButton.tsx Creates a new note and navigates to editor.
apps/frontend/src/components/AuthAgreeAndSubmitButton.tsx Shared submit + terms/privacy acknowledgment UI.
apps/frontend/src/auth/index.ts Better Auth React client configuration + exports.
apps/frontend/src/auth/SocialLogin.tsx Google social login trigger.
apps/frontend/src/auth/AuthRouteGuards.tsx Protected route wrapper enforcing session presence.
apps/frontend/src/app/pages/SignUp.tsx Signup page with Zod validation and auth integration.
apps/frontend/src/app/pages/SignIn.tsx Sign-in page with validation, social login, and error handling.
apps/frontend/src/app/pages/Profile.tsx Profile page showing user details.
apps/frontend/src/app/pages/Landing.tsx Landing page marketing + CTA routing.
apps/frontend/src/app/pages/EditNote.tsx Note editor page shell wiring note loading to editor.
apps/frontend/src/app/pages/Dashboard.tsx Notes list with search/sort/pagination and favorite toggling.
apps/frontend/src/app/main.tsx App entrypoint wiring providers + router render.
apps/frontend/src/app/App.tsx Router definitions and protected routes.
apps/frontend/public/favicon.svg Adds application favicon asset.
apps/frontend/package.json Frontend dependencies/scripts (React, Lexical, Tailwind, auth client).
apps/frontend/index.html Vite HTML entry with root mounting point.
apps/frontend/eslint.config.mjs Frontend ESLint config referencing shared config + TS projects.
apps/frontend/.env.example Frontend env example.
apps/backend/tsup.config.ts Backend build configuration for tsup.
apps/backend/tsconfig.json Backend TypeScript configuration + path aliases.
apps/backend/src/utils/validateRequest.ts Zod request-body validation middleware helper.
apps/backend/src/types/express.d.ts Augments Express Request with user/session fields.
apps/backend/src/services/writingSession.staleSweep.ts Background sweeper to end stale active writing sessions.
apps/backend/src/schemas/WritingSessionSchema.ts Zod schema for writing-session upsert payloads.
apps/backend/src/schemas/UpdateNotesSchema.ts Zod schema for note updates.
apps/backend/src/routes/writingSessions.routes.ts Endpoints for writing-session create/patch/ping under a note.
apps/backend/src/routes/notes.routes.ts Notes CRUD/search/pagination/favorites + mount sessions subrouter.
apps/backend/src/routes/index.ts Registers health route, protected API routes, and 404 handler.
apps/backend/src/models/writingSession.model.ts Mongoose model for writing sessions + indexes.
apps/backend/src/models/note.model.ts Mongoose model for notes.
apps/backend/src/middleware/requireAuth.middleware.ts Protects API routes by requiring req.user.
apps/backend/src/middleware/rateLimit.middleware.ts Applies rate limiting to non-auth routes.
apps/backend/src/middleware/error.middleware.ts Centralized error handler with prod/dev message behavior.
apps/backend/src/middleware/cors.middleware.ts Configures CORS for frontend/backend origins + credentials.
apps/backend/src/middleware/auth.middleware.ts Attaches Better Auth session/user to requests.
apps/backend/src/lib/sendMail.ts Nodemailer wrapper for email sending and error mapping.
apps/backend/src/lib/mongoose.ts Mongoose connection singleton with global caching.
apps/backend/src/lib/mongodb.ts MongoClient singleton helper for Better Auth adapter usage.
apps/backend/src/lib/getLocalIP.ts Helper to display network URL on server start.
apps/backend/src/index.ts Express server bootstrap: DB connect, auth routes, middlewares, APIs, sweeper lifecycle.
apps/backend/src/env.ts Zod-based backend env validation.
apps/backend/src/auth.ts Better Auth server configuration (email/password, Google, verification, OTP, admin).
apps/backend/package.json Backend dependencies/scripts (Express, Mongo, Mongoose, auth).
apps/backend/eslint.config.mjs Backend ESLint config referencing shared config + TS project.
apps/backend/.env.example Backend env example file for local setup.
.npmrc Enables peer auto-install behavior for pnpm/npm.
.gitignore Adds standard ignores for node, build outputs, env files, IDE artifacts.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread apps/backend/src/routes/notes.routes.ts
Comment thread apps/frontend/src/hooks/useNoteEditor.ts
Comment thread apps/frontend/src/components/Sidebar.tsx
Comment thread apps/frontend/src/ui/Loading.tsx
Comment thread apps/frontend/src/ui/ToolbarButton.tsx
Comment thread apps/frontend/src/app/pages/EditNote.tsx
Comment thread apps/frontend/src/auth/AuthRouteGuards.tsx Outdated
Comment thread apps/frontend/src/components/Sidebar.tsx
Comment thread apps/frontend/src/ui/NavIcon.tsx
Comment thread apps/frontend/src/components/AuthAgreeAndSubmitButton.tsx
@CodesWithSubham
fix: improve backend validation, auth consistency, and frontend UX
6289c5f 
- backend:
  - enforce stronger BETTER_AUTH_SECRET in env example
  - set betterAuth appName to "Vi Notes"
  - include note.createdAt in note GET response
  - add validation for sessionId in writing session PATCH endpoint

- frontend:
  - handle missing note in EditNote UI ("Note not found")
  - update auth redirect from "/login" to "/signin" for consistency
    - apply in ProtectedRoute and useNoteEditor
  - fix wording in AuthAgreeAndSubmitButton
  - update Navbar ProfileIcon navigation
    - replace Link wrapper with useNavigate and onClick handler

- improve overall consistency, validation, and UX across app

Signed-off-by: Subham Duary <subhamduary11@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Feature Request: Basic Writing Editor

2 participants

@CodesWithSubham