NotesVault Refactoring 2026

[adityai0]

Refactoring Task

[github-actions]

👋 Thanks for opening this issue! We'll look into it as soon as possible, estimated time for response is 18–24 hrs.
If your issue goes stale beyond this timeframe, kindly contact mentors or PAs via our Discord server.

⏱️ Issue response & contact

• In the meantime, provide screenshots, videos, or other context to speed review and assignment.
• If relevant, please mention whether this issue is raised under GGSoC or OSCI when you create the issue.
• If you have questions, comment below or ping any mentor on discord.

---

📝 Guidelines for Raising Issues

To ensure quality moving forward:
For UI/UX contributions

• You must include a design (Figma link, image, or wireframe) when raising an issue (if applicable).
• Issues without visual references will not be accepted.
• If the change is a modification, share screenshots of the area you want to change.
  For Backend contributions
• You must share a brief execution plan what you intend to build, how it works, and why it's needed.
• Vague issues will be closed without review.

---

📝 Guidelines for Opening Pull Requests

• Your PRs should target the master branch.
• No one is allowed to push directly to main.
• All PRs which do not mention an issue will be closed without review.
• Do NOT raise a PR unless the issue is assigned to you.

---

✅ Quick checklist (please attach before requesting assignment)

• Design link or screenshot (for UI/UX)
• Execution plan (for backend)
• Mention if this is under GGSoC / OSCI
• Any related issue/PR numbers referenced

---

Happy contributing 🚀

[adityai0]

@coderabbitai hi

[coderabbitai]

@adityai0 Hello! 👋

How can I help you today? Feel free to ask me questions, request code reviews, or let me know if you need assistance with anything related to this repository!

[adityai0]

@coderabbitai generate a plan for notesvault refactoring. we are migrating to tanstack react , analyse the repo and give prompts to create issues.

[adityai0]

@coderabbitai where's the plan?

[coderabbitai]

Warning

A plan generation is already in progress. Please wait for it to complete before requesting a new plan.

[adityai0]

Sure

Warning

A plan generation is already in progress. Please wait for it to complete before requesting a new plan.

[coderabbitai]

Coding Plan

Approach

Migrate NotesVault from a vanilla JavaScript application to a modern React architecture using TanStack Query for data management, React Router for navigation, and establish a proper component-based structure that replaces the current 13 separate script files and localStorage-based data layer.

Observations

NotesVault is currently a vanilla JavaScript application (~3000 LOC across 13 scripts) with a minimal Flask backend that only serves a health check endpoint. The frontend uses localStorage for all data persistence (users, todos, study sessions, jotpad content) and static JSON files for read-only data (notes catalog, academic parameters). The styling is well-organized with 24 CSS files using CSS custom properties for theming including dark mode support. Authentication is entirely client-side with SHA-256 password hashing stored in localStorage. Key features include: notes browsing with filtering, a dual-mode JotPad (markdown editor + canvas drawing), todo list management, study session tracking with Chart.js visualization, user profile management, and file upload forms.

Assumptions

Assumption 1: Data Persistence Strategy During Migration

Options Considered:

1. Build complete backend API with database before React migration
2. Keep localStorage-based storage initially, create abstraction layer for future API integration
3. Use a BaaS solution (Firebase, Supabase) for quick backend setup

Chosen Option: 2

Rationale: Maintain localStorage initially with a clean abstraction layer. This allows the React migration to proceed independently while preparing clean interfaces for future backend integration without blocking frontend progress.

Assumption 2: Styling Approach

Options Considered:

1. CSS Modules - Keep existing CSS structure, scope per component
2. Styled-components/Emotion - Full CSS-in-JS with theme provider
3. Tailwind CSS - Utility-first complete rewrite

Chosen Option: 1

Rationale: CSS Modules with the existing CSS variables system. The current design token system in variables.css is mature and well-structured. CSS Modules provide component scoping while preserving the existing styles, minimizing rewrite effort.

Assumption 3: TypeScript Adoption

Options Considered:

1. Plain JavaScript - Faster initial development
2. TypeScript - Type safety and better developer experience

Chosen Option: 2

Rationale: TypeScript provides type safety for the data structures (Notes, Users, Todos, etc.) and better IDE support, which is valuable for a codebase of this size.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Project Foundation & Configuration

This phase establishes the React project structure, tooling, and core libraries that all subsequent features will build upon.

Task 1: Initialize React Project with Vite and TypeScript

Set up the base React application with modern tooling and establish the project structure.

• Initialize new Vite project with React and TypeScript template in a frontend/ directory alongside existing backend/
• Configure path aliases in tsconfig.json for clean imports (@/components, @/hooks, @/utils)
• Set up ESLint and Prettier with React-specific rules
• Create initial folder structure: src/components/, src/pages/, src/hooks/, src/utils/, src/types/, src/styles/, src/context/, src/services/
• Add development scripts to package.json for running alongside Flask backend

Task 2: Configure TanStack Query and React Router

Install and configure the core data fetching and routing libraries.

• Install TanStack Query (@tanstack/react-query) and React Router (react-router-dom)
• Create QueryClientProvider wrapper in src/App.tsx with sensible defaults
• Set up React Router with BrowserRouter and create route configuration file in src/routes/
• Add React Query DevTools for development debugging
• Create placeholder route components for all existing pages: Dashboard, Notes, JotPad, TodoList, StudyTracker, Profile, Login, Signup, ForgotPassword, Upload

Task 3: Migrate Design System and Theme Configuration

Convert the existing CSS variables system to work with the React application and set up theme management.

• Copy styling/variables.css and styling/base.css to src/styles/ as the foundation
• Create TypeScript theme type definitions in src/types/theme.ts mirroring CSS variables
• Implement ThemeContext in src/context/ThemeContext.tsx for dark/light mode toggle (replaces setupThemeToggle from scripts/script.js)
• Create useTheme hook for components to access and toggle theme
• Set up CSS Modules configuration in Vite for component-scoped styling

Task 4: Create TypeScript Type Definitions

Define TypeScript interfaces for all data structures used throughout the application.

• Create src/types/note.ts - Note interface matching data/notes.json structure
• Create src/types/user.ts - User interface matching localStorage user schema
• Create src/types/todo.ts - Todo interface matching notesvault-todos structure
• Create src/types/study-session.ts - StudySession interface
• Create src/types/parameters.ts - Branch, Semester, Subject interfaces matching data/parameters.json
• Create src/types/jotpad.ts - JotPad state interfaces for markdown and canvas data

🤖 Prompt for AI agents

Set up the React project foundation with Vite, TypeScript, TanStack Query, and
React Router. This phase establishes the baseline project structure and
configuration.

**Task 1: Initialize Vite + React + TypeScript Project**
- Create a new `frontend/` directory alongside the existing `backend/`
- Initialize Vite project using the React + TypeScript template
- Configure `tsconfig.json` with path aliases: `@/components`, `@/hooks`,
`@/utils`, `@/types`, `@/styles`, `@/context`, `@/services`
- Set up ESLint and Prettier with React-specific rules
- Create folder structure:
  - `src/components/` (UI components)
  - `src/pages/` (page components)
  - `src/hooks/` (custom hooks)
  - `src/utils/` (utilities)
  - `src/types/` (TypeScript interfaces)
  - `src/styles/` (global styles and CSS modules)
  - `src/context/` (React contexts)
  - `src/services/` (data layer services)
- Add npm scripts in `package.json` for development server that can run
alongside the Flask backend

**Task 2: Install and Configure Core Libraries**
- Install dependencies: `@tanstack/react-query`,
`@tanstack/react-query-devtools`, `react-router-dom`
- In `src/App.tsx`, set up `QueryClientProvider` with sensible default
configuration (staleTime, cacheTime, retry logic)
- Set up React Router with `BrowserRouter`
- Create `src/routes/index.tsx` with route configuration file
- Add React Query DevTools component for development environment
- Create placeholder route components for: Dashboard, Notes, JotPad, TodoList,
StudyTracker, Profile, Login, Signup, ForgotPassword, Upload

**Task 3: Migrate Design System**
- Copy `styling/variables.css` to `src/styles/variables.css` (preserves CSS
custom properties for colors, spacing, typography)
- Copy `styling/base.css` to `src/styles/base.css` (global resets and base
styles)
- Create `src/types/theme.ts` with TypeScript interfaces mirroring the CSS
variable structure
- Implement `src/context/ThemeContext.tsx` with:
  - State for current theme (light/dark)
  - Toggle function for switching themes
  - Persistence to localStorage
  - Logic that replaces `setupThemeToggle` from `scripts/script.js`
- Create `src/hooks/useTheme.ts` hook that provides access to theme state and
toggle function
- Configure Vite for CSS Modules support in `vite.config.ts`

**Task 4: Define TypeScript Types**
- `src/types/note.ts`: Interface matching the structure in `data/notes.json`
(id, title, description, branch, semester, subject, downloadUrl, etc.)
- `src/types/user.ts`: Interface matching localStorage user schema (username,
email, password hash, profile fields)
- `src/types/todo.ts`: Interface for todo items in `notesvault-todos` (id, text,
completed, timestamp)
- `src/types/study-session.ts`: Interface for study session data (subject,
duration, timestamp)
- `src/types/parameters.ts`: Interfaces for Branch, Semester, Subject matching
`data/parameters.json` structure
- `src/types/jotpad.ts`: Interfaces for JotPad state (markdown content, canvas
data)

Phase 2: Core Infrastructure & Shared Components

This phase builds the reusable component library and layout infrastructure that features will compose together.

Task 1: Create Data Service Abstraction Layer

Build a service layer that wraps localStorage operations, preparing for future API integration.

• Create src/services/storage.ts with generic localStorage read/write utilities (extract pattern from scripts/utils.js)
• Create src/services/authService.ts wrapping user authentication localStorage operations
• Create src/services/todoService.ts for todo CRUD operations against notesvault-todos key
• Create src/services/studyService.ts for study session operations
• Create src/services/jotpadService.ts for saving/loading noteContent and canvasData
• Create src/services/notesService.ts for fetching static notes.json and parameters.json
• Include SHA-256 password hashing utility (port from scripts/profile.js)

Task 2: Implement TanStack Query Hooks

Create custom hooks that wrap the data services with TanStack Query for caching and state management.

• Create src/hooks/useNotes.ts - query for fetching and filtering notes from static JSON
• Create src/hooks/useParameters.ts - query for academic hierarchy data (branches, semesters, subjects)
• Create src/hooks/useTodos.ts - queries and mutations for todo CRUD with optimistic updates
• Create src/hooks/useStudySessions.ts - queries and mutations for study tracking
• Create src/hooks/useJotpad.ts - queries and mutations for jotpad content persistence
• Create src/hooks/useAuth.ts - authentication state queries (integrates with AuthContext)

Task 3: Build Shared UI Component Library

Create reusable UI components that match existing styling patterns.

• Create src/components/ui/Button/ - Button component with variants (primary, secondary, outline, danger) matching styling/button.css
• Create src/components/ui/Card/ - Card component for notes, stats, profiles
• Create src/components/ui/Modal/ - Modal component with backdrop click handling (used by notes detail, upload)
• Create src/components/ui/Input/ - Form input component with validation states
• Create src/components/ui/Toast/ - Toast notification component (port pattern from scripts/profile.js showToast)
• Create src/components/ui/Loading/ - Loading spinner/skeleton components
• Each component should have its own CSS module file

Task 4: Create Layout Components

Migrate the header and footer components and create the page layout structure.

• Create src/components/layout/Header/ - Port components/header.html and styling/header.css, include navigation, theme toggle, auth-aware menu items
• Create src/components/layout/Footer/ - Port components/footer.html and styling/footer.css
• Create src/components/layout/Layout.tsx - Page wrapper that composes Header, main content area, and Footer
• Create src/components/layout/ProtectedRoute.tsx - Route wrapper that redirects unauthenticated users (port guard pattern from scripts/profile.js)
• Update src/App.tsx to use Layout component with React Router Outlet

Task 5: Implement Authentication Context

Create the authentication state management that replaces localStorage-based session handling.

• Create src/context/AuthContext.tsx with user state, login, logout, signup functions
• Implement session persistence to localStorage loggedInUser key (maintain compatibility)
• Create useAuth hook for components to access auth state and actions
• Implement "Remember Me" functionality via rememberEmail key
• Update Header component to show auth-aware navigation (Login/Signup vs Profile/Logout)
• Integrate with ProtectedRoute component for route guarding

🤖 Prompt for AI agents

Build the core infrastructure including data services, TanStack Query hooks,
shared UI components, layout structure, and authentication context. This
provides reusable building blocks for all features.

**Task 1: Data Service Abstraction Layer**
- `src/services/storage.ts`: Generic localStorage utilities
  - Functions: `getItem<T>()`, `setItem()`, `removeItem()`, `clear()`
  - JSON serialization/deserialization with error handling
  - Extract pattern from `scripts/utils.js`
- `src/services/authService.ts`: User authentication operations
- Functions: `getUsers()`, `saveUser()`, `getUserByEmail()`,
`validateCredentials()`, `getCurrentUser()`, `setCurrentUser()`, `logout()`
  - SHA-256 password hashing utility (port from `scripts/profile.js`)
  - Manages `loggedInUser` and user data in localStorage
- `src/services/todoService.ts`: Todo CRUD against `notesvault-todos` key
- Functions: `getTodos()`, `addTodo()`, `updateTodo()`, `deleteTodo()`,
`clearCompleted()`, `clearAll()`
- `src/services/studyService.ts`: Study session management
  - Functions: `getSessions()`, `addSession()`, `exportSessions()`
- `src/services/jotpadService.ts`: JotPad content persistence
- Functions: `loadNoteContent()`, `saveNoteContent()`, `loadCanvasData()`,
`saveCanvasData()`
- `src/services/notesService.ts`: Fetch static JSON files
- Functions: `fetchNotes()` from `data/notes.json`, `fetchParameters()` from
`data/parameters.json`
  - Use `fetch()` API to load from public directory

**Task 2: TanStack Query Hooks**
- `src/hooks/useNotes.ts`:
  - `useQuery` for fetching notes with filtering by branch, semester, subject
  - Search functionality with debounce
- `src/hooks/useParameters.ts`:
  - `useQuery` for fetching academic hierarchy (branches, semesters, subjects)
- `src/hooks/useTodos.ts`:
  - `useQuery` for fetching todos
  - `useMutation` for add, update, delete with optimistic updates
  - Cache invalidation on mutations
- `src/hooks/useStudySessions.ts`:
  - `useQuery` for fetching sessions
  - `useMutation` for adding sessions
- `src/hooks/useJotpad.ts`:
  - `useQuery` for loading content
  - `useMutation` for saving with auto-save support
- `src/hooks/useAuth.ts`:
  - Integration with AuthContext
  - Queries for current user state

**Task 3: Shared UI Components**
Each component should be in its own directory with `index.tsx` and
`styles.module.css`:
- `Button`: Props for variants (primary, secondary, outline, danger), size,
disabled, onClick. Match styling from `styling/button.css`
- `Card`: Container with optional header, body, footer slots. Hover effects and
shadows
- `Modal`: Backdrop overlay, centered content, close button, click outside to
close, accessibility (focus trap, ESC key)
- `Input`: Text input with label, error message, validation states, icons
support
- `Toast`: Notification component with types (success, error, info, warning),
auto-dismiss, position. Port pattern from `scripts/profile.js` showToast
- `Loading`: Spinner and skeleton loader components

**Task 4: Layout Components**
- `Header`: 
- Port structure from `components/header.html` and styles from
`styling/header.css`
  - Navigation links to all main pages
  - Theme toggle button using `useTheme` hook
- Auth-aware menu: show Login/Signup when logged out, Profile/Logout when logged
in
  - Use `useAuth` hook to access authentication state
- `Footer`:
  - Port from `components/footer.html` and `styling/footer.css`
  - Links and copyright information
- `Layout.tsx`:
- Wrapper component that renders Header, React Router `Outlet` for page content,
and Footer
- `ProtectedRoute.tsx`:
  - HOC or wrapper component that checks authentication via `useAuth`
  - Redirects to `/login` if user not authenticated
  - Port guard pattern from `scripts/profile.js`
- Update `src/App.tsx` to use Layout with nested routes

**Task 5: Authentication Context**
- `src/context/AuthContext.tsx`:
  - State: `currentUser` (User | null), `isLoading`
  - Actions: `login(email, password)`, `signup(userData)`, `logout()`
  - Persist current user to localStorage `loggedInUser` key
  - Load user on mount from localStorage
  - "Remember Me" functionality using `rememberEmail` localStorage key
- `src/hooks/useAuth.ts`: Export hook for accessing AuthContext
- Integration:
  - Header component uses `useAuth` to show appropriate navigation
  - ProtectedRoute uses `useAuth` to guard routes

Phase 3: Feature Migration - Pages & Core Functionality

This phase migrates all existing pages to React components, maintaining feature parity with the vanilla JS implementation.

Task 1: Migrate Authentication Pages

Convert login, signup, and forgot password flows to React components.

• Create src/pages/Login/ - Port form and validation from scripts/login.js, use AuthContext for login action
• Create src/pages/Signup/ - Port registration form from scripts/signup.js with validation
• Create src/pages/ForgotPassword/ - Port 3-step OTP flow from scripts/forgot-password.js
• Migrate corresponding styles from styling/login.css, styling/signup.css, styling/forgot-password.css
• Use shared Input and Button components
• Implement form validation with React Hook Form or native controlled components

Task 2: Migrate Dashboard Page

Convert the dashboard with its upload modal and navigation features.

• Create src/pages/Dashboard/ - Port layout and card grid from pages/dashboard.html and scripts/dashboard.js
• Create dashboard-specific components: StatsCard, FeatureCard, QuickActions
• Implement upload modal trigger (modal content handled in Upload feature)
• Migrate styles from styling/dashboard.css
• Add animation effects matching existing card hover and entrance animations

Task 3: Migrate Notes Browsing Page

Convert the notes listing with filtering and search functionality.

• Create src/pages/Notes/ - Port notes grid and filtering from scripts/notes.js
• Create src/components/notes/NoteCard/ - Individual note card component
• Create src/components/notes/NoteFilters/ - Branch and semester dropdown filters
• Create src/components/notes/NoteDetailModal/ - Modal for viewing note details with download link
• Implement search with debounce using useNotes hook (port debounce from scripts/utils.js)
• Migrate styles from styling/notes.css

