[ISSUE] Frontend Implementation for Notes Feature

[smattymatty]

Claiming This Task:

Please read the Git Workflow Wiki Page for updated community documentation.

Before you start working, please check the Assignees section on the right. If no one is assigned, leave a comment claiming the issue and assign it to yourself. This is required to prevent duplicate work.

Current Situation

The Notes feature has a fully functional backend API with sophisticated features including:

• Complete CRUD operations for notes with multi-file upload
• Automatic file compression for images and PDFs
• Smart download system (single file direct download, multiple files as ZIP)
• File organization by education level and subject
• Proper permissions (read-only for others, edit/delete for owner)

However, there is currently no frontend implementation, making the feature inaccessible to users. The backend endpoints at /api/notes/ are ready but have no UI to interact with them.

Proposed Solution(s)

Implement a complete frontend for the Notes feature following EduLite's coding standards and patterns:

1. Notes List Page - Browse and filter all notes

• Grid/list view toggle for note cards
• Filtering by level (elementary, high_school, university, masters)
• Filtering by subject (60+ subjects available)
• Search functionality
• Pagination or infinite scroll for performance on slow networks
• Mobile-first responsive design

2. Note Creation Page - Upload and share notes

• Form with title, description, level, subject selection
• Multi-file upload with drag-and-drop support
• File type indicators and size limits
• Progress indicators for uploads
• LazySelect component integration for dropdown fields

3. Note Detail Page - View and download notes

• Display note metadata and description
• List attached files with download buttons
• Smart download (single file or ZIP for multiple)
• Edit/delete buttons for note owner only
• Share functionality

4. API Service Layer - Connect frontend to backend

• Service functions for all CRUD operations
• File upload/download handling
• Error handling and retry logic for 2G networks
• Token-based authentication integration

5. Navigation Integration

• Add Notes to the main navigation menu
• Add user's notes section to profile page
• Protected routes for creation/editing

Benefits

• Makes the sophisticated notes backend accessible to students globally
• Enables knowledge sharing between students
• Provides organized educational resource management
• Supports students on slow connections with optimized loading
• Follows accessibility standards for all users

Files to be Altered or Created

New Files to Create:

• src/services/notesApi.ts (or .js) - API service layer following pattern in src/services/profileApi.ts
• src/pages/NotesListPage.tsx (or .jsx) - Main notes browsing page
• src/pages/NoteCreatePage.tsx (or .jsx) - Note creation form
• src/pages/NoteDetailPage.tsx (or .jsx) - Individual note view
• src/components/features/notes/NoteCard.tsx (or .jsx) - Reusable note card component
• src/components/features/notes/NoteFilesUpload.tsx (or .jsx) - File upload component
• src/components/features/notes/NoteFilters.tsx (or .jsx) - Filter sidebar/dropdown
• src/types/notes.types.ts (if using TypeScript) - Type definitions

Files to Modify:

• src/App.jsx - Add routes for notes pages (lines 44-60 for route definitions)
• src/components/Navbar.jsx - Add Notes link to navigation
• src/pages/ProfilePage.tsx - Add "My Notes" section

Reference Files for Patterns:

• src/services/profileApi.ts - Example of API service structure
• src/services/choicesService.ts - Pattern for fetching dropdown choices
• src/components/common/LazySelect.tsx - Reusable select component for dropdowns
• src/contexts/AuthContext.jsx - Authentication pattern
• src/pages/ProfilePage.tsx - File upload implementation example

Additional Context

Backend API Endpoints (already implemented):

• GET /api/notes/ - List all notes with filtering
• POST /api/notes/ - Create new note with files
• GET /api/notes/{id}/ - Get note details
• PATCH /api/notes/{id}/ - Update note (owner only)
• DELETE /api/notes/{id}/ - Delete note (owner only)
• GET /api/notes/{id}/download/ - Download note files

Important Considerations:

1. Follow Frontend Coding Standards: Review the Frontend Coding Standards Wiki
2. TypeScript Migration: Both .jsx and .tsx files are welcome. Use TypeScript for new components if comfortable, or JavaScript with PropTypes
3. Performance First: Optimize for 2G networks - implement lazy loading, pagination, and progressive enhancement
4. Accessibility: Include proper ARIA labels, keyboard navigation, and screen reader support
5. Internationalization: Use translation keys with i18n for all user-facing text
6. Dark Mode: Include dark mode classes for all components
7. Mobile First: Design for mobile screens first, then enhance for larger screens
8. Error Handling: Graceful degradation for network failures with retry mechanisms

Backend Models Reference:

See backend/EduLite/notes/models.py for the complete data structure including:

• Notes model with title, level, subject, description fields
• NotesFiles model for file attachments
• Available choices for levels, subjects, and courses

Testing Approach:

• Test file uploads with various file types
• Verify filtering and search functionality
• Test on simulated slow network (Chrome DevTools 2G throttling)
• Verify accessibility with screen readers
• Test permission enforcement (edit/delete restrictions)

This implementation will bring the notes feature to life and provide immense value to students worldwide who need to share and access educational resources.