Notely

Note App

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.

Links

GitHub Demo

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.

Back