Task 4: Migrate Profile Page

Convert user profile management with edit and password change functionality.

• Create src/pages/Profile/ - Port profile form from scripts/profile.js
• Implement edit mode toggle for profile fields
• Create password change form with strength meter
• Use AuthContext for retrieving and updating user data
• Migrate styles from styling/profile.css
• Add toast notifications for save/error feedback

Task 5: Migrate Upload Page

Convert the file upload form with cascading dropdown selections.

• Create src/pages/Upload/ - Port upload form from scripts/upload.js
• Implement cascading dropdowns: Branch → Semester → Subject using useParameters hook
• Support custom option input for each dropdown level
• Create file input component with drag-and-drop support
• Form validation before submission
• Migrate styles from styling/upload.css

🤖 Prompt for AI agents

Migrate all core pages to React, maintaining feature parity with the vanilla
JavaScript implementation. Use the shared components and hooks built in Phase 2.

**Task 1: Authentication Pages**
- `src/pages/Login/`:
  - Port form structure from `scripts/login.js`
  - Form fields: email, password, remember me checkbox
  - Use shared `Input` and `Button` components
  - Form validation: email format, required fields
  - Call `login()` from `useAuth` hook
  - Navigate to dashboard on success
  - Migrate styles from `styling/login.css` to CSS module
- `src/pages/Signup/`:
  - Port registration form from `scripts/signup.js`
  - Form fields: username, email, password, confirm password
  - Validation: email format, password match, password strength
  - Call `signup()` from `useAuth` hook
  - Migrate styles from `styling/signup.css`
- `src/pages/ForgotPassword/`:
  - Port 3-step OTP flow from `scripts/forgot-password.js`
  - Step 1: Email input
  - Step 2: OTP verification
  - Step 3: New password entry
  - State management for current step
  - Migrate styles from `styling/forgot-password.css`

**Task 2: Dashboard Page**
- `src/pages/Dashboard/`:
- Port layout from `pages/dashboard.html` and logic from `scripts/dashboard.js`
  - Create `StatsCard` component for displaying statistics
  - Create `FeatureCard` component for feature navigation cards
  - Create `QuickActions` component for quick action buttons
  - Upload modal trigger button (modal content from Upload page)
  - Card grid layout with responsive design
  - Hover animations and entrance animations
  - Migrate styles from `styling/dashboard.css`

**Task 3: Notes Browsing Page**
- `src/pages/Notes/`:
  - Port notes grid and filtering from `scripts/notes.js`
  - Use `useNotes` hook for fetching and filtering notes data
  - Search input with debounce (port debounce utility from `scripts/utils.js`)
  - Filter by branch and semester dropdowns
  - Grid layout of note cards
  - Migrate styles from `styling/notes.css`
- `src/components/notes/NoteCard/`:
  - Individual note display with title, description, metadata
  - Click to open detail modal
- `src/components/notes/NoteFilters/`:
  - Branch and semester dropdown filters
  - Use `useParameters` hook for filter options
- `src/components/notes/NoteDetailModal/`:
  - Modal displaying full note details
  - Download link for note file
  - Use shared `Modal` component

**Task 4: Profile Page**
- `src/pages/Profile/`:
  - Port profile form from `scripts/profile.js`
  - Display current user information from `useAuth` hook
  - Edit mode toggle (view mode vs edit mode)
  - Editable fields: username, email, profile picture, bio
  - Password change section:
    - Current password, new password, confirm password
    - Password strength meter
  - Save button calls `updateUser()` from AuthContext
  - Toast notifications for success/error using shared `Toast` component
  - Migrate styles from `styling/profile.css`

**Task 5: Upload Page**
- `src/pages/Upload/`:
  - Port upload form from `scripts/upload.js`
  - Use `useParameters` hook to fetch branch/semester/subject data
  - Cascading dropdowns:
    - Branch selection → loads semesters for that branch
    - Semester selection → loads subjects for that semester
    - Each level supports custom option input
  - File input with drag-and-drop support
  - File metadata inputs: title, description
  - Form validation before submission
  - Migrate styles from `styling/upload.css`

Phase 4: Feature Migration - Interactive Tools

This phase migrates the more complex interactive features that require specialized state management.

Task 1: Migrate JotPad Feature

Convert the dual-mode note-taking application with markdown editor and canvas drawing.

• Create src/pages/JotPad/ - Main container managing text/draw mode toggle
• Create src/components/jotpad/MarkdownEditor/ - Port text editor with toolbar from scripts/jotpad.js
• Create src/components/jotpad/MarkdownPreview/ - Live preview panel using ported scripts/markdown-parser.js logic
• Create src/components/jotpad/DrawingCanvas/ - Canvas component with pen/eraser tools, touch support
• Implement auto-save to localStorage via useJotpad hook
• Port PDF export functionality using jsPDF and html2canvas (same CDN dependencies)
• Migrate styles from styling/jotpad.css

Task 2: Migrate Todo List Feature

Convert the task management system with full CRUD operations.

• Create src/pages/TodoList/ - Port todo list from scripts/todolist.js
• Create src/components/todo/TodoItem/ - Individual todo with edit, complete, delete actions
• Create src/components/todo/TodoInput/ - New todo input form
• Create src/components/todo/TodoStats/ - Total and completed count display
• Implement optimistic updates with TanStack Query mutations via useTodos hook
• Port bulk operations: clear all, clear completed
• Migrate styles from styling/todolist.css

Task 3: Migrate Study Tracker Feature

Convert the study session tracking with Chart.js visualization.

• Create src/pages/StudyTracker/ - Port tracker from scripts/study-tracker.js
• Create src/components/study/TimerControl/ - Start/stop timer with subject selection
• Create src/components/study/SessionChart/ - Chart.js bar chart for session visualization
• Create src/components/study/ExportButton/ - JSON export functionality
• Use useStudySessions hook for data persistence and aggregation
• Integrate Chart.js (consider react-chartjs-2 wrapper for React integration)
• Migrate styles from styling/study-tracker.css

Task 4: Migrate Landing Page and Global Features

Convert the homepage with hero section, features, testimonials, and global utilities.

• Create src/pages/Home/ - Port landing page from index.html
• Create src/components/home/Hero/ - Hero section with typewriter animation (port from scripts/script.js)
• Create src/components/home/Features/ - Features grid section
• Create src/components/home/Testimonials/ - Testimonial carousel with auto-scroll
• Create src/components/common/BackToTop/ - Scroll-to-top button with visibility toggle
• Port AOS (Animate On Scroll) integration or replace with Framer Motion
• Migrate styles from styling/landing.css and related files

Task 5: Integration Testing and Cleanup

Final integration of all components and removal of legacy code.

• Verify all routes work correctly with React Router
• Test authentication flow end-to-end (signup → login → protected pages → logout)
• Verify localStorage data migration compatibility (existing users can still access their data)
• Test dark/light theme persistence and toggle
• Validate responsive design across breakpoints
• Remove or archive legacy scripts/, pages/, styling/ directories
• Update README with new project structure and development instructions

🤖 Prompt for AI agents

Migrate the complex interactive features (JotPad, TodoList, Study Tracker,
Landing Page) and perform final integration testing. These features require
specialized state management and interactions.

**Task 1: JotPad Feature**
- `src/pages/JotPad/`:
  - Main container component managing mode toggle (text mode vs draw mode)
  - State for current mode
  - Renders either MarkdownEditor or DrawingCanvas based on mode
  - Port structure from `scripts/jotpad.js`
  - Migrate styles from `styling/jotpad.css`
- `src/components/jotpad/MarkdownEditor/`:
  - Textarea for markdown input
  - Toolbar with formatting buttons (bold, italic, heading, list, etc.)
  - Split view: editor on left, live preview on right
  - Auto-save functionality using `useJotpad` hook
- `src/components/jotpad/MarkdownPreview/`:
  - Live preview panel rendering markdown as HTML
  - Port markdown parsing logic from `scripts/markdown-parser.js`
  - Sanitize HTML output for security
- `src/components/jotpad/DrawingCanvas/`:
  - HTML5 canvas element
  - Drawing tools: pen, eraser, color picker, brush size
  - Touch support for mobile/tablet drawing
  - Clear canvas button
  - Save canvas data to localStorage via `useJotpad` hook
- PDF Export:
  - Install jsPDF and html2canvas
  - Export button that captures current content as PDF
  - Port export logic from `scripts/jotpad.js`

**Task 2: Todo List Feature**
- `src/pages/TodoList/`:
  - Port todo list from `scripts/todolist.js`
  - Use `useTodos` hook for data fetching and mutations
  - TodoInput component for adding new todos
  - List of TodoItem components
  - TodoStats component showing counts
  - Bulk action buttons: "Clear All", "Clear Completed"
  - Migrate styles from `styling/todolist.css`
- `src/components/todo/TodoItem/`:
  - Individual todo display with text and completion status
  - Checkbox to toggle completion
  - Edit button/mode for modifying todo text
  - Delete button
  - Actions use mutations from `useTodos` with optimistic updates
- `src/components/todo/TodoInput/`:
  - Input field for new todo text
  - Add button
  - Submit handler calls `addTodo` mutation
- `src/components/todo/TodoStats/`:
  - Display total todos count
  - Display completed todos count

**Task 3: Study Tracker Feature**
- `src/pages/StudyTracker/`:
  - Port tracker from `scripts/study-tracker.js`
  - Use `useStudySessions` hook for data
  - TimerControl component for starting/stopping sessions
  - SessionChart component for visualization
  - ExportButton component for data export
  - Migrate styles from `styling/study-tracker.css`
- `src/components/study/TimerControl/`:
  - Subject selection dropdown (use `useParameters` for subject list)
  - Timer display (minutes:seconds)
  - Start/Stop button
  - State for tracking active session (start time, subject)
  - On stop, save session via `useStudySessions` mutation
- `src/components/study/SessionChart/`:
  - Install `react-chartjs-2` and `chart.js`
  - Bar chart showing study duration per subject
  - Aggregate session data from `useStudySessions`
  - Chart configuration matching existing Chart.js setup
- `src/components/study/ExportButton/`:
  - Export button
  - Download study session data as JSON file

**Task 4: Landing Page and Global Features**
- `src/pages/Home/`:
  - Port landing page structure from `index.html`
  - Compose Hero, Features, Testimonials components
  - Migrate styles from `styling/landing.css`
- `src/components/home/Hero/`:
  - Hero section with headline and CTA
  - Typewriter animation effect (port from `scripts/script.js`)
- Consider using a library like `react-type-animation` or implement custom
effect
- `src/components/home/Features/`:
  - Features grid section
  - Feature cards with icon, title, description
  - Responsive grid layout
- `src/components/home/Testimonials/`:
  - Testimonial carousel with auto-scroll
  - Navigation dots/arrows
  - Consider using `react-slick` or implement custom carousel
- `src/components/common/BackToTop/`:
  - Floating button that appears when scrolled down
  - Click handler scrolls to top
  - Visibility toggle based on scroll position
- Animations:
  - Option 1: Port AOS (Animate On Scroll) library integration
  - Option 2: Replace with Framer Motion for React-native animations

**Task 5: Integration Testing and Cleanup**
- Testing:
  - Verify all routes accessible via React Router
  - Test complete authentication flow:
    - Signup → creates user in localStorage
    - Login → sets current user, redirects to dashboard
    - Protected routes → redirect to login when not authenticated
    - Logout → clears current user, redirects to home
  - Verify localStorage data compatibility:
    - Existing `notesvault-todos` data loads correctly
    - Existing user data works with new auth system
    - JotPad content and canvas data preserved
  - Test theme toggle:
    - Dark/light mode switch works
    - Theme preference persists across sessions
  - Validate responsive design:
    - Test on mobile, tablet, desktop breakpoints
    - Ensure all features work on different screen sizes
- Cleanup:
- Remove or archive legacy directories: `scripts/`, `pages/`, `styling/`,
`components/`
  - Keep `backend/` directory for future API development
  - Move `data/notes.json` and `data/parameters.json` to `frontend/public/data/`
- Documentation:
  - Update README with:
    - New project structure (React architecture)
    - Development setup instructions (frontend + backend)
    - Build and deployment instructions
    - Technology stack overview

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Set up the React project foundation with Vite, TypeScript, TanStack Query, and
React Router. This phase establishes the baseline project structure and
configuration.

**Task 1: Initialize Vite + React + TypeScript Project**
- Create a new `frontend/` directory alongside the existing `backend/`
- Initialize Vite project using the React + TypeScript template
- Configure `tsconfig.json` with path aliases: `@/components`, `@/hooks`,
`@/utils`, `@/types`, `@/styles`, `@/context`, `@/services`
- Set up ESLint and Prettier with React-specific rules
- Create folder structure:
  - `src/components/` (UI components)
  - `src/pages/` (page components)
  - `src/hooks/` (custom hooks)
  - `src/utils/` (utilities)
  - `src/types/` (TypeScript interfaces)
  - `src/styles/` (global styles and CSS modules)
  - `src/context/` (React contexts)
  - `src/services/` (data layer services)
- Add npm scripts in `package.json` for development server that can run
alongside the Flask backend

**Task 2: Install and Configure Core Libraries**
- Install dependencies: `@tanstack/react-query`,
`@tanstack/react-query-devtools`, `react-router-dom`
- In `src/App.tsx`, set up `QueryClientProvider` with sensible default
configuration (staleTime, cacheTime, retry logic)
- Set up React Router with `BrowserRouter`
- Create `src/routes/index.tsx` with route configuration file
- Add React Query DevTools component for development environment
- Create placeholder route components for: Dashboard, Notes, JotPad, TodoList,
StudyTracker, Profile, Login, Signup, ForgotPassword, Upload

**Task 3: Migrate Design System**
- Copy `styling/variables.css` to `src/styles/variables.css` (preserves CSS
custom properties for colors, spacing, typography)
- Copy `styling/base.css` to `src/styles/base.css` (global resets and base
styles)
- Create `src/types/theme.ts` with TypeScript interfaces mirroring the CSS
variable structure
- Implement `src/context/ThemeContext.tsx` with:
  - State for current theme (light/dark)
  - Toggle function for switching themes
  - Persistence to localStorage
  - Logic that replaces `setupThemeToggle` from `scripts/script.js`
- Create `src/hooks/useTheme.ts` hook that provides access to theme state and
toggle function
- Configure Vite for CSS Modules support in `vite.config.ts`

**Task 4: Define TypeScript Types**
- `src/types/note.ts`: Interface matching the structure in `data/notes.json`
(id, title, description, branch, semester, subject, downloadUrl, etc.)
- `src/types/user.ts`: Interface matching localStorage user schema (username,
email, password hash, profile fields)
- `src/types/todo.ts`: Interface for todo items in `notesvault-todos` (id, text,
completed, timestamp)
- `src/types/study-session.ts`: Interface for study session data (subject,
duration, timestamp)
- `src/types/parameters.ts`: Interfaces for Branch, Semester, Subject matching
`data/parameters.json` structure
- `src/types/jotpad.ts`: Interfaces for JotPad state (markdown content, canvas
data)
===============================================================================

Task: 2

Build the core infrastructure including data services, TanStack Query hooks,
shared UI components, layout structure, and authentication context. This
provides reusable building blocks for all features.

**Task 1: Data Service Abstraction Layer**
- `src/services/storage.ts`: Generic localStorage utilities
  - Functions: `getItem<T>()`, `setItem()`, `removeItem()`, `clear()`
  - JSON serialization/deserialization with error handling
  - Extract pattern from `scripts/utils.js`
- `src/services/authService.ts`: User authentication operations
- Functions: `getUsers()`, `saveUser()`, `getUserByEmail()`,
`validateCredentials()`, `getCurrentUser()`, `setCurrentUser()`, `logout()`
  - SHA-256 password hashing utility (port from `scripts/profile.js`)
  - Manages `loggedInUser` and user data in localStorage
- `src/services/todoService.ts`: Todo CRUD against `notesvault-todos` key
- Functions: `getTodos()`, `addTodo()`, `updateTodo()`, `deleteTodo()`,
`clearCompleted()`, `clearAll()`
- `src/services/studyService.ts`: Study session management
  - Functions: `getSessions()`, `addSession()`, `exportSessions()`
- `src/services/jotpadService.ts`: JotPad content persistence
- Functions: `loadNoteContent()`, `saveNoteContent()`, `loadCanvasData()`,
`saveCanvasData()`
- `src/services/notesService.ts`: Fetch static JSON files
- Functions: `fetchNotes()` from `data/notes.json`, `fetchParameters()` from
`data/parameters.json`
  - Use `fetch()` API to load from public directory

**Task 2: TanStack Query Hooks**
- `src/hooks/useNotes.ts`:
  - `useQuery` for fetching notes with filtering by branch, semester, subject
  - Search functionality with debounce
- `src/hooks/useParameters.ts`:
  - `useQuery` for fetching academic hierarchy (branches, semesters, subjects)
- `src/hooks/useTodos.ts`:
  - `useQuery` for fetching todos
  - `useMutation` for add, update, delete with optimistic updates
  - Cache invalidation on mutations
- `src/hooks/useStudySessions.ts`:
  - `useQuery` for fetching sessions
  - `useMutation` for adding sessions
- `src/hooks/useJotpad.ts`:
  - `useQuery` for loading content
  - `useMutation` for saving with auto-save support
- `src/hooks/useAuth.ts`:
  - Integration with AuthContext
  - Queries for current user state

**Task 3: Shared UI Components**
Each component should be in its own directory with `index.tsx` and
`styles.module.css`:
- `Button`: Props for variants (primary, secondary, outline, danger), size,
disabled, onClick. Match styling from `styling/button.css`
- `Card`: Container with optional header, body, footer slots. Hover effects and
shadows
- `Modal`: Backdrop overlay, centered content, close button, click outside to
close, accessibility (focus trap, ESC key)
- `Input`: Text input with label, error message, validation states, icons
support
- `Toast`: Notification component with types (success, error, info, warning),
auto-dismiss, position. Port pattern from `scripts/profile.js` showToast
- `Loading`: Spinner and skeleton loader components

**Task 4: Layout Components**
- `Header`: 
- Port structure from `components/header.html` and styles from
`styling/header.css`
  - Navigation links to all main pages
  - Theme toggle button using `useTheme` hook
- Auth-aware menu: show Login/Signup when logged out, Profile/Logout when logged
in
  - Use `useAuth` hook to access authentication state
- `Footer`:
  - Port from `components/footer.html` and `styling/footer.css`
  - Links and copyright information
- `Layout.tsx`:
- Wrapper component that renders Header, React Router `Outlet` for page content,
and Footer
- `ProtectedRoute.tsx`:
  - HOC or wrapper component that checks authentication via `useAuth`
  - Redirects to `/login` if user not authenticated
  - Port guard pattern from `scripts/profile.js`
- Update `src/App.tsx` to use Layout with nested routes

**Task 5: Authentication Context**
- `src/context/AuthContext.tsx`:
  - State: `currentUser` (User | null), `isLoading`
  - Actions: `login(email, password)`, `signup(userData)`, `logout()`
  - Persist current user to localStorage `loggedInUser` key
  - Load user on mount from localStorage
  - "Remember Me" functionality using `rememberEmail` localStorage key
- `src/hooks/useAuth.ts`: Export hook for accessing AuthContext
- Integration:
  - Header component uses `useAuth` to show appropriate navigation
  - ProtectedRoute uses `useAuth` to guard routes
===============================================================================

Task: 3

Migrate all core pages to React, maintaining feature parity with the vanilla
JavaScript implementation. Use the shared components and hooks built in Phase 2.

**Task 1: Authentication Pages**
- `src/pages/Login/`:
  - Port form structure from `scripts/login.js`
  - Form fields: email, password, remember me checkbox
  - Use shared `Input` and `Button` components
  - Form validation: email format, required fields
  - Call `login()` from `useAuth` hook
  - Navigate to dashboard on success
  - Migrate styles from `styling/login.css` to CSS module
- `src/pages/Signup/`:
  - Port registration form from `scripts/signup.js`
  - Form fields: username, email, password, confirm password
  - Validation: email format, password match, password strength
  - Call `signup()` from `useAuth` hook
  - Migrate styles from `styling/signup.css`
- `src/pages/ForgotPassword/`:
  - Port 3-step OTP flow from `scripts/forgot-password.js`
  - Step 1: Email input
  - Step 2: OTP verification
  - Step 3: New password entry
  - State management for current step
  - Migrate styles from `styling/forgot-password.css`

**Task 2: Dashboard Page**
- `src/pages/Dashboard/`:
- Port layout from `pages/dashboard.html` and logic from `scripts/dashboard.js`
  - Create `StatsCard` component for displaying statistics
  - Create `FeatureCard` component for feature navigation cards
  - Create `QuickActions` component for quick action buttons
  - Upload modal trigger button (modal content from Upload page)
  - Card grid layout with responsive design
  - Hover animations and entrance animations
  - Migrate styles from `styling/dashboard.css`

**Task 3: Notes Browsing Page**
- `src/pages/Notes/`:
  - Port notes grid and filtering from `scripts/notes.js`
  - Use `useNotes` hook for fetching and filtering notes data
  - Search input with debounce (port debounce utility from `scripts/utils.js`)
  - Filter by branch and semester dropdowns
  - Grid layout of note cards
  - Migrate styles from `styling/notes.css`
- `src/components/notes/NoteCard/`:
  - Individual note display with title, description, metadata
  - Click to open detail modal
- `src/components/notes/NoteFilters/`:
  - Branch and semester dropdown filters
  - Use `useParameters` hook for filter options
- `src/components/notes/NoteDetailModal/`:
  - Modal displaying full note details
  - Download link for note file
  - Use shared `Modal` component

**Task 4: Profile Page**
- `src/pages/Profile/`:
  - Port profile form from `scripts/profile.js`
  - Display current user information from `useAuth` hook
  - Edit mode toggle (view mode vs edit mode)
  - Editable fields: username, email, profile picture, bio
  - Password change section:
    - Current password, new password, confirm password
    - Password strength meter
  - Save button calls `updateUser()` from AuthContext
  - Toast notifications for success/error using shared `Toast` component
  - Migrate styles from `styling/profile.css`

**Task 5: Upload Page**
- `src/pages/Upload/`:
  - Port upload form from `scripts/upload.js`
  - Use `useParameters` hook to fetch branch/semester/subject data
  - Cascading dropdowns:
    - Branch selection → loads semesters for that branch
    - Semester selection → loads subjects for that semester
    - Each level supports custom option input
  - File input with drag-and-drop support
  - File metadata inputs: title, description
  - Form validation before submission
  - Migrate styles from `styling/upload.css`
===============================================================================

Task: 4

Migrate the complex interactive features (JotPad, TodoList, Study Tracker,
Landing Page) and perform final integration testing. These features require
specialized state management and interactions.

**Task 1: JotPad Feature**
- `src/pages/JotPad/`:
  - Main container component managing mode toggle (text mode vs draw mode)
  - State for current mode
  - Renders either MarkdownEditor or DrawingCanvas based on mode
  - Port structure from `scripts/jotpad.js`
  - Migrate styles from `styling/jotpad.css`
- `src/components/jotpad/MarkdownEditor/`:
  - Textarea for markdown input
  - Toolbar with formatting buttons (bold, italic, heading, list, etc.)
  - Split view: editor on left, live preview on right
  - Auto-save functionality using `useJotpad` hook
- `src/components/jotpad/MarkdownPreview/`:
  - Live preview panel rendering markdown as HTML
  - Port markdown parsing logic from `scripts/markdown-parser.js`
  - Sanitize HTML output for security
- `src/components/jotpad/DrawingCanvas/`:
  - HTML5 canvas element
  - Drawing tools: pen, eraser, color picker, brush size
  - Touch support for mobile/tablet drawing
  - Clear canvas button
  - Save canvas data to localStorage via `useJotpad` hook
- PDF Export:
  - Install jsPDF and html2canvas
  - Export button that captures current content as PDF
  - Port export logic from `scripts/jotpad.js`

**Task 2: Todo List Feature**
- `src/pages/TodoList/`:
  - Port todo list from `scripts/todolist.js`
  - Use `useTodos` hook for data fetching and mutations
  - TodoInput component for adding new todos
  - List of TodoItem components
  - TodoStats component showing counts
  - Bulk action buttons: "Clear All", "Clear Completed"
  - Migrate styles from `styling/todolist.css`
- `src/components/todo/TodoItem/`:
  - Individual todo display with text and completion status
  - Checkbox to toggle completion
  - Edit button/mode for modifying todo text
  - Delete button
  - Actions use mutations from `useTodos` with optimistic updates
- `src/components/todo/TodoInput/`:
  - Input field for new todo text
  - Add button
  - Submit handler calls `addTodo` mutation
- `src/components/todo/TodoStats/`:
  - Display total todos count
  - Display completed todos count

**Task 3: Study Tracker Feature**
- `src/pages/StudyTracker/`:
  - Port tracker from `scripts/study-tracker.js`
  - Use `useStudySessions` hook for data
  - TimerControl component for starting/stopping sessions
  - SessionChart component for visualization
  - ExportButton component for data export
  - Migrate styles from `styling/study-tracker.css`
- `src/components/study/TimerControl/`:
  - Subject selection dropdown (use `useParameters` for subject list)
  - Timer display (minutes:seconds)
  - Start/Stop button
  - State for tracking active session (start time, subject)
  - On stop, save session via `useStudySessions` mutation
- `src/components/study/SessionChart/`:
  - Install `react-chartjs-2` and `chart.js`
  - Bar chart showing study duration per subject
  - Aggregate session data from `useStudySessions`
  - Chart configuration matching existing Chart.js setup
- `src/components/study/ExportButton/`:
  - Export button
  - Download study session data as JSON file

**Task 4: Landing Page and Global Features**
- `src/pages/Home/`:
  - Port landing page structure from `index.html`
  - Compose Hero, Features, Testimonials components
  - Migrate styles from `styling/landing.css`
- `src/components/home/Hero/`:
  - Hero section with headline and CTA
  - Typewriter animation effect (port from `scripts/script.js`)
- Consider using a library like `react-type-animation` or implement custom
effect
- `src/components/home/Features/`:
  - Features grid section
  - Feature cards with icon, title, description
  - Responsive grid layout
- `src/components/home/Testimonials/`:
  - Testimonial carousel with auto-scroll
  - Navigation dots/arrows
  - Consider using `react-slick` or implement custom carousel
- `src/components/common/BackToTop/`:
  - Floating button that appears when scrolled down
  - Click handler scrolls to top
  - Visibility toggle based on scroll position
- Animations:
  - Option 1: Port AOS (Animate On Scroll) library integration
  - Option 2: Replace with Framer Motion for React-native animations

**Task 5: Integration Testing and Cleanup**
- Testing:
  - Verify all routes accessible via React Router
  - Test complete authentication flow:
    - Signup → creates user in localStorage
    - Login → sets current user, redirects to dashboard
    - Protected routes → redirect to login when not authenticated
    - Logout → clears current user, redirects to home
  - Verify localStorage data compatibility:
    - Existing `notesvault-todos` data loads correctly
    - Existing user data works with new auth system
    - JotPad content and canvas data preserved
  - Test theme toggle:
    - Dark/light mode switch works
    - Theme preference persists across sessions
  - Validate responsive design:
    - Test on mobile, tablet, desktop breakpoints
    - Ensure all features work on different screen sizes
- Cleanup:
- Remove or archive legacy directories: `scripts/`, `pages/`, `styling/`,
`components/`
  - Keep `backend/` directory for future API development
  - Move `data/notes.json` and `data/parameters.json` to `frontend/public/data/`
- Documentation:
  - Update README with:
    - New project structure (React architecture)
    - Development setup instructions (frontend + backend)
    - Build and deployment instructions
    - Technology stack overview

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For assumption 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!

[adityai0]

Coding Plan

Approach
Migrate NotesVault from a vanilla JavaScript application to a modern React architecture using TanStack Query for data management, React Router for navigation, and establish a proper component-based structure that replaces the current 13 separate script files and localStorage-based data layer.

Observations
NotesVault is currently a vanilla JavaScript application (~3000 LOC across 13 scripts) with a minimal Flask backend that only serves a health check endpoint. The frontend uses localStorage for all data persistence (users, todos, study sessions, jotpad content) and static JSON files for read-only data (notes catalog, academic parameters). The styling is well-organized with 24 CSS files using CSS custom properties for theming including dark mode support. Authentication is entirely client-side with SHA-256 password hashing stored in localStorage. Key features include: notes browsing with filtering, a dual-mode JotPad (markdown editor + canvas drawing), todo list management, study session tracking with Chart.js visualization, user profile management, and file upload forms.

Assumptions
Assumption 1: Data Persistence Strategy During Migration
Options Considered:

1. Build complete backend API with database before React migration
2. Keep localStorage-based storage initially, create abstraction layer for future API integration
3. Use a BaaS solution (Firebase, Supabase) for quick backend setup

Chosen Option: 2

Rationale: Maintain localStorage initially with a clean abstraction layer. This allows the React migration to proceed independently while preparing clean interfaces for future backend integration without blocking frontend progress.

Assumption 2: Styling Approach
Options Considered:

1. CSS Modules - Keep existing CSS structure, scope per component
2. Styled-components/Emotion - Full CSS-in-JS with theme provider
3. Tailwind CSS - Utility-first complete rewrite

Chosen Option: 1

Rationale: CSS Modules with the existing CSS variables system. The current design token system in variables.css is mature and well-structured. CSS Modules provide component scoping while preserving the existing styles, minimizing rewrite effort.

Assumption 3: TypeScript Adoption
Options Considered:

1. Plain JavaScript - Faster initial development
2. TypeScript - Type safety and better developer experience

Chosen Option: 2

Rationale: TypeScript provides type safety for the data structures (Notes, Users, Todos, etc.) and better IDE support, which is valuable for a codebase of this size.

💡 User Tips

Regenerate the plan with different choices with @coderabbitai <feedback>.

Implementation Steps

Phase 1: Project Foundation & Configuration

This phase establishes the React project structure, tooling, and core libraries that all subsequent features will build upon.

Task 1: Initialize React Project with Vite and TypeScript
Set up the base React application with modern tooling and establish the project structure.

• Initialize new Vite project with React and TypeScript template in a frontend/ directory alongside existing backend/
• Configure path aliases in tsconfig.json for clean imports (@/components, @/hooks, @/utils)
• Set up ESLint and Prettier with React-specific rules
• Create initial folder structure: src/components/, src/pages/, src/hooks/, src/utils/, src/types/, src/styles/, src/context/, src/services/
• Add development scripts to package.json for running alongside Flask backend

Task 2: Configure TanStack Query and React Router
Install and configure the core data fetching and routing libraries.

• Install TanStack Query (@tanstack/react-query) and React Router (react-router-dom)
• Create QueryClientProvider wrapper in src/App.tsx with sensible defaults
• Set up React Router with BrowserRouter and create route configuration file in src/routes/
• Add React Query DevTools for development debugging
• Create placeholder route components for all existing pages: Dashboard, Notes, JotPad, TodoList, StudyTracker, Profile, Login, Signup, ForgotPassword, Upload

Task 3: Migrate Design System and Theme Configuration
Convert the existing CSS variables system to work with the React application and set up theme management.

• Copy styling/variables.css and styling/base.css to src/styles/ as the foundation
• Create TypeScript theme type definitions in src/types/theme.ts mirroring CSS variables
• Implement ThemeContext in src/context/ThemeContext.tsx for dark/light mode toggle (replaces setupThemeToggle from scripts/script.js)
• Create useTheme hook for components to access and toggle theme
• Set up CSS Modules configuration in Vite for component-scoped styling

Task 4: Create TypeScript Type Definitions
Define TypeScript interfaces for all data structures used throughout the application.

• Create src/types/note.ts - Note interface matching data/notes.json structure
• Create src/types/user.ts - User interface matching localStorage user schema
• Create src/types/todo.ts - Todo interface matching notesvault-todos structure
• Create src/types/study-session.ts - StudySession interface
• Create src/types/parameters.ts - Branch, Semester, Subject interfaces matching data/parameters.json
• Create src/types/jotpad.ts - JotPad state interfaces for markdown and canvas data

🤖 Prompt for AI agents

Set up the React project foundation with Vite, TypeScript, TanStack Query, and
React Router. This phase establishes the baseline project structure and
configuration.

**Task 1: Initialize Vite + React + TypeScript Project**
- Create a new `frontend/` directory alongside the existing `backend/`
- Initialize Vite project using the React + TypeScript template
- Configure `tsconfig.json` with path aliases: `@/components`, `@/hooks`,
`@/utils`, `@/types`, `@/styles`, `@/context`, `@/services`
- Set up ESLint and Prettier with React-specific rules
- Create folder structure:
  - `src/components/` (UI components)
  - `src/pages/` (page components)
  - `src/hooks/` (custom hooks)
  - `src/utils/` (utilities)
  - `src/types/` (TypeScript interfaces)
  - `src/styles/` (global styles and CSS modules)
  - `src/context/` (React contexts)
  - `src/services/` (data layer services)
- Add npm scripts in `package.json` for development server that can run
alongside the Flask backend

**Task 2: Install and Configure Core Libraries**
- Install dependencies: `@tanstack/react-query`,
`@tanstack/react-query-devtools`, `react-router-dom`
- In `src/App.tsx`, set up `QueryClientProvider` with sensible default
configuration (staleTime, cacheTime, retry logic)
- Set up React Router with `BrowserRouter`
- Create `src/routes/index.tsx` with route configuration file
- Add React Query DevTools component for development environment
- Create placeholder route components for: Dashboard, Notes, JotPad, TodoList,
StudyTracker, Profile, Login, Signup, ForgotPassword, Upload

**Task 3: Migrate Design System**
- Copy `styling/variables.css` to `src/styles/variables.css` (preserves CSS
custom properties for colors, spacing, typography)
- Copy `styling/base.css` to `src/styles/base.css` (global resets and base
styles)
- Create `src/types/theme.ts` with TypeScript interfaces mirroring the CSS
variable structure
- Implement `src/context/ThemeContext.tsx` with:
  - State for current theme (light/dark)
  - Toggle function for switching themes
  - Persistence to localStorage
  - Logic that replaces `setupThemeToggle` from `scripts/script.js`
- Create `src/hooks/useTheme.ts` hook that provides access to theme state and
toggle function
- Configure Vite for CSS Modules support in `vite.config.ts`

**Task 4: Define TypeScript Types**
- `src/types/note.ts`: Interface matching the structure in `data/notes.json`
(id, title, description, branch, semester, subject, downloadUrl, etc.)
- `src/types/user.ts`: Interface matching localStorage user schema (username,
email, password hash, profile fields)
- `src/types/todo.ts`: Interface for todo items in `notesvault-todos` (id, text,
completed, timestamp)
- `src/types/study-session.ts`: Interface for study session data (subject,
duration, timestamp)
- `src/types/parameters.ts`: Interfaces for Branch, Semester, Subject matching
`data/parameters.json` structure
- `src/types/jotpad.ts`: Interfaces for JotPad state (markdown content, canvas
data)

Phase 2: Core Infrastructure & Shared Components

This phase builds the reusable component library and layout infrastructure that features will compose together.

Task 1: Create Data Service Abstraction Layer
Build a service layer that wraps localStorage operations, preparing for future API integration.

• Create src/services/storage.ts with generic localStorage read/write utilities (extract pattern from scripts/utils.js)
• Create src/services/authService.ts wrapping user authentication localStorage operations
• Create src/services/todoService.ts for todo CRUD operations against notesvault-todos key
• Create src/services/studyService.ts for study session operations
• Create src/services/jotpadService.ts for saving/loading noteContent and canvasData
• Create src/services/notesService.ts for fetching static notes.json and parameters.json
• Include SHA-256 password hashing utility (port from scripts/profile.js)

Task 2: Implement TanStack Query Hooks
Create custom hooks that wrap the data services with TanStack Query for caching and state management.

• Create src/hooks/useNotes.ts - query for fetching and filtering notes from static JSON
• Create src/hooks/useParameters.ts - query for academic hierarchy data (branches, semesters, subjects)
• Create src/hooks/useTodos.ts - queries and mutations for todo CRUD with optimistic updates
• Create src/hooks/useStudySessions.ts - queries and mutations for study tracking
• Create src/hooks/useJotpad.ts - queries and mutations for jotpad content persistence
• Create src/hooks/useAuth.ts - authentication state queries (integrates with AuthContext)

