Note-Taking App
Minimal RTL Note-Taking Web Application
This project is a minimal, responsive Note-Taking Web Application built with React. It is designed specifically for Persian (RTL) users and runs entirely on the client side using localStorage, with no backend or database dependency.
The application consists of a sidebar for category and note management and a main content area for displaying, searching, filtering, and sorting notes. On smaller screens, the sidebar functionality is replaced with modal-based interactions to improve mobile UX.
Technologies
React 18Vite 4Context APIuseReducerreact-iconsCSS VariablesESLint
Features
- Notes: Create with title, description, category; inline edit with save/cancel; delete with confirmation; mark completed/uncompleted; automatic createdAt and updatedAt
- Categories: Create and delete; assign to notes; alphabetical sort (Persian locale); persistent in localStorage
- Search, filter & sort: Search in title, description, category (case-insensitive); filter by category (including No Category); sort by latest, earliest, or completed first
- Dark mode: Toggle in header; theme persisted in localStorage; CSS variables and data-theme
- Persian & RTL: lang="fa", dir="rtl"; fully localized UI; dates with toLocaleDateString("fa-IR")
My Role in Project
Frontend Developer (React)
Responsible for full UI implementation, state architecture design, RTL adaptation, dark mode implementation, responsive layout, and client-side persistence logic.
Challenges & Focus
Implementing full RTL and Persian UI without backend dependencyManaging state and persistence solely with localStorageReplacing sidebar with modal on small viewports for responsive UXSupporting searchfilterand sorting in a client-only data model
Technical Decisions
Context API + useReducer for global state
Used instead of Redux to keep the app simple while preserving predictable state transitions and centralized logic.
Client-side persistence with localStorage
Chose localStorage to remove backend dependency and keep the application lightweight and self-contained.
Separation of UI, modal system, and state
Clear separation between UI components, modal system, header controls (search, filter, sorting, theme), and NotesContext state for maintainability and scalability.
Responsive UX strategy
Replaced sidebar with modal interactions on smaller screens to maintain usability without cluttering limited viewport space.
Optimizations & Solutions
- Centralized state in NotesContext with useReducer for predictable updates
- Persian date formatting with toLocaleDateString("fa-IR") and full RTL layout
- Dark mode via CSS variables and data-theme with persistence in localStorage
- Search, filter, and sort implemented purely on client-side data for instant feedback
Trade-offs & Engineering Considerations
- No backend was intentionally chosen for simplicity; data is limited to a single device and not synced across devices.
- Modal instead of persistent sidebar on small screens trades some discoverability for a cleaner mobile layout.
Outcome
This project demonstrates clean state management with React, scalable component structure, RTL UI engineering, and a complete SPA architecture without backend dependency.