Task 3: Build Shared UI Component Library
Create reusable UI components that match existing styling patterns.

• Create src/components/ui/Button/ - Button component with variants (primary, secondary, outline, danger) matching styling/button.css
• Create src/components/ui/Card/ - Card component for notes, stats, profiles
• Create src/components/ui/Modal/ - Modal component with backdrop click handling (used by notes detail, upload)
• Create src/components/ui/Input/ - Form input component with validation states
• Create src/components/ui/Toast/ - Toast notification component (port pattern from scripts/profile.js showToast)
• Create src/components/ui/Loading/ - Loading spinner/skeleton components
• Each component should have its own CSS module file

Task 4: Create Layout Components
Migrate the header and footer components and create the page layout structure.

• Create src/components/layout/Header/ - Port components/header.html and styling/header.css, include navigation, theme toggle, auth-aware menu items
• Create src/components/layout/Footer/ - Port components/footer.html and styling/footer.css
• Create src/components/layout/Layout.tsx - Page wrapper that composes Header, main content area, and Footer
• Create src/components/layout/ProtectedRoute.tsx - Route wrapper that redirects unauthenticated users (port guard pattern from scripts/profile.js)
• Update src/App.tsx to use Layout component with React Router Outlet

Task 5: Implement Authentication Context
Create the authentication state management that replaces localStorage-based session handling.

• Create src/context/AuthContext.tsx with user state, login, logout, signup functions
• Implement session persistence to localStorage loggedInUser key (maintain compatibility)
• Create useAuth hook for components to access auth state and actions
• Implement "Remember Me" functionality via rememberEmail key
• Update Header component to show auth-aware navigation (Login/Signup vs Profile/Logout)
• Integrate with ProtectedRoute component for route guarding

🤖 Prompt for AI agents

Build the core infrastructure including data services, TanStack Query hooks,
shared UI components, layout structure, and authentication context. This
provides reusable building blocks for all features.

**Task 1: Data Service Abstraction Layer**
- `src/services/storage.ts`: Generic localStorage utilities
  - Functions: `getItem<T>()`, `setItem()`, `removeItem()`, `clear()`
  - JSON serialization/deserialization with error handling
  - Extract pattern from `scripts/utils.js`
- `src/services/authService.ts`: User authentication operations
- Functions: `getUsers()`, `saveUser()`, `getUserByEmail()`,
`validateCredentials()`, `getCurrentUser()`, `setCurrentUser()`, `logout()`
  - SHA-256 password hashing utility (port from `scripts/profile.js`)
  - Manages `loggedInUser` and user data in localStorage
- `src/services/todoService.ts`: Todo CRUD against `notesvault-todos` key
- Functions: `getTodos()`, `addTodo()`, `updateTodo()`, `deleteTodo()`,
`clearCompleted()`, `clearAll()`
- `src/services/studyService.ts`: Study session management
  - Functions: `getSessions()`, `addSession()`, `exportSessions()`
- `src/services/jotpadService.ts`: JotPad content persistence
- Functions: `loadNoteContent()`, `saveNoteContent()`, `loadCanvasData()`,
`saveCanvasData()`
- `src/services/notesService.ts`: Fetch static JSON files
- Functions: `fetchNotes()` from `data/notes.json`, `fetchParameters()` from
`data/parameters.json`
  - Use `fetch()` API to load from public directory

**Task 2: TanStack Query Hooks**
- `src/hooks/useNotes.ts`:
  - `useQuery` for fetching notes with filtering by branch, semester, subject
  - Search functionality with debounce
- `src/hooks/useParameters.ts`:
  - `useQuery` for fetching academic hierarchy (branches, semesters, subjects)
- `src/hooks/useTodos.ts`:
  - `useQuery` for fetching todos
  - `useMutation` for add, update, delete with optimistic updates
  - Cache invalidation on mutations
- `src/hooks/useStudySessions.ts`:
  - `useQuery` for fetching sessions
  - `useMutation` for adding sessions
- `src/hooks/useJotpad.ts`:
  - `useQuery` for loading content
  - `useMutation` for saving with auto-save support
- `src/hooks/useAuth.ts`:
  - Integration with AuthContext
  - Queries for current user state

**Task 3: Shared UI Components**
Each component should be in its own directory with `index.tsx` and
`styles.module.css`:
- `Button`: Props for variants (primary, secondary, outline, danger), size,
disabled, onClick. Match styling from `styling/button.css`
- `Card`: Container with optional header, body, footer slots. Hover effects and
shadows
- `Modal`: Backdrop overlay, centered content, close button, click outside to
close, accessibility (focus trap, ESC key)
- `Input`: Text input with label, error message, validation states, icons
support
- `Toast`: Notification component with types (success, error, info, warning),
auto-dismiss, position. Port pattern from `scripts/profile.js` showToast
- `Loading`: Spinner and skeleton loader components

**Task 4: Layout Components**
- `Header`: 
- Port structure from `components/header.html` and styles from
`styling/header.css`
  - Navigation links to all main pages
  - Theme toggle button using `useTheme` hook
- Auth-aware menu: show Login/Signup when logged out, Profile/Logout when logged
in
  - Use `useAuth` hook to access authentication state
- `Footer`:
  - Port from `components/footer.html` and `styling/footer.css`
  - Links and copyright information
- `Layout.tsx`:
- Wrapper component that renders Header, React Router `Outlet` for page content,
and Footer
- `ProtectedRoute.tsx`:
  - HOC or wrapper component that checks authentication via `useAuth`
  - Redirects to `/login` if user not authenticated
  - Port guard pattern from `scripts/profile.js`
- Update `src/App.tsx` to use Layout with nested routes

**Task 5: Authentication Context**
- `src/context/AuthContext.tsx`:
  - State: `currentUser` (User | null), `isLoading`
  - Actions: `login(email, password)`, `signup(userData)`, `logout()`
  - Persist current user to localStorage `loggedInUser` key
  - Load user on mount from localStorage
  - "Remember Me" functionality using `rememberEmail` localStorage key
- `src/hooks/useAuth.ts`: Export hook for accessing AuthContext
- Integration:
  - Header component uses `useAuth` to show appropriate navigation
  - ProtectedRoute uses `useAuth` to guard routes

Phase 3: Feature Migration - Pages & Core Functionality

This phase migrates all existing pages to React components, maintaining feature parity with the vanilla JS implementation.

Task 1: Migrate Authentication Pages
Convert login, signup, and forgot password flows to React components.

• Create src/pages/Login/ - Port form and validation from scripts/login.js, use AuthContext for login action
• Create src/pages/Signup/ - Port registration form from scripts/signup.js with validation
• Create src/pages/ForgotPassword/ - Port 3-step OTP flow from scripts/forgot-password.js
• Migrate corresponding styles from styling/login.css, styling/signup.css, styling/forgot-password.css
• Use shared Input and Button components
• Implement form validation with React Hook Form or native controlled components

Task 2: Migrate Dashboard Page
Convert the dashboard with its upload modal and navigation features.

• Create src/pages/Dashboard/ - Port layout and card grid from pages/dashboard.html and scripts/dashboard.js
• Create dashboard-specific components: StatsCard, FeatureCard, QuickActions
• Implement upload modal trigger (modal content handled in Upload feature)
• Migrate styles from styling/dashboard.css
• Add animation effects matching existing card hover and entrance animations

Task 3: Migrate Notes Browsing Page
Convert the notes listing with filtering and search functionality.

• Create src/pages/Notes/ - Port notes grid and filtering from scripts/notes.js
• Create src/components/notes/NoteCard/ - Individual note card component
• Create src/components/notes/NoteFilters/ - Branch and semester dropdown filters
• Create src/components/notes/NoteDetailModal/ - Modal for viewing note details with download link
• Implement search with debounce using useNotes hook (port debounce from scripts/utils.js)
• Migrate styles from styling/notes.css

Task 4: Migrate Profile Page
Convert user profile management with edit and password change functionality.

• Create src/pages/Profile/ - Port profile form from scripts/profile.js
• Implement edit mode toggle for profile fields
• Create password change form with strength meter
• Use AuthContext for retrieving and updating user data
• Migrate styles from styling/profile.css
• Add toast notifications for save/error feedback

Task 5: Migrate Upload Page
Convert the file upload form with cascading dropdown selections.

• Create src/pages/Upload/ - Port upload form from scripts/upload.js
• Implement cascading dropdowns: Branch → Semester → Subject using useParameters hook
• Support custom option input for each dropdown level
• Create file input component with drag-and-drop support
• Form validation before submission
• Migrate styles from styling/upload.css

🤖 Prompt for AI agents

Migrate all core pages to React, maintaining feature parity with the vanilla
JavaScript implementation. Use the shared components and hooks built in Phase 2.

**Task 1: Authentication Pages**
- `src/pages/Login/`:
  - Port form structure from `scripts/login.js`
  - Form fields: email, password, remember me checkbox
  - Use shared `Input` and `Button` components
  - Form validation: email format, required fields
  - Call `login()` from `useAuth` hook
  - Navigate to dashboard on success
  - Migrate styles from `styling/login.css` to CSS module
- `src/pages/Signup/`:
  - Port registration form from `scripts/signup.js`
  - Form fields: username, email, password, confirm password
  - Validation: email format, password match, password strength
  - Call `signup()` from `useAuth` hook
  - Migrate styles from `styling/signup.css`
- `src/pages/ForgotPassword/`:
  - Port 3-step OTP flow from `scripts/forgot-password.js`
  - Step 1: Email input
  - Step 2: OTP verification
  - Step 3: New password entry
  - State management for current step
  - Migrate styles from `styling/forgot-password.css`

**Task 2: Dashboard Page**
- `src/pages/Dashboard/`:
- Port layout from `pages/dashboard.html` and logic from `scripts/dashboard.js`
  - Create `StatsCard` component for displaying statistics
  - Create `FeatureCard` component for feature navigation cards
  - Create `QuickActions` component for quick action buttons
  - Upload modal trigger button (modal content from Upload page)
  - Card grid layout with responsive design
  - Hover animations and entrance animations
  - Migrate styles from `styling/dashboard.css`

**Task 3: Notes Browsing Page**
- `src/pages/Notes/`:
  - Port notes grid and filtering from `scripts/notes.js`
  - Use `useNotes` hook for fetching and filtering notes data
  - Search input with debounce (port debounce utility from `scripts/utils.js`)
  - Filter by branch and semester dropdowns
  - Grid layout of note cards
  - Migrate styles from `styling/notes.css`
- `src/components/notes/NoteCard/`:
  - Individual note display with title, description, metadata
  - Click to open detail modal
- `src/components/notes/NoteFilters/`:
  - Branch and semester dropdown filters
  - Use `useParameters` hook for filter options
- `src/components/notes/NoteDetailModal/`:
  - Modal displaying full note details
  - Download link for note file
  - Use shared `Modal` component

**Task 4: Profile Page**
- `src/pages/Profile/`:
  - Port profile form from `scripts/profile.js`
  - Display current user information from `useAuth` hook
  - Edit mode toggle (view mode vs edit mode)
  - Editable fields: username, email, profile picture, bio
  - Password change section:
    - Current password, new password, confirm password
    - Password strength meter
  - Save button calls `updateUser()` from AuthContext
  - Toast notifications for success/error using shared `Toast` component
  - Migrate styles from `styling/profile.css`

**Task 5: Upload Page**
- `src/pages/Upload/`:
  - Port upload form from `scripts/upload.js`
  - Use `useParameters` hook to fetch branch/semester/subject data
  - Cascading dropdowns:
    - Branch selection → loads semesters for that branch
    - Semester selection → loads subjects for that semester
    - Each level supports custom option input
  - File input with drag-and-drop support
  - File metadata inputs: title, description
  - Form validation before submission
  - Migrate styles from `styling/upload.css`

Phase 4: Feature Migration - Interactive Tools

This phase migrates the more complex interactive features that require specialized state management.

Task 1: Migrate JotPad Feature
Convert the dual-mode note-taking application with markdown editor and canvas drawing.

• Create src/pages/JotPad/ - Main container managing text/draw mode toggle
• Create src/components/jotpad/MarkdownEditor/ - Port text editor with toolbar from scripts/jotpad.js
• Create src/components/jotpad/MarkdownPreview/ - Live preview panel using ported scripts/markdown-parser.js logic
• Create src/components/jotpad/DrawingCanvas/ - Canvas component with pen/eraser tools, touch support
• Implement auto-save to localStorage via useJotpad hook
• Port PDF export functionality using jsPDF and html2canvas (same CDN dependencies)
• Migrate styles from styling/jotpad.css

Task 2: Migrate Todo List Feature
Convert the task management system with full CRUD operations.

• Create src/pages/TodoList/ - Port todo list from scripts/todolist.js
• Create src/components/todo/TodoItem/ - Individual todo with edit, complete, delete actions
• Create src/components/todo/TodoInput/ - New todo input form
• Create src/components/todo/TodoStats/ - Total and completed count display
• Implement optimistic updates with TanStack Query mutations via useTodos hook
• Port bulk operations: clear all, clear completed
• Migrate styles from styling/todolist.css

Task 3: Migrate Study Tracker Feature
Convert the study session tracking with Chart.js visualization.

• Create src/pages/StudyTracker/ - Port tracker from scripts/study-tracker.js
• Create src/components/study/TimerControl/ - Start/stop timer with subject selection
• Create src/components/study/SessionChart/ - Chart.js bar chart for session visualization
• Create src/components/study/ExportButton/ - JSON export functionality
• Use useStudySessions hook for data persistence and aggregation
• Integrate Chart.js (consider react-chartjs-2 wrapper for React integration)
• Migrate styles from styling/study-tracker.css

Task 4: Migrate Landing Page and Global Features
Convert the homepage with hero section, features, testimonials, and global utilities.

• Create src/pages/Home/ - Port landing page from index.html
• Create src/components/home/Hero/ - Hero section with typewriter animation (port from scripts/script.js)
• Create src/components/home/Features/ - Features grid section
• Create src/components/home/Testimonials/ - Testimonial carousel with auto-scroll
• Create src/components/common/BackToTop/ - Scroll-to-top button with visibility toggle
• Port AOS (Animate On Scroll) integration or replace with Framer Motion
• Migrate styles from styling/landing.css and related files

Task 5: Integration Testing and Cleanup
Final integration of all components and removal of legacy code.

• Verify all routes work correctly with React Router
• Test authentication flow end-to-end (signup → login → protected pages → logout)
• Verify localStorage data migration compatibility (existing users can still access their data)
• Test dark/light theme persistence and toggle
• Validate responsive design across breakpoints
• Remove or archive legacy scripts/, pages/, styling/ directories
• Update README with new project structure and development instructions

🤖 Prompt for AI agents

Migrate the complex interactive features (JotPad, TodoList, Study Tracker,
Landing Page) and perform final integration testing. These features require
specialized state management and interactions.

**Task 1: JotPad Feature**
- `src/pages/JotPad/`:
  - Main container component managing mode toggle (text mode vs draw mode)
  - State for current mode
  - Renders either MarkdownEditor or DrawingCanvas based on mode
  - Port structure from `scripts/jotpad.js`
  - Migrate styles from `styling/jotpad.css`
- `src/components/jotpad/MarkdownEditor/`:
  - Textarea for markdown input
  - Toolbar with formatting buttons (bold, italic, heading, list, etc.)
  - Split view: editor on left, live preview on right
  - Auto-save functionality using `useJotpad` hook
- `src/components/jotpad/MarkdownPreview/`:
  - Live preview panel rendering markdown as HTML
  - Port markdown parsing logic from `scripts/markdown-parser.js`
  - Sanitize HTML output for security
- `src/components/jotpad/DrawingCanvas/`:
  - HTML5 canvas element
  - Drawing tools: pen, eraser, color picker, brush size
  - Touch support for mobile/tablet drawing
  - Clear canvas button
  - Save canvas data to localStorage via `useJotpad` hook
- PDF Export:
  - Install jsPDF and html2canvas
  - Export button that captures current content as PDF
  - Port export logic from `scripts/jotpad.js`

**Task 2: Todo List Feature**
- `src/pages/TodoList/`:
  - Port todo list from `scripts/todolist.js`
  - Use `useTodos` hook for data fetching and mutations
  - TodoInput component for adding new todos
  - List of TodoItem components
  - TodoStats component showing counts
  - Bulk action buttons: "Clear All", "Clear Completed"
  - Migrate styles from `styling/todolist.css`
- `src/components/todo/TodoItem/`:
  - Individual todo display with text and completion status
  - Checkbox to toggle completion
  - Edit button/mode for modifying todo text
  - Delete button
  - Actions use mutations from `useTodos` with optimistic updates
- `src/components/todo/TodoInput/`:
  - Input field for new todo text
  - Add button
  - Submit handler calls `addTodo` mutation
- `src/components/todo/TodoStats/`:
  - Display total todos count
  - Display completed todos count

**Task 3: Study Tracker Feature**
- `src/pages/StudyTracker/`:
  - Port tracker from `scripts/study-tracker.js`
  - Use `useStudySessions` hook for data
  - TimerControl component for starting/stopping sessions
  - SessionChart component for visualization
  - ExportButton component for data export
  - Migrate styles from `styling/study-tracker.css`
- `src/components/study/TimerControl/`:
  - Subject selection dropdown (use `useParameters` for subject list)
  - Timer display (minutes:seconds)
  - Start/Stop button
  - State for tracking active session (start time, subject)
  - On stop, save session via `useStudySessions` mutation
- `src/components/study/SessionChart/`:
  - Install `react-chartjs-2` and `chart.js`
  - Bar chart showing study duration per subject
  - Aggregate session data from `useStudySessions`
  - Chart configuration matching existing Chart.js setup
- `src/components/study/ExportButton/`:
  - Export button
  - Download study session data as JSON file

**Task 4: Landing Page and Global Features**
- `src/pages/Home/`:
  - Port landing page structure from `index.html`
  - Compose Hero, Features, Testimonials components
  - Migrate styles from `styling/landing.css`
- `src/components/home/Hero/`:
  - Hero section with headline and CTA
  - Typewriter animation effect (port from `scripts/script.js`)
- Consider using a library like `react-type-animation` or implement custom
effect
- `src/components/home/Features/`:
  - Features grid section
  - Feature cards with icon, title, description
  - Responsive grid layout
- `src/components/home/Testimonials/`:
  - Testimonial carousel with auto-scroll
  - Navigation dots/arrows
  - Consider using `react-slick` or implement custom carousel
- `src/components/common/BackToTop/`:
  - Floating button that appears when scrolled down
  - Click handler scrolls to top
  - Visibility toggle based on scroll position
- Animations:
  - Option 1: Port AOS (Animate On Scroll) library integration
  - Option 2: Replace with Framer Motion for React-native animations

**Task 5: Integration Testing and Cleanup**
- Testing:
  - Verify all routes accessible via React Router
  - Test complete authentication flow:
    - Signup → creates user in localStorage
    - Login → sets current user, redirects to dashboard
    - Protected routes → redirect to login when not authenticated
    - Logout → clears current user, redirects to home
  - Verify localStorage data compatibility:
    - Existing `notesvault-todos` data loads correctly
    - Existing user data works with new auth system
    - JotPad content and canvas data preserved
  - Test theme toggle:
    - Dark/light mode switch works
    - Theme preference persists across sessions
  - Validate responsive design:
    - Test on mobile, tablet, desktop breakpoints
    - Ensure all features work on different screen sizes
- Cleanup:
- Remove or archive legacy directories: `scripts/`, `pages/`, `styling/`,
`components/`
  - Keep `backend/` directory for future API development
  - Move `data/notes.json` and `data/parameters.json` to `frontend/public/data/`
- Documentation:
  - Update README with:
    - New project structure (React architecture)
    - Development setup instructions (frontend + backend)
    - Build and deployment instructions
    - Technology stack overview

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Set up the React project foundation with Vite, TypeScript, TanStack Query, and
React Router. This phase establishes the baseline project structure and
configuration.

**Task 1: Initialize Vite + React + TypeScript Project**
- Create a new `frontend/` directory alongside the existing `backend/`
- Initialize Vite project using the React + TypeScript template
- Configure `tsconfig.json` with path aliases: `@/components`, `@/hooks`,
`@/utils`, `@/types`, `@/styles`, `@/context`, `@/services`
- Set up ESLint and Prettier with React-specific rules
- Create folder structure:
  - `src/components/` (UI components)
  - `src/pages/` (page components)
  - `src/hooks/` (custom hooks)
  - `src/utils/` (utilities)
  - `src/types/` (TypeScript interfaces)
  - `src/styles/` (global styles and CSS modules)
  - `src/context/` (React contexts)
  - `src/services/` (data layer services)
- Add npm scripts in `package.json` for development server that can run
alongside the Flask backend

**Task 2: Install and Configure Core Libraries**
- Install dependencies: `@tanstack/react-query`,
`@tanstack/react-query-devtools`, `react-router-dom`
- In `src/App.tsx`, set up `QueryClientProvider` with sensible default
configuration (staleTime, cacheTime, retry logic)
- Set up React Router with `BrowserRouter`
- Create `src/routes/index.tsx` with route configuration file
- Add React Query DevTools component for development environment
- Create placeholder route components for: Dashboard, Notes, JotPad, TodoList,
StudyTracker, Profile, Login, Signup, ForgotPassword, Upload

**Task 3: Migrate Design System**
- Copy `styling/variables.css` to `src/styles/variables.css` (preserves CSS
custom properties for colors, spacing, typography)
- Copy `styling/base.css` to `src/styles/base.css` (global resets and base
styles)
- Create `src/types/theme.ts` with TypeScript interfaces mirroring the CSS
variable structure
- Implement `src/context/ThemeContext.tsx` with:
  - State for current theme (light/dark)
  - Toggle function for switching themes
  - Persistence to localStorage
  - Logic that replaces `setupThemeToggle` from `scripts/script.js`
- Create `src/hooks/useTheme.ts` hook that provides access to theme state and
toggle function
- Configure Vite for CSS Modules support in `vite.config.ts`

**Task 4: Define TypeScript Types**
- `src/types/note.ts`: Interface matching the structure in `data/notes.json`
(id, title, description, branch, semester, subject, downloadUrl, etc.)
- `src/types/user.ts`: Interface matching localStorage user schema (username,
email, password hash, profile fields)
- `src/types/todo.ts`: Interface for todo items in `notesvault-todos` (id, text,
completed, timestamp)
- `src/types/study-session.ts`: Interface for study session data (subject,
duration, timestamp)
- `src/types/parameters.ts`: Interfaces for Branch, Semester, Subject matching
`data/parameters.json` structure
- `src/types/jotpad.ts`: Interfaces for JotPad state (markdown content, canvas
data)
===============================================================================

Task: 2

Build the core infrastructure including data services, TanStack Query hooks,
shared UI components, layout structure, and authentication context. This
provides reusable building blocks for all features.

**Task 1: Data Service Abstraction Layer**
- `src/services/storage.ts`: Generic localStorage utilities
  - Functions: `getItem<T>()`, `setItem()`, `removeItem()`, `clear()`
  - JSON serialization/deserialization with error handling
  - Extract pattern from `scripts/utils.js`
- `src/services/authService.ts`: User authentication operations
- Functions: `getUsers()`, `saveUser()`, `getUserByEmail()`,
`validateCredentials()`, `getCurrentUser()`, `setCurrentUser()`, `logout()`
  - SHA-256 password hashing utility (port from `scripts/profile.js`)
  - Manages `loggedInUser` and user data in localStorage
- `src/services/todoService.ts`: Todo CRUD against `notesvault-todos` key
- Functions: `getTodos()`, `addTodo()`, `updateTodo()`, `deleteTodo()`,
`clearCompleted()`, `clearAll()`
- `src/services/studyService.ts`: Study session management
  - Functions: `getSessions()`, `addSession()`, `exportSessions()`
- `src/services/jotpadService.ts`: JotPad content persistence
- Functions: `loadNoteContent()`, `saveNoteContent()`, `loadCanvasData()`,
`saveCanvasData()`
- `src/services/notesService.ts`: Fetch static JSON files
- Functions: `fetchNotes()` from `data/notes.json`, `fetchParameters()` from
`data/parameters.json`
  - Use `fetch()` API to load from public directory

**Task 2: TanStack Query Hooks**
- `src/hooks/useNotes.ts`:
  - `useQuery` for fetching notes with filtering by branch, semester, subject
  - Search functionality with debounce
- `src/hooks/useParameters.ts`:
  - `useQuery` for fetching academic hierarchy (branches, semesters, subjects)
- `src/hooks/useTodos.ts`:
  - `useQuery` for fetching todos
  - `useMutation` for add, update, delete with optimistic updates
  - Cache invalidation on mutations
- `src/hooks/useStudySessions.ts`:
  - `useQuery` for fetching sessions
  - `useMutation` for adding sessions
- `src/hooks/useJotpad.ts`:
  - `useQuery` for loading content
  - `useMutation` for saving with auto-save support
- `src/hooks/useAuth.ts`:
  - Integration with AuthContext
  - Queries for current user state

**Task 3: Shared UI Components**
Each component should be in its own directory with `index.tsx` and
`styles.module.css`:
- `Button`: Props for variants (primary, secondary, outline, danger), size,
disabled, onClick. Match styling from `styling/button.css`
- `Card`: Container with optional header, body, footer slots. Hover effects and
shadows
- `Modal`: Backdrop overlay, centered content, close button, click outside to
close, accessibility (focus trap, ESC key)
- `Input`: Text input with label, error message, validation states, icons
support
- `Toast`: Notification component with types (success, error, info, warning),
auto-dismiss, position. Port pattern from `scripts/profile.js` showToast
- `Loading`: Spinner and skeleton loader components

**Task 4: Layout Components**
- `Header`: 
- Port structure from `components/header.html` and styles from
`styling/header.css`
  - Navigation links to all main pages
  - Theme toggle button using `useTheme` hook
- Auth-aware menu: show Login/Signup when logged out, Profile/Logout when logged
in
  - Use `useAuth` hook to access authentication state
- `Footer`:
  - Port from `components/footer.html` and `styling/footer.css`
  - Links and copyright information
- `Layout.tsx`:
- Wrapper component that renders Header, React Router `Outlet` for page content,
and Footer
- `ProtectedRoute.tsx`:
  - HOC or wrapper component that checks authentication via `useAuth`
  - Redirects to `/login` if user not authenticated
  - Port guard pattern from `scripts/profile.js`
- Update `src/App.tsx` to use Layout with nested routes

**Task 5: Authentication Context**
- `src/context/AuthContext.tsx`:
  - State: `currentUser` (User | null), `isLoading`
  - Actions: `login(email, password)`, `signup(userData)`, `logout()`
  - Persist current user to localStorage `loggedInUser` key
  - Load user on mount from localStorage
  - "Remember Me" functionality using `rememberEmail` localStorage key
- `src/hooks/useAuth.ts`: Export hook for accessing AuthContext
- Integration:
  - Header component uses `useAuth` to show appropriate navigation
  - ProtectedRoute uses `useAuth` to guard routes
===============================================================================

Task: 3

Migrate all core pages to React, maintaining feature parity with the vanilla
JavaScript implementation. Use the shared components and hooks built in Phase 2.

**Task 1: Authentication Pages**
- `src/pages/Login/`:
  - Port form structure from `scripts/login.js`
  - Form fields: email, password, remember me checkbox
  - Use shared `Input` and `Button` components
  - Form validation: email format, required fields
  - Call `login()` from `useAuth` hook
  - Navigate to dashboard on success
  - Migrate styles from `styling/login.css` to CSS module
- `src/pages/Signup/`:
  - Port registration form from `scripts/signup.js`
  - Form fields: username, email, password, confirm password
  - Validation: email format, password match, password strength
  - Call `signup()` from `useAuth` hook
  - Migrate styles from `styling/signup.css`
- `src/pages/ForgotPassword/`:
  - Port 3-step OTP flow from `scripts/forgot-password.js`
  - Step 1: Email input
  - Step 2: OTP verification
  - Step 3: New password entry
  - State management for current step
  - Migrate styles from `styling/forgot-password.css`

**Task 2: Dashboard Page**
- `src/pages/Dashboard/`:
- Port layout from `pages/dashboard.html` and logic from `scripts/dashboard.js`
  - Create `StatsCard` component for displaying statistics
  - Create `FeatureCard` component for feature navigation cards
  - Create `QuickActions` component for quick action buttons
  - Upload modal trigger button (modal content from Upload page)
  - Card grid layout with responsive design
  - Hover animations and entrance animations
  - Migrate styles from `styling/dashboard.css`

**Task 3: Notes Browsing Page**
- `src/pages/Notes/`:
  - Port notes grid and filtering from `scripts/notes.js`
  - Use `useNotes` hook for fetching and filtering notes data
  - Search input with debounce (port debounce utility from `scripts/utils.js`)
  - Filter by branch and semester dropdowns
  - Grid layout of note cards
  - Migrate styles from `styling/notes.css`
- `src/components/notes/NoteCard/`:
  - Individual note display with title, description, metadata
  - Click to open detail modal
- `src/components/notes/NoteFilters/`:
  - Branch and semester dropdown filters
  - Use `useParameters` hook for filter options
- `src/components/notes/NoteDetailModal/`:
  - Modal displaying full note details
  - Download link for note file
  - Use shared `Modal` component

**Task 4: Profile Page**
- `src/pages/Profile/`:
  - Port profile form from `scripts/profile.js`
  - Display current user information from `useAuth` hook
  - Edit mode toggle (view mode vs edit mode)
  - Editable fields: username, email, profile picture, bio
  - Password change section:
    - Current password, new password, confirm password
    - Password strength meter
  - Save button calls `updateUser()` from AuthContext
  - Toast notifications for success/error using shared `Toast` component
  - Migrate styles from `styling/profile.css`

**Task 5: Upload Page**
- `src/pages/Upload/`:
  - Port upload form from `scripts/upload.js`
  - Use `useParameters` hook to fetch branch/semester/subject data
  - Cascading dropdowns:
    - Branch selection → loads semesters for that branch
    - Semester selection → loads subjects for that semester
    - Each level supports custom option input
  - File input with drag-and-drop support
  - File metadata inputs: title, description
  - Form validation before submission
  - Migrate styles from `styling/upload.css`
===============================================================================

Task: 4

Migrate the complex interactive features (JotPad, TodoList, Study Tracker,
Landing Page) and perform final integration testing. These features require
specialized state management and interactions.

**Task 1: JotPad Feature**
- `src/pages/JotPad/`:
  - Main container component managing mode toggle (text mode vs draw mode)
  - State for current mode
  - Renders either MarkdownEditor or DrawingCanvas based on mode
  - Port structure from `scripts/jotpad.js`
  - Migrate styles from `styling/jotpad.css`
- `src/components/jotpad/MarkdownEditor/`:
  - Textarea for markdown input
  - Toolbar with formatting buttons (bold, italic, heading, list, etc.)
  - Split view: editor on left, live preview on right
  - Auto-save functionality using `useJotpad` hook
- `src/components/jotpad/MarkdownPreview/`:
  - Live preview panel rendering markdown as HTML
  - Port markdown parsing logic from `scripts/markdown-parser.js`
  - Sanitize HTML output for security
- `src/components/jotpad/DrawingCanvas/`:
  - HTML5 canvas element
  - Drawing tools: pen, eraser, color picker, brush size
  - Touch support for mobile/tablet drawing
  - Clear canvas button
  - Save canvas data to localStorage via `useJotpad` hook
- PDF Export:
  - Install jsPDF and html2canvas
  - Export button that captures current content as PDF
  - Port export logic from `scripts/jotpad.js`

**Task 2: Todo List Feature**
- `src/pages/TodoList/`:
  - Port todo list from `scripts/todolist.js`
  - Use `useTodos` hook for data fetching and mutations
  - TodoInput component for adding new todos
  - List of TodoItem components
  - TodoStats component showing counts
  - Bulk action buttons: "Clear All", "Clear Completed"
  - Migrate styles from `styling/todolist.css`
- `src/components/todo/TodoItem/`:
  - Individual todo display with text and completion status
  - Checkbox to toggle completion
  - Edit button/mode for modifying todo text
  - Delete button
  - Actions use mutations from `useTodos` with optimistic updates
- `src/components/todo/TodoInput/`:
  - Input field for new todo text
  - Add button
  - Submit handler calls `addTodo` mutation
- `src/components/todo/TodoStats/`:
  - Display total todos count
  - Display completed todos count

**Task 3: Study Tracker Feature**
- `src/pages/StudyTracker/`:
  - Port tracker from `scripts/study-tracker.js`
  - Use `useStudySessions` hook for data
  - TimerControl component for starting/stopping sessions
  - SessionChart component for visualization
  - ExportButton component for data export
  - Migrate styles from `styling/study-tracker.css`
- `src/components/study/TimerControl/`:
  - Subject selection dropdown (use `useParameters` for subject list)
  - Timer display (minutes:seconds)
  - Start/Stop button
  - State for tracking active session (start time, subject)
  - On stop, save session via `useStudySessions` mutation
- `src/components/study/SessionChart/`:
  - Install `react-chartjs-2` and `chart.js`
  - Bar chart showing study duration per subject
  - Aggregate session data from `useStudySessions`
  - Chart configuration matching existing Chart.js setup
- `src/components/study/ExportButton/`:
  - Export button
  - Download study session data as JSON file

**Task 4: Landing Page and Global Features**
- `src/pages/Home/`:
  - Port landing page structure from `index.html`
  - Compose Hero, Features, Testimonials components
  - Migrate styles from `styling/landing.css`
- `src/components/home/Hero/`:
  - Hero section with headline and CTA
  - Typewriter animation effect (port from `scripts/script.js`)
- Consider using a library like `react-type-animation` or implement custom
effect
- `src/components/home/Features/`:
  - Features grid section
  - Feature cards with icon, title, description
  - Responsive grid layout
- `src/components/home/Testimonials/`:
  - Testimonial carousel with auto-scroll
  - Navigation dots/arrows
  - Consider using `react-slick` or implement custom carousel
- `src/components/common/BackToTop/`:
  - Floating button that appears when scrolled down
  - Click handler scrolls to top
  - Visibility toggle based on scroll position
- Animations:
  - Option 1: Port AOS (Animate On Scroll) library integration
  - Option 2: Replace with Framer Motion for React-native animations

**Task 5: Integration Testing and Cleanup**
- Testing:
  - Verify all routes accessible via React Router
  - Test complete authentication flow:
    - Signup → creates user in localStorage
    - Login → sets current user, redirects to dashboard
    - Protected routes → redirect to login when not authenticated
    - Logout → clears current user, redirects to home
  - Verify localStorage data compatibility:
    - Existing `notesvault-todos` data loads correctly
    - Existing user data works with new auth system
    - JotPad content and canvas data preserved
  - Test theme toggle:
    - Dark/light mode switch works
    - Theme preference persists across sessions
  - Validate responsive design:
    - Test on mobile, tablet, desktop breakpoints
    - Ensure all features work on different screen sizes
- Cleanup:
- Remove or archive legacy directories: `scripts/`, `pages/`, `styling/`,
`components/`
  - Keep `backend/` directory for future API development
  - Move `data/notes.json` and `data/parameters.json` to `frontend/public/data/`
- Documentation:
  - Update README with:
    - New project structure (React architecture)
    - Development setup instructions (frontend + backend)
    - Build and deployment instructions
    - Technology stack overview

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For assumption 1 go ahead with option 3 and replan.

💬 Have feedback or questions? Drop into our discord!

@coderabbitai create issues in series
, also mention blocked by, blocks, add relevant labels and describe proper description.

[coderabbitai]

🧩 Analysis chain

@adityai0 I'll create GitHub issues for the React refactoring plan with proper dependencies, labels, and descriptions. This will create 19 issues across 4 phases.

---

🏁 Script executed:

#!/bin/bash

# Set the repository (will be auto-detected by gh cli)
REPO="opensource-society/notesvault"
ASSIGNEE="adityai0"

echo "Creating issues for NotesVault React Refactoring Plan..."
echo "=========================================================="

# Array to store issue numbers for reference
declare -A ISSUES

# Phase 1: Project Foundation & Configuration
echo ""
echo "Creating Phase 1 issues..."
echo "------------------------"

# Phase 1 - Task 1
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 1] Initialize React Project with Vite and TypeScript" \
  --label "enhancement,refactoring,react-migration,phase-1" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Set up the base React application with modern tooling and establish the project structure.

## 🎯 Objectives
- Initialize new Vite project with React and TypeScript template in a \`frontend/\` directory alongside existing \`backend/\`
- Configure path aliases in \`tsconfig.json\` for clean imports (\`@/components\`, \`@/hooks\`, \`@/utils\`)
- Set up ESLint and Prettier with React-specific rules
- Create initial folder structure: \`src/components/\`, \`src/pages/\`, \`src/hooks/\`, \`src/utils/\`, \`src/types/\`, \`src/styles/\`, \`src/context/\`, \`src/services/\`
- Add development scripts to \`package.json\` for running alongside Flask backend

## 📦 Phase
Phase 1: Project Foundation & Configuration

## 🔗 Dependencies
None - This is a foundational task

## ✅ Acceptance Criteria
- [ ] Vite project initialized with React + TypeScript template
- [ ] Path aliases configured in tsconfig.json
- [ ] ESLint and Prettier set up with React rules
- [ ] Complete folder structure created
- [ ] Development scripts added to package.json
- [ ] Project builds and runs successfully" \
  --jq '.number')

ISSUES["p1t1"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 1 Task 1"

# Phase 1 - Task 2
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 1] Configure TanStack Query and React Router" \
  --label "enhancement,refactoring,react-migration,phase-1" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Install and configure the core data fetching and routing libraries.

## 🎯 Objectives
- Install TanStack Query (\`@tanstack/react-query\`) and React Router (\`react-router-dom\`)
- Create \`QueryClientProvider\` wrapper in \`src/App.tsx\` with sensible defaults
- Set up React Router with \`BrowserRouter\` and create route configuration file in \`src/routes/\`
- Add React Query DevTools for development debugging
- Create placeholder route components for all existing pages: Dashboard, Notes, JotPad, TodoList, StudyTracker, Profile, Login, Signup, ForgotPassword, Upload

## 📦 Phase
Phase 1: Project Foundation & Configuration

## 🔗 Dependencies
- Blocked by: #${ISSUES["p1t1"]}

## ✅ Acceptance Criteria
- [ ] TanStack Query and React Router installed
- [ ] QueryClientProvider configured in App.tsx
- [ ] React Router set up with BrowserRouter
- [ ] Route configuration file created
- [ ] React Query DevTools added
- [ ] All placeholder route components created" \
  --jq '.number')

ISSUES["p1t2"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 1 Task 2"

# Phase 1 - Task 3
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 1] Migrate Design System and Theme Configuration" \
  --label "enhancement,refactoring,react-migration,phase-1,design-system" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Convert the existing CSS variables system to work with the React application and set up theme management.

## 🎯 Objectives
- Copy \`styling/variables.css\` and \`styling/base.css\` to \`src/styles/\` as the foundation
- Create TypeScript theme type definitions in \`src/types/theme.ts\` mirroring CSS variables
- Implement \`ThemeContext\` in \`src/context/ThemeContext.tsx\` for dark/light mode toggle (replaces \`setupThemeToggle\` from \`scripts/script.js\`)
- Create \`useTheme\` hook for components to access and toggle theme
- Set up CSS Modules configuration in Vite for component-scoped styling

## 📦 Phase
Phase 1: Project Foundation & Configuration

## 🔗 Dependencies
- Blocked by: #${ISSUES["p1t1"]}

## ✅ Acceptance Criteria
- [ ] CSS variables and base styles copied to src/styles/
- [ ] Theme type definitions created
- [ ] ThemeContext implemented with dark/light mode toggle
- [ ] useTheme hook created
- [ ] CSS Modules configured in Vite
- [ ] Theme persists to localStorage" \
  --jq '.number')

ISSUES["p1t3"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 1 Task 3"

# Phase 1 - Task 4
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 1] Create TypeScript Type Definitions" \
  --label "enhancement,refactoring,react-migration,phase-1,typescript" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Define TypeScript interfaces for all data structures used throughout the application.

## 🎯 Objectives
- Create \`src/types/note.ts\` - Note interface matching \`data/notes.json\` structure
- Create \`src/types/user.ts\` - User interface matching localStorage user schema
- Create \`src/types/todo.ts\` - Todo interface matching \`notesvault-todos\` structure
- Create \`src/types/study-session.ts\` - StudySession interface
- Create \`src/types/parameters.ts\` - Branch, Semester, Subject interfaces matching \`data/parameters.json\`
- Create \`src/types/jotpad.ts\` - JotPad state interfaces for markdown and canvas data

## 📦 Phase
Phase 1: Project Foundation & Configuration

## 🔗 Dependencies
- Blocked by: #${ISSUES["p1t1"]}

## ✅ Acceptance Criteria
- [ ] note.ts type definitions created
- [ ] user.ts type definitions created
- [ ] todo.ts type definitions created
- [ ] study-session.ts type definitions created
- [ ] parameters.ts type definitions created
- [ ] jotpad.ts type definitions created
- [ ] All types match existing data structures" \
  --jq '.number')

ISSUES["p1t4"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 1 Task 4"

# Phase 2: Core Infrastructure & Shared Components
echo ""
echo "Creating Phase 2 issues..."
echo "------------------------"

# Phase 2 - Task 1
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 2] Create Data Service Abstraction Layer" \
  --label "enhancement,refactoring,react-migration,phase-2" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Build a service layer that wraps localStorage operations, preparing for future API integration.

## 🎯 Objectives
- Create \`src/services/storage.ts\` with generic localStorage read/write utilities (extract pattern from \`scripts/utils.js\`)
- Create \`src/services/authService.ts\` wrapping user authentication localStorage operations
- Create \`src/services/todoService.ts\` for todo CRUD operations against \`notesvault-todos\` key
- Create \`src/services/studyService.ts\` for study session operations
- Create \`src/services/jotpadService.ts\` for saving/loading noteContent and canvasData
- Create \`src/services/notesService.ts\` for fetching static notes.json and parameters.json
- Include SHA-256 password hashing utility (port from \`scripts/profile.js\`)

## 📦 Phase
Phase 2: Core Infrastructure & Shared Components

## 🔗 Dependencies
- Blocked by: #${ISSUES["p1t1"]}, #${ISSUES["p1t4"]} (needs type definitions)

## ✅ Acceptance Criteria
- [ ] storage.ts utilities created
- [ ] authService.ts implemented with password hashing
- [ ] todoService.ts CRUD operations implemented
- [ ] studyService.ts implemented
- [ ] jotpadService.ts implemented
- [ ] notesService.ts implemented
- [ ] All services tested with existing data structures" \
  --jq '.number')

ISSUES["p2t1"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 2 Task 1"

# Phase 2 - Task 2
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 2] Implement TanStack Query Hooks" \
  --label "enhancement,refactoring,react-migration,phase-2" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Create custom hooks that wrap the data services with TanStack Query for caching and state management.

## 🎯 Objectives
- Create \`src/hooks/useNotes.ts\` - query for fetching and filtering notes from static JSON
- Create \`src/hooks/useParameters.ts\` - query for academic hierarchy data (branches, semesters, subjects)
- Create \`src/hooks/useTodos.ts\` - queries and mutations for todo CRUD with optimistic updates
- Create \`src/hooks/useStudySessions.ts\` - queries and mutations for study tracking
- Create \`src/hooks/useJotpad.ts\` - queries and mutations for jotpad content persistence
- Create \`src/hooks/useAuth.ts\` - authentication state queries (integrates with AuthContext)

## 📦 Phase
Phase 2: Core Infrastructure & Shared Components

## 🔗 Dependencies
- Blocked by: #${ISSUES["p1t2"]} (needs TanStack Query), #${ISSUES["p2t1"]} (needs services)

## ✅ Acceptance Criteria
- [ ] useNotes hook with filtering and search
- [ ] useParameters hook implemented
- [ ] useTodos hook with optimistic updates
- [ ] useStudySessions hook implemented
- [ ] useJotpad hook with auto-save support
- [ ] useAuth hook implemented
- [ ] All hooks properly cache and invalidate data" \
  --jq '.number')

ISSUES["p2t2"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 2 Task 2"

# Phase 2 - Task 3
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 2] Build Shared UI Component Library" \
  --label "enhancement,refactoring,react-migration,phase-2,ui-components" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Create reusable UI components that match existing styling patterns.

## 🎯 Objectives
- Create \`src/components/ui/Button/\` - Button component with variants (primary, secondary, outline, danger) matching \`styling/button.css\`
- Create \`src/components/ui/Card/\` - Card component for notes, stats, profiles
- Create \`src/components/ui/Modal/\` - Modal component with backdrop click handling
- Create \`src/components/ui/Input/\` - Form input component with validation states
- Create \`src/components/ui/Toast/\` - Toast notification component (port pattern from \`scripts/profile.js\`)
- Create \`src/components/ui/Loading/\` - Loading spinner/skeleton components
- Each component should have its own CSS module file

## 📦 Phase
Phase 2: Core Infrastructure & Shared Components

## 🔗 Dependencies
- Blocked by: #${ISSUES["p1t1"]}, #${ISSUES["p1t3"]} (needs design system)

## ✅ Acceptance Criteria
- [ ] Button component with all variants
- [ ] Card component implemented
- [ ] Modal component with accessibility features
- [ ] Input component with validation
- [ ] Toast notification component
- [ ] Loading components (spinner and skeleton)
- [ ] All components have CSS modules
- [ ] Components match existing design patterns" \
  --jq '.number')

ISSUES["p2t3"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 2 Task 3"

# Phase 2 - Task 4
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 2] Create Layout Components" \
  --label "enhancement,refactoring,react-migration,phase-2,layout" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Migrate the header and footer components and create the page layout structure.

## 🎯 Objectives
- Create \`src/components/layout/Header/\` - Port \`components/header.html\` and \`styling/header.css\`, include navigation, theme toggle, auth-aware menu items
- Create \`src/components/layout/Footer/\` - Port \`components/footer.html\` and \`styling/footer.css\`
- Create \`src/components/layout/Layout.tsx\` - Page wrapper that composes Header, main content area, and Footer
- Create \`src/components/layout/ProtectedRoute.tsx\` - Route wrapper that redirects unauthenticated users
- Update \`src/App.tsx\` to use Layout component with React Router Outlet

## 📦 Phase
Phase 2: Core Infrastructure & Shared Components

## 🔗 Dependencies
- Blocked by: #${ISSUES["p1t2"]} (needs React Router), #${ISSUES["p1t3"]} (needs theme), #${ISSUES["p2t3"]} (needs UI components)

## ✅ Acceptance Criteria
- [ ] Header component ported with navigation
- [ ] Footer component ported
- [ ] Layout wrapper component created
- [ ] ProtectedRoute component implemented
- [ ] App.tsx updated to use Layout
- [ ] Theme toggle works in Header
- [ ] Auth-aware navigation displays correctly" \
  --jq '.number')

ISSUES["p2t4"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 2 Task 4"

# Phase 2 - Task 5
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 2] Implement Authentication Context" \
  --label "enhancement,refactoring,react-migration,phase-2,authentication" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Create the authentication state management that replaces localStorage-based session handling.

## 🎯 Objectives
- Create \`src/context/AuthContext.tsx\` with user state, login, logout, signup functions
- Implement session persistence to localStorage \`loggedInUser\` key (maintain compatibility)
- Create \`useAuth\` hook for components to access auth state and actions
- Implement \"Remember Me\" functionality via \`rememberEmail\` key
- Update Header component to show auth-aware navigation (Login/Signup vs Profile/Logout)
- Integrate with ProtectedRoute component for route guarding

## 📦 Phase
Phase 2: Core Infrastructure & Shared Components

## 🔗 Dependencies
- Blocked by: #${ISSUES["p2t1"]} (needs authService), #${ISSUES["p2t4"]} (needs layout components)

## ✅ Acceptance Criteria
- [ ] AuthContext implemented with full state management
- [ ] Session persists to localStorage
- [ ] useAuth hook created
- [ ] Remember Me functionality implemented
- [ ] Header updated with auth-aware navigation
- [ ] ProtectedRoute integrated with auth
- [ ] Maintains compatibility with existing user data" \
  --jq '.number')

ISSUES["p2t5"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 2 Task 5"

# Phase 3: Feature Migration - Pages & Core Functionality
echo ""
echo "Creating Phase 3 issues..."
echo "------------------------"

# Phase 3 - Task 1
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 3] Migrate Authentication Pages" \
  --label "enhancement,refactoring,react-migration,phase-3,authentication" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Convert login, signup, and forgot password flows to React components.

## 🎯 Objectives
- Create \`src/pages/Login/\` - Port form and validation from \`scripts/login.js\`
- Create \`src/pages/Signup/\` - Port registration form from \`scripts/signup.js\`
- Create \`src/pages/ForgotPassword/\` - Port 3-step OTP flow from \`scripts/forgot-password.js\`
- Migrate corresponding styles from \`styling/login.css\`, \`styling/signup.css\`, \`styling/forgot-password.css\`
- Use shared Input and Button components
- Implement form validation with React Hook Form or native controlled components

## 📦 Phase
Phase 3: Feature Migration - Pages & Core Functionality

## 🔗 Dependencies
- Blocked by: #${ISSUES["p2t3"]} (needs UI components), #${ISSUES["p2t5"]} (needs auth context)

## ✅ Acceptance Criteria
- [ ] Login page implemented with validation
- [ ] Signup page implemented with validation
- [ ] Forgot password 3-step flow implemented
- [ ] Styles migrated from existing CSS files
- [ ] Form validation working correctly
- [ ] Integration with AuthContext successful" \
  --jq '.number')

ISSUES["p3t1"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 3 Task 1"

# Phase 3 - Task 2
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 3] Migrate Dashboard Page" \
  --label "enhancement,refactoring,react-migration,phase-3" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Convert the dashboard with its upload modal and navigation features.

## 🎯 Objectives
- Create \`src/pages/Dashboard/\` - Port layout and card grid from \`pages/dashboard.html\` and \`scripts/dashboard.js\`
- Create dashboard-specific components: StatsCard, FeatureCard, QuickActions
- Implement upload modal trigger (modal content handled in Upload feature)
- Migrate styles from \`styling/dashboard.css\`
- Add animation effects matching existing card hover and entrance animations

## 📦 Phase
Phase 3: Feature Migration - Pages & Core Functionality

## 🔗 Dependencies
- Blocked by: #${ISSUES["p2t3"]} (needs UI components), #${ISSUES["p2t4"]} (needs layout)

## ✅ Acceptance Criteria
- [ ] Dashboard page layout implemented
- [ ] StatsCard component created
- [ ] FeatureCard component created
- [ ] QuickActions component created
- [ ] Upload modal trigger functional
- [ ] Styles migrated and animations working
- [ ] Responsive design maintained" \
  --jq '.number')

ISSUES["p3t2"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 3 Task 2"

# Phase 3 - Task 3
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 3] Migrate Notes Browsing Page" \
  --label "enhancement,refactoring,react-migration,phase-3" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Convert the notes listing with filtering and search functionality.

## 🎯 Objectives
- Create \`src/pages/Notes/\` - Port notes grid and filtering from \`scripts/notes.js\`
- Create \`src/components/notes/NoteCard/\` - Individual note card component
- Create \`src/components/notes/NoteFilters/\` - Branch and semester dropdown filters
- Create \`src/components/notes/NoteDetailModal/\` - Modal for viewing note details with download link
- Implement search with debounce using \`useNotes\` hook
- Migrate styles from \`styling/notes.css\`

## 📦 Phase
Phase 3: Feature Migration - Pages & Core Functionality

## 🔗 Dependencies
- Blocked by: #${ISSUES["p2t2"]} (needs useNotes hook), #${ISSUES["p2t3"]} (needs UI components)

## ✅ Acceptance Criteria
- [ ] Notes page with grid layout implemented
- [ ] NoteCard component created
- [ ] NoteFilters component with dropdowns
- [ ] NoteDetailModal implemented
- [ ] Search with debounce working
- [ ] Styles migrated successfully
- [ ] Filtering and search functionality complete" \
  --jq '.number')

ISSUES["p3t3"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 3 Task 3"

# Phase 3 - Task 4
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 3] Migrate Profile Page" \
  --label "enhancement,refactoring,react-migration,phase-3" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Convert user profile management with edit and password change functionality.

## 🎯 Objectives
- Create \`src/pages/Profile/\` - Port profile form from \`scripts/profile.js\`
- Implement edit mode toggle for profile fields
- Create password change form with strength meter
- Use AuthContext for retrieving and updating user data
- Migrate styles from \`styling/profile.css\`
- Add toast notifications for save/error feedback

## 📦 Phase
Phase 3: Feature Migration - Pages & Core Functionality

## 🔗 Dependencies
- Blocked by: #${ISSUES["p2t3"]} (needs UI components), #${ISSUES["p2t5"]} (needs auth context)

## ✅ Acceptance Criteria
- [ ] Profile page implemented
- [ ] Edit mode toggle functional
- [ ] Password change form with strength meter
- [ ] Profile updates persisting correctly
- [ ] Toast notifications working
- [ ] Styles migrated successfully" \
  --jq '.number')

ISSUES["p3t4"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 3 Task 4"

# Phase 3 - Task 5
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 3] Migrate Upload Page" \
  --label "enhancement,refactoring,react-migration,phase-3" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Convert the file upload form with cascading dropdown selections.

## 🎯 Objectives
- Create \`src/pages/Upload/\` - Port upload form from \`scripts/upload.js\`
- Implement cascading dropdowns: Branch → Semester → Subject using \`useParameters\` hook
- Support custom option input for each dropdown level
- Create file input component with drag-and-drop support
- Form validation before submission
- Migrate styles from \`styling/upload.css\`

## 📦 Phase
Phase 3: Feature Migration - Pages & Core Functionality

## 🔗 Dependencies
- Blocked by: #${ISSUES["p2t2"]} (needs useParameters hook), #${ISSUES["p2t3"]} (needs UI components)

## ✅ Acceptance Criteria
- [ ] Upload page implemented
- [ ] Cascading dropdowns functional
- [ ] Custom option input supported
- [ ] Drag-and-drop file input working
- [ ] Form validation implemented
- [ ] Styles migrated successfully" \
  --jq '.number')

ISSUES["p3t5"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 3 Task 5"

# Phase 4: Feature Migration - Interactive Tools
echo ""
echo "Creating Phase 4 issues..."
echo "------------------------"

# Phase 4 - Task 1
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 4] Migrate JotPad Feature" \
  --label "enhancement,refactoring,react-migration,phase-4" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Convert the dual-mode note-taking application with markdown editor and canvas drawing.

## 🎯 Objectives
- Create \`src/pages/JotPad/\` - Main container managing text/draw mode toggle
- Create \`src/components/jotpad/MarkdownEditor/\` - Port text editor with toolbar from \`scripts/jotpad.js\`
- Create \`src/components/jotpad/MarkdownPreview/\` - Live preview panel using ported markdown parser logic
- Create \`src/components/jotpad/DrawingCanvas/\` - Canvas component with pen/eraser tools, touch support
- Implement auto-save to localStorage via \`useJotpad\` hook
- Port PDF export functionality using jsPDF and html2canvas
- Migrate styles from \`styling/jotpad.css\`

## 📦 Phase
Phase 4: Feature Migration - Interactive Tools

## 🔗 Dependencies
- Blocked by: #${ISSUES["p2t2"]} (needs useJotpad hook), #${ISSUES["p2t3"]} (needs UI components)

## ✅ Acceptance Criteria
- [ ] JotPad page with mode toggle implemented
- [ ] MarkdownEditor component with toolbar
- [ ] MarkdownPreview with live rendering
- [ ] DrawingCanvas with tools and touch support
- [ ] Auto-save functionality working
- [ ] PDF export functional
- [ ] Styles migrated successfully" \
  --jq '.number')

ISSUES["p4t1"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 4 Task 1"

# Phase 4 - Task 2
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 4] Migrate Todo List Feature" \
  --label "enhancement,refactoring,react-migration,phase-4" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Convert the task management system with full CRUD operations.

## 🎯 Objectives
- Create \`src/pages/TodoList/\` - Port todo list from \`scripts/todolist.js\`
- Create \`src/components/todo/TodoItem/\` - Individual todo with edit, complete, delete actions
- Create \`src/components/todo/TodoInput/\` - New todo input form
- Create \`src/components/todo/TodoStats/\` - Total and completed count display
- Implement optimistic updates with TanStack Query mutations via \`useTodos\` hook
- Port bulk operations: clear all, clear completed
- Migrate styles from \`styling/todolist.css\`

## 📦 Phase
Phase 4: Feature Migration - Interactive Tools

## 🔗 Dependencies
- Blocked by: #${ISSUES["p2t2"]} (needs useTodos hook), #${ISSUES["p2t3"]} (needs UI components)

## ✅ Acceptance Criteria
- [ ] TodoList page implemented
- [ ] TodoItem component with all actions
- [ ] TodoInput component functional
- [ ] TodoStats component showing counts
- [ ] Optimistic updates working
- [ ] Bulk operations functional
- [ ] Styles migrated successfully" \
  --jq '.number')

ISSUES["p4t2"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 4 Task 2"

# Phase 4 - Task 3
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 4] Migrate Study Tracker Feature" \
  --label "enhancement,refactoring,react-migration,phase-4" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Convert the study session tracking with Chart.js visualization.

## 🎯 Objectives
- Create \`src/pages/StudyTracker/\` - Port tracker from \`scripts/study-tracker.js\`
- Create \`src/components/study/TimerControl/\` - Start/stop timer with subject selection
- Create \`src/components/study/SessionChart/\` - Chart.js bar chart for session visualization
- Create \`src/components/study/ExportButton/\` - JSON export functionality
- Use \`useStudySessions\` hook for data persistence and aggregation
- Integrate Chart.js (consider react-chartjs-2 wrapper)
- Migrate styles from \`styling/study-tracker.css\`

## 📦 Phase
Phase 4: Feature Migration - Interactive Tools

## 🔗 Dependencies
- Blocked by: #${ISSUES["p2t2"]} (needs useStudySessions hook), #${ISSUES["p2t3"]} (needs UI components)

## ✅ Acceptance Criteria
- [ ] StudyTracker page implemented
- [ ] TimerControl component functional
- [ ] SessionChart with Chart.js visualization
- [ ] Export functionality working
- [ ] Data persistence via useStudySessions
- [ ] Chart.js properly integrated
- [ ] Styles migrated successfully" \
  --jq '.number')

ISSUES["p4t3"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 4 Task 3"

# Phase 4 - Task 4
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 4] Migrate Landing Page and Global Features" \
  --label "enhancement,refactoring,react-migration,phase-4" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Convert the homepage with hero section, features, testimonials, and global utilities.

## 🎯 Objectives
- Create \`src/pages/Home/\` - Port landing page from \`index.html\`
- Create \`src/components/home/Hero/\` - Hero section with typewriter animation
- Create \`src/components/home/Features/\` - Features grid section
- Create \`src/components/home/Testimonials/\` - Testimonial carousel with auto-scroll
- Create \`src/components/common/BackToTop/\` - Scroll-to-top button with visibility toggle
- Port AOS (Animate On Scroll) integration or replace with Framer Motion
- Migrate styles from \`styling/landing.css\` and related files

## 📦 Phase
Phase 4: Feature Migration - Interactive Tools

## 🔗 Dependencies
- Blocked by: #${ISSUES["p2t3"]} (needs UI components), #${ISSUES["p2t4"]} (needs layout)

## ✅ Acceptance Criteria
- [ ] Home page layout implemented
- [ ] Hero component with typewriter animation
- [ ] Features grid component
- [ ] Testimonials carousel functional
- [ ] BackToTop button working
- [ ] Animations ported or replaced
- [ ] Styles migrated successfully" \
  --jq '.number')

ISSUES["p4t4"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 4 Task 4"

# Phase 4 - Task 5
ISSUE_NUM=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 4] Integration Testing and Cleanup" \
  --label "enhancement,refactoring,react-migration,phase-4,testing" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Final integration of all components and removal of legacy code.

## 🎯 Objectives
- Verify all routes work correctly with React Router
- Test authentication flow end-to-end (signup → login → protected pages → logout)
- Verify localStorage data migration compatibility
- Test dark/light theme persistence and toggle
- Validate responsive design across breakpoints
- Remove or archive legacy \`scripts/\`, \`pages/\`, \`styling/\` directories
- Update README with new project structure and development instructions

## 📦 Phase
Phase 4: Feature Migration - Interactive Tools

## 🔗 Dependencies
- Blocked by: All Phase 3 and Phase 4 tasks (#${ISSUES["p3t1"]}, #${ISSUES["p3t2"]}, #${ISSUES["p3t3"]}, #${ISSUES["p3t4"]}, #${ISSUES["p3t5"]}, #${ISSUES["p4t1"]}, #${ISSUES["p4t2"]}, #${ISSUES["p4t3"]}, #${ISSUES["p4t4"]})

## ✅ Acceptance Criteria
- [ ] All routes accessible and functional
- [ ] Complete authentication flow tested
- [ ] localStorage compatibility verified
- [ ] Theme persistence working correctly
- [ ] Responsive design validated
- [ ] Legacy directories removed/archived
- [ ] README updated with new documentation
- [ ] All tests passing" \
  --jq '.number')

ISSUES["p4t5"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 4 Task 5"

echo ""
echo "=========================================================="
echo "✅ Successfully created all 19 issues!"
echo ""
echo "Phase 1 Issues: #${ISSUES["p1t1"]}, #${ISSUES["p1t2"]}, #${ISSUES["p1t3"]}, #${ISSUES["p1t4"]}"
echo "Phase 2 Issues: #${ISSUES["p2t1"]}, #${ISSUES["p2t2"]}, #${ISSUES["p2t3"]}, #${ISSUES["p2t4"]}, #${ISSUES["p2t5"]}"
echo "Phase 3 Issues: #${ISSUES["p3t1"]}, #${ISSUES["p3t2"]}, #${ISSUES["p3t3"]}, #${ISSUES["p3t4"]}, #${ISSUES["p3t5"]}"
echo "Phase 4 Issues: #${ISSUES["p4t1"]}, #${ISSUES["p4t2"]}, #${ISSUES["p4t3"]}, #${ISSUES["p4t4"]}, #${ISSUES["p4t5"]}"
echo ""
echo "View all issues: https://github.com/$REPO/issues"

Length of output: 18287

---

I see the issue - the gh CLI doesn't support the --jq flag. Let me fix the script to properly capture issue numbers from the output:

---

🏁 Script executed:

#!/bin/bash

# Set the repository
REPO="opensource-society/notesvault"
ASSIGNEE="adityai0"

echo "Creating issues for NotesVault React Refactoring Plan..."
echo "=========================================================="

# Array to store issue numbers
declare -A ISSUES

# Function to extract issue number from gh output
extract_issue_number() {
    # gh issue create outputs URL like: https://github.com/owner/repo/issues/123
    grep -oP 'issues/\K[0-9]+' | head -1
}

# Phase 1: Project Foundation & Configuration
echo ""
echo "Creating Phase 1 issues..."
echo "------------------------"

# Phase 1 - Task 1
OUTPUT=$(gh issue create \
  --repo "$REPO" \
  --title "[Phase 1] Initialize React Project with Vite and TypeScript" \
  --label "enhancement,refactoring,react-migration,phase-1" \
  --assignee "$ASSIGNEE" \
  --body "## 📋 Task Description
Set up the base React application with modern tooling and establish the project structure.

## 🎯 Objectives
- Initialize new Vite project with React and TypeScript template in a \`frontend/\` directory alongside existing \`backend/\`
- Configure path aliases in \`tsconfig.json\` for clean imports (\`@/components\`, \`@/hooks\`, \`@/utils\`)
- Set up ESLint and Prettier with React-specific rules
- Create initial folder structure: \`src/components/\`, \`src/pages/\`, \`src/hooks/\`, \`src/utils/\`, \`src/types/\`, \`src/styles/\`, \`src/context/\`, \`src/services/\`
- Add development scripts to \`package.json\` for running alongside Flask backend

## 📦 Phase
Phase 1: Project Foundation & Configuration

## 🔗 Dependencies
None - This is a foundational task

## ✅ Acceptance Criteria
- [ ] Vite project initialized with React + TypeScript template
- [ ] Path aliases configured in tsconfig.json
- [ ] ESLint and Prettier set up with React rules
- [ ] Complete folder structure created
- [ ] Development scripts added to package.json
- [ ] Project builds and runs successfully" 2>&1)

ISSUE_NUM=$(echo "$OUTPUT" | extract_issue_number)
ISSUES["p1t1"]=$ISSUE_NUM
echo "✓ Created Issue #$ISSUE_NUM: Phase 1 Task 1"
echo "$OUTPUT" | grep "https://github.com"

# Get the list of recently created issues to capture numbers
echo ""
echo "Fetching issue numbers..."
RECENT_ISSUES=$(gh issue list --repo "$REPO" --label "react-migration" --limit 30 --json number,title --jq '.[] | "\(.number)|\(.title)"')

# Parse issue numbers by title matching
while IFS='|' read -r num title; do
    case "$title" in
        *"Initialize React Project"*) ISSUES["p1t1"]=$num ;;
        *"Configure TanStack Query and React Router"*) ISSUES["p1t2"]=$num ;;
        *"Migrate Design System and Theme"*) ISSUES["p1t3"]=$num ;;
        *"Create TypeScript Type Definitions"*) ISSUES["p1t4"]=$num ;;
        *"Create Data Service Abstraction"*) ISSUES["p2t1"]=$num ;;
        *"Implement TanStack Query Hooks"*) ISSUES["p2t2"]=$num ;;
        *"Build Shared UI Component"*) ISSUES["p2t3"]=$num ;;
        *"Create Layout Components"*) ISSUES["p2t4"]=$num ;;
        *"Implement Authentication Context"*) ISSUES["p2t5"]=$num ;;
        *"Migrate Authentication Pages"*) ISSUES["p3t1"]=$num ;;
        *"Migrate Dashboard Page"*) ISSUES["p3t2"]=$num ;;
        *"Migrate Notes Browsing"*) ISSUES["p3t3"]=$num ;;
        *"Migrate Profile Page"*) ISSUES["p3t4"]=$num ;;
        *"Migrate Upload Page"*) ISSUES["p3t5"]=$num ;;
        *"Migrate JotPad Feature"*) ISSUES["p4t1"]=$num ;;
        *"Migrate Todo List Feature"*) ISSUES["p4t2"]=$num ;;
        *"Migrate Study Tracker"*) ISSUES["p4t3"]=$num ;;
        *"Migrate Landing Page"*) ISSUES["p4t4"]=$num ;;
        *"Integration Testing and Cleanup"*) ISSUES["p4t5"]=$num ;;
    esac
done <<< "$RECENT_ISSUES"

echo ""
echo "=========================================================="
echo "✅ Successfully created all 19 issues!"
echo ""
echo "📊 Issue Summary:"
echo ""
echo "**Phase 1: Project Foundation & Configuration**"
[ -n "${ISSUES[p1t1]}" ] && echo "  - Issue #${ISSUES[p1t1]}: Initialize React Project with Vite and TypeScript"
[ -n "${ISSUES[p1t2]}" ] && echo "  - Issue #${ISSUES[p1t2]}: Configure TanStack Query and React Router"
[ -n "${ISSUES[p1t3]}" ] && echo "  - Issue #${ISSUES[p1t3]}: Migrate Design System and Theme Configuration"
[ -n "${ISSUES[p1t4]}" ] && echo "  - Issue #${ISSUES[p1t4]}: Create TypeScript Type Definitions"
echo ""
echo "**Phase 2: Core Infrastructure & Shared Components**"
[ -n "${ISSUES[p2t1]}" ] && echo "  - Issue #${ISSUES[p2t1]}: Create Data Service Abstraction Layer"
[ -n "${ISSUES[p2t2]}" ] && echo "  - Issue #${ISSUES[p2t2]}: Implement TanStack Query Hooks"
[ -n "${ISSUES[p2t3]}" ] && echo "  - Issue #${ISSUES[p2t3]}: Build Shared UI Component Library"
[ -n "${ISSUES[p2t4]}" ] && echo "  - Issue #${ISSUES[p2t4]}: Create Layout Components"
[ -n "${ISSUES[p2t5]}" ] && echo "  - Issue #${ISSUES[p2t5]}: Implement Authentication Context"
echo ""
echo "**Phase 3: Feature Migration - Pages & Core Functionality**"
[ -n "${ISSUES[p3t1]}" ] && echo "  - Issue #${ISSUES[p3t1]}: Migrate Authentication Pages"
[ -n "${ISSUES[p3t2]}" ] && echo "  - Issue #${ISSUES[p3t2]}: Migrate Dashboard Page"
[ -n "${ISSUES[p3t3]}" ] && echo "  - Issue #${ISSUES[p3t3]}: Migrate Notes Browsing Page"
[ -n "${ISSUES[p3t4]}" ] && echo "  - Issue #${ISSUES[p3t4]}: Migrate Profile Page"
[ -n "${ISSUES[p3t5]}" ] && echo "  - Issue #${ISSUES[p3t5]}: Migrate Upload Page"
echo ""
echo "**Phase 4: Feature Migration - Interactive Tools**"
[ -n "${ISSUES[p4t1]}" ] && echo "  - Issue #${ISSUES[p4t1]}: Migrate JotPad Feature"
[ -n "${ISSUES[p4t2]}" ] && echo "  - Issue #${ISSUES[p4t2]}: Migrate Todo List Feature"
[ -n "${ISSUES[p4t3]}" ] && echo "  - Issue #${ISSUES[p4t3]}: Migrate Study Tracker Feature"
[ -n "${ISSUES[p4t4]}" ] && echo "  - Issue #${ISSUES[p4t4]}: Migrate Landing Page and Global Features"
[ -n "${ISSUES[p4t5]}" ] && echo "  - Issue #${ISSUES[p4t5]}: Integration Testing and Cleanup"
echo ""
echo "🔗 View all issues: https://github.com/$REPO/issues?q=is%3Aissue+is%3Aopen+label%3Areact-migration"
echo ""
echo "📝 Next steps:"
echo "1. Review the created issues"
echo "2. Adjust issue descriptions if needed"
echo "3. Start with Phase 1 Task 1 to begin the migration"
echo "4. Follow the dependency chain outlined in each issue"

Length of output: 876

---

Let me check what issues were actually created:

---

🏁 Script executed:

#!/bin/bash

REPO="opensource-society/notesvault"

echo "Fetching all react-migration labeled issues..."
echo "==============================================="
echo ""

# Get all issues with react-migration label
gh issue list --repo "$REPO" --label "react-migration" --limit 30 --json number,title,labels,state --jq '.[] | "\(.number)|\(.title)|\(.state)"' | sort -t'|' -k1 -n | while IFS='|' read -r num title state; do
    echo "Issue #$num: $title [$state]"
done

echo ""
echo "==============================================="
echo ""
echo "Counting issues by phase..."
echo ""

# Count by phase
for phase in 1 2 3 4; do
    count=$(gh issue list --repo "$REPO" --label "phase-$phase" --limit 30 --json number --jq '. | length')
    echo "Phase $phase: $count issues"
done

echo ""
echo "Total react-migration issues:"
gh issue list --repo "$REPO" --label "react-migration" --limit 30 --json number --jq '. | length'

Length of output: 279

---

@adityai0 Thanks for the details. The prior run didn’t attach labels or capture numbers, so nothing showed up under react-migration. I’ll fix that now by:

• Creating all required labels first
• Creating the 19 issues (skipping any duplicates by title)
• Adding “Blocked by” and “Blocks” comments to link dependencies
• Printing a summary

---

🏁 Script executed:

#!/bin/bash
set -euo pipefail

REPO="opensource-society/notesvault"
ASSIGNEE="adityai0"

echo "Preparing labels..."
echo "===================="
ensure_label() {
  local name="$1"
  local color="$2"
  local desc="$3"
  # Create label if missing; ignore error if it already exists
  gh label create "$name" --repo "$REPO" --color "$color" --description "$desc" >/dev/null 2>&1 || true
  echo "• ensured label: $name"
}

# Core labels
ensure_label "react-migration" "5319e7" "Refactor to React + TanStack Query"
ensure_label "refactoring" "c5def5" "Refactoring tasks"
ensure_label "enhancement" "84b6eb" "Feature enhancements"

# Phase labels
ensure_label "phase-1" "1d76db" "Phase 1: Foundation & Configuration"
ensure_label "phase-2" "fbca04" "Phase 2: Core Infra & Shared Components"
ensure_label "phase-3" "d93f0b" "Phase 3: Pages & Core Functionality"
ensure_label "phase-4" "0052cc" "Phase 4: Interactive Tools & Cleanup"

# Category labels
ensure_label "design-system" "a2eeef" "Design tokens, theming, styles"
ensure_label "typescript" "3178c6" "TypeScript typing & tooling"
ensure_label "ui-components" "0e8a16" "Reusable UI component library"
ensure_label "layout" "c2e0c6" "App shell, header, footer, routing layout"
ensure_label "authentication" "b60205" "Auth flows & session management"
ensure_label "testing" "5319e7" "QA and integration testing"

echo ""
echo "Creating issues..."
echo "=================="

declare -A ISSUES

write_body() {
  local content="$1"
  local tmpfile
  tmpfile="$(mktemp)"
  printf "%s" "$content" > "$tmpfile"
  echo "$tmpfile"
}

find_existing_issue() {
  local title="$1"
  gh issue list --repo "$REPO" --search "\"$title\" in:title" --state all --limit 1 --json number --jq '.[0].number' 2>/dev/null || true
}

new_issue() {
  local key="$1"
  local title="$2"
  local labels_str="$3"
  local body_text="$4"

  local existing
  existing="$(find_existing_issue "$title")"
  if [[ -n "${existing:-}" ]]; then
    echo "• Skipping (exists as #$existing): $title"
    ISSUES["$key"]="$existing"
    return
  fi

  local body_file
  body_file="$(write_body "$body_text")"

  # Build -l flags
  local label_flags=()
  for l in $labels_str; do
    label_flags+=(-l "$l")
  done

  local output
  if output=$(gh issue create --repo "$REPO" -t "$title" -F "$body_file" -a "$ASSIGNEE" "${label_flags[@]}" 2>&1); then
    :
  else
    echo "$output"
    exit 1
  fi

  # Parse issue number from output URL
  local number
  number=$(echo "$output" | grep -oE 'issues/[0-9]+' | awk -F/ '{print $2}' | tail -1)
  if [[ -z "${number:-}" ]]; then
    echo "Could not parse issue number for: $title"
    echo "$output"
    exit 1
  fi
  ISSUES["$key"]="$number"
  echo "✓ Created #$number: $title"
}

add_blocked_by() {
  local child_key="$1"; shift
  local child_num="${ISSUES[$child_key]:-}"
  [[ -z "$child_num" ]] && return

  local refs=()
  for parent_key in "$@"; do
    local pnum="${ISSUES[$parent_key]:-}"
    [[ -n "$pnum" ]] && refs+=("#$pnum")
  done
  [[ "${`#refs`[@]}" -eq 0 ]] && return

  gh issue comment --repo "$REPO" "$child_num" --body "Blocked by: ${refs[*]}" >/dev/null
  echo "  • Added Blocked by -> #$child_num: ${refs[*]}"
}

add_blocks() {
  local parent_key="$1"; shift
  local parent_num="${ISSUES[$parent_key]:-}"
  [[ -z "$parent_num" ]] && return

  local refs=()
  for child_key in "$@"; do
    local cnum="${ISSUES[$child_key]:-}"
    [[ -n "$cnum" ]] && refs+=("#$cnum")
  done
  [[ "${`#refs`[@]}" -eq 0 ]] && return

  gh issue comment --repo "$REPO" "$parent_num" --body "Blocks: ${refs[*]}" >/dev/null
  echo "  • Added Blocks -> #$parent_num: ${refs[*]}"
}

# Bodies (compact but descriptive)
BODY_P1T1=$'## 📋 Task Description\nSet up the base React application with modern tooling and establish the project structure.\n\n## 🎯 Objectives\n- Initialize Vite (React + TS) in `frontend/` alongside `backend/`\n- Configure path aliases in `tsconfig.json` (`@/components`, `@/hooks`, `@/utils`, etc.)\n- ESLint + Prettier with React rules\n- Create baseline folders: components, pages, hooks, utils, types, styles, context, services\n- Add dev scripts to run alongside Flask backend\n\n## ✅ Acceptance Criteria\n- Vite project boots\n- Aliases resolve\n- Lint/format scripts work\n- Folder structure present\n- Dev scripts documented in README'
BODY_P1T2=$'## 📋 Task Description\nInstall and configure TanStack Query and React Router.\n\n## 🎯 Objectives\n- Install `@tanstack/react-query`, `@tanstack/react-query-devtools`, `react-router-dom`\n- Configure `QueryClientProvider` in `App.tsx`\n- Set up `BrowserRouter` and central route config\n- Add React Query DevTools\n- Placeholder pages: Dashboard, Notes, JotPad, TodoList, StudyTracker, Profile, Login, Signup, ForgotPassword, Upload\n\n## ✅ Acceptance Criteria\n- Router + QueryClient wired\n- DevTools enabled in dev\n- All placeholder routes render'
BODY_P1T3=$'## 📋 Task Description\nMigrate design tokens and add theme management.\n\n## 🎯 Objectives\n- Move `styling/variables.css` + `base.css` to `src/styles/`\n- `ThemeContext` with dark/light + localStorage persistence\n- `useTheme` hook\n- Enable CSS Modules in Vite\n\n## ✅ Acceptance Criteria\n- Theme toggles and persists\n- Styles compile with CSS Modules\n- No visual regressions on base pages'
BODY_P1T4=$'## 📋 Task Description\nCreate TypeScript interfaces for domain entities.\n\n## 🎯 Objectives\n- `types/note.ts`, `user.ts`, `todo.ts`, `study-session.ts`, `parameters.ts`, `jotpad.ts`\n- Align with existing JSON/localStorage schema\n\n## ✅ Acceptance Criteria\n- Types compile across app\n- Matches current data shapes'

BODY_P2T1=$'## 📋 Task Description\nService layer abstraction (localStorage for now) to future-proof API migration.\n\n## 🎯 Objectives\n- `services/storage.ts` (get/set/remove/clear with JSON handling)\n- `authService`, `todoService`, `studyService`, `jotpadService`, `notesService`\n- SHA-256 password hashing utility\n\n## ✅ Acceptance Criteria\n- All services unit-tested minimally\n- No direct localStorage access from components'
BODY_P2T2=$'## 📋 Task Description\nCustom TanStack Query hooks wrapping services.\n\n## 🎯 Objectives\n- `useNotes`, `useParameters`, `useTodos` (optimistic), `useStudySessions`, `useJotpad`, `useAuth`\n\n## ✅ Acceptance Criteria\n- Sensible staleTime/cacheTime\n- Correct cache invalidation on mutations'
BODY_P2T3=$'## 📋 Task Description\nBuild shared, accessible UI components.\n\n## 🎯 Objectives\n- Button, Card, Modal (focus trap, ESC), Input (validation), Toast, Loading\n- Each with CSS module + story-like examples (optional)\n\n## ✅ Acceptance Criteria\n- Components used by pages compile and pass basic accessibility checks'
BODY_P2T4=$'## 📋 Task Description\nLayout, header/footer, protected routes.\n\n## 🎯 Objectives\n- Header (nav, theme toggle, auth-aware), Footer\n- `Layout.tsx` + router Outlet\n- `ProtectedRoute`\n\n## ✅ Acceptance Criteria\n- Nav works across routes\n- Protected pages redirect unauthenticated users'
BODY_P2T5=$'## 📋 Task Description\nAuthentication Context.\n\n## 🎯 Objectives\n- `AuthContext` + `useAuth`\n- `loggedInUser` persistence + Remember Me\n- Header integrates auth state\n\n## ✅ Acceptance Criteria\n- Login/Logout/Signup flows change state\n- Backward-compatible with existing data'

BODY_P3T1=$'## 📋 Task Description\nReactify Login/Signup/Forgot Password flows.\n\n## 🎯 Objectives\n- Port forms + validation\n- Use shared Input/Button\n\n## ✅ Acceptance Criteria\n- E2E flow works with AuthContext'
BODY_P3T2=$'## 📋 Task Description\nReactify Dashboard.\n\n## 🎯 Objectives\n- Layout, StatsCard, FeatureCard, QuickActions\n- Upload trigger wiring\n\n## ✅ Acceptance Criteria\n- Responsive grid + animations migrate'
BODY_P3T3=$'## 📋 Task Description\nReactify Notes listing with filters/search.\n\n## 🎯 Objectives\n- Grid + NoteCard + NoteFilters + NoteDetailModal\n- Debounced search via useNotes\n\n## ✅ Acceptance Criteria\n- Filter + search parity with legacy'
BODY_P3T4=$'## 📋 Task Description\nReactify Profile page with edit + password change.\n\n## 🎯 Objectives\n- Edit mode, strength meter, toasts\n\n## ✅ Acceptance Criteria\n- Profile updates persist via services'
BODY_P3T5=$'## 📋 Task Description\nReactify Upload page with cascading dropdowns.\n\n## 🎯 Objectives\n- Branch→Semester→Subject via useParameters\n- Drag-drop file input + validation\n\n## ✅ Acceptance Criteria\n- Form validates and submits metadata'

BODY_P4T1=$'## 📋 Task Description\nReactify JotPad (markdown + canvas) with autosave + PDF export.\n\n## 🎯 Objectives\n- MarkdownEditor/Preview, DrawingCanvas\n- jsPDF + html2canvas export\n\n## ✅ Acceptance Criteria\n- Mode toggle + export works'
BODY_P4T2=$'## 📋 Task Description\nReactify Todo List with optimistic updates.\n\n## 🎯 Objectives\n- TodoItem/TodoInput/TodoStats\n- Bulk clear operations\n\n## ✅ Acceptance Criteria\n- Mutations are optimistic & consistent'
BODY_P4T3=$'## 📋 Task Description\nReactify Study Tracker with Chart.js.\n\n## 🎯 Objectives\n- TimerControl, SessionChart, ExportButton\n\n## ✅ Acceptance Criteria\n- Chart renders aggregates correctly'
BODY_P4T4=$'## 📋 Task Description\nReactify Landing Page + global utilities.\n\n## 🎯 Objectives\n- Hero (typewriter), Features, Testimonials, BackToTop\n- AOS or Framer Motion\n\n## ✅ Acceptance Criteria\n- Visual parity with legacy'
BODY_P4T5=$'## 📋 Task Description\nIntegration testing and cleanup.\n\n## 🎯 Objectives\n- Route checks, auth E2E, theme persistence, responsive checks\n- Remove/archive legacy folders\n- Update README\n\n## ✅ Acceptance Criteria\n- All routes/pages verified; docs updated'

# Create issues in topological order
new_issue p1t1 "[Phase 1] Initialize React Project with Vite and TypeScript" "react-migration phase-1 enhancement refactoring" "$BODY_P1T1"
new_issue p1t2 "[Phase 1] Configure TanStack Query and React Router" "react-migration phase-1 enhancement refactoring" "$BODY_P1T2"
new_issue p1t3 "[Phase 1] Migrate Design System and Theme Configuration" "react-migration phase-1 enhancement design-system refactoring" "$BODY_P1T3"
new_issue p1t4 "[Phase 1] Create TypeScript Type Definitions" "react-migration phase-1 enhancement typescript refactoring" "$BODY_P1T4"

new_issue p2t1 "[Phase 2] Create Data Service Abstraction Layer" "react-migration phase-2 enhancement refactoring" "$BODY_P2T1"
new_issue p2t2 "[Phase 2] Implement TanStack Query Hooks" "react-migration phase-2 enhancement refactoring" "$BODY_P2T2"
new_issue p2t3 "[Phase 2] Build Shared UI Component Library" "react-migration phase-2 enhancement ui-components refactoring" "$BODY_P2T3"
new_issue p2t4 "[Phase 2] Create Layout Components" "react-migration phase-2 enhancement layout refactoring" "$BODY_P2T4"
new_issue p2t5 "[Phase 2] Implement Authentication Context" "react-migration phase-2 enhancement authentication refactoring" "$BODY_P2T5"

new_issue p3t1 "[Phase 3] Migrate Authentication Pages" "react-migration phase-3 enhancement authentication refactoring" "$BODY_P3T1"
new_issue p3t2 "[Phase 3] Migrate Dashboard Page" "react-migration phase-3 enhancement refactoring" "$BODY_P3T2"
new_issue p3t3 "[Phase 3] Migrate Notes Browsing Page" "react-migration phase-3 enhancement refactoring" "$BODY_P3T3"
new_issue p3t4 "[Phase 3] Migrate Profile Page" "react-migration phase-3 enhancement refactoring" "$BODY_P3T4"
new_issue p3t5 "[Phase 3] Migrate Upload Page" "react-migration phase-3 enhancement refactoring" "$BODY_P3T5"

new_issue p4t1 "[Phase 4] Migrate JotPad Feature" "react-migration phase-4 enhancement refactoring" "$BODY_P4T1"
new_issue p4t2 "[Phase 4] Migrate Todo List Feature" "react-migration phase-4 enhancement refactoring" "$BODY_P4T2"
new_issue p4t3 "[Phase 4] Migrate Study Tracker Feature" "react-migration phase-4 enhancement refactoring" "$BODY_P4T3"
new_issue p4t4 "[Phase 4] Migrate Landing Page and Global Features" "react-migration phase-4 enhancement refactoring" "$BODY_P4T4"
new_issue p4t5 "[Phase 4] Integration Testing and Cleanup" "react-migration phase-4 enhancement testing refactoring" "$BODY_P4T5"

echo ""
echo "Adding dependency links (Blocked by / Blocks)..."
echo "==============================================="

# Blocked by (child <- parents)
add_blocked_by p1t2 p1t1
add_blocked_by p1t3 p1t1
add_blocked_by p1t4 p1t1

add_blocked_by p2t1 p1t1 p1t4
add_blocked_by p2t2 p1t2 p2t1
add_blocked_by p2t3 p1t1 p1t3
add_blocked_by p2t4 p1t2 p1t3 p2t3
add_blocked_by p2t5 p2t1 p2t4

add_blocked_by p3t1 p2t3 p2t5
add_blocked_by p3t2 p2t3 p2t4
add_blocked_by p3t3 p2t2 p2t3
add_blocked_by p3t4 p2t3 p2t5
add_blocked_by p3t5 p2t2 p2t3

add_blocked_by p4t1 p2t2 p2t3
add_blocked_by p4t2 p2t2 p2t3
add_blocked_by p4t3 p2t2 p2t3
add_blocked_by p4t4 p2t3 p2t4
add_blocked_by p4t5 p3t1 p3t2 p3t3 p3t4 p3t5 p4t1 p4t2 p4t3 p4t4

# Blocks (parent -> children)
add_blocks p1t1 p1t2 p1t3 p1t4 p2t1 p2t3
add_blocks p1t2 p2t2 p2t4
add_blocks p1t3 p2t3 p2t4
add_blocks p1t4 p2t1

add_blocks p2t1 p2t2 p2t5
add_blocks p2t2 p3t3 p3t5 p4t1 p4t2 p4t3
add_blocks p2t3 p2t4 p3t1 p3t2 p3t3 p3t4 p3t5 p4t1 p4t2 p4t3 p4t4
add_blocks p2t4 p2t5 p3t2 p4t4
add_blocks p2t5 p3t1 p3t4

add_blocks p3t1 p4t5
add_blocks p3t2 p4t5
add_blocks p3t3 p4t5
add_blocks p3t4 p4t5
add_blocks p3t5 p4t5

add_blocks p4t1 p4t5
add_blocks p4t2 p4t5
add_blocks p4t3 p4t5
add_blocks p4t4 p4t5

echo ""
echo "Summary (react-migration labeled issues)..."
echo "==========================================="
gh issue list --repo "$REPO" --label "react-migration" --limit 50 --json number,title,labels,state --jq '.[] | "\(.number)|\(.title)|\(.state)"' | sort -t'|' -k1 -n | while IFS='|' read -r num title state; do
  echo "Issue #$num: $title [$state]"
done

echo ""
for phase in 1 2 3 4; do
  count=$(gh issue list --repo "$REPO" --label "phase-$phase" --limit 50 --json number --jq '. | length')
  echo "Phase $phase: $count issues"
done

total=$(gh issue list --repo "$REPO" --label "react-migration" --limit 100 --json number --jq '. | length')
echo "Total react-migration issues: $total"

echo ""
echo "Done."

Length of output: 4574

---

@adityai0 All set. I created the full issue series with labels, proper descriptions, and dependency links using “Blocked by” and “Blocks” comments.

Summary

• Phase 1: #1047, #1048, #1049, #1050
• Phase 2: #1051, #1052, #1053, #1054, #1055
• Phase 3: #1056, #1057, #1058, #1059, #1060
• Phase 4: #1061, #1062, #1063, #1064, #1065

What I set up

• Labels: react-migration, phase-1..phase-4, refactoring, enhancement, plus design-system, typescript, ui-components, layout, authentication, testing.
• Dependencies:
  • Example: #1048, #1049, #1050 are Blocked by #1047; #1065 (integration & cleanup) is Blocked by all Phase 3 and Phase 4 feature issues.
• Assignee: set to you (adityai0) for all 19 issues.

Optional next steps

• Want me to:
  • Create a Milestone “React Migration” and add all 19 issues?
  • Spin up a GitHub Projects board (columns: Backlog, In Progress, Review, Done) and auto-add issues with label react-migration?
  • Reassign specific issues to contributors?

If yes, tell me which options you want and I’ll automate it.

---

✏️ Learnings added

Learnt from: adityai0
URL: https://github.com/opensource-society/notesvault/issues/1046

Timestamp: 2026-02-03T11:48:24.815Z
Learning: In opensource-society/notesvault, maintainers prefer large refactors to be broken into a series of GitHub issues with explicit dependency comments ("Blocked by"/"Blocks") and labeled with "react-migration" plus phase labels (phase-1..phase-4).

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.