Memo App

A modern, lightweight memo management application built with React and Material-UI. Create, edit, search, and organize your memos with due date tracking and persistent local storage.

Features

• Create Memos - Add memos with title, content, and optional due dates
• Edit Memos - Update existing memos with ease
• Search Functionality - Real-time search by memo title with URL parameter support
• Delete Memos - Remove memos you no longer need
• Due Date Tracking - Set optional due dates for your memos using a native date picker
• Persistent Storage - All memos are saved locally in your browser using localStorage
• Toast Notifications - Visual feedback for all actions (create, update, delete)
• Responsive Design - Mobile-first UI with bottom navigation
• Fast Performance - Built with Vite for lightning-fast development and optimized production builds

Tech Stack

Core

• React 19.1.0 - UI library
• React Router DOM 7.9.6 - Client-side routing
• Vite 7.0.4 - Build tool and dev server

UI Framework

• Material-UI (MUI) 7.3.5 - Component library
• MUI Icons 7.3.5 - Icon components
• Emotion - CSS-in-JS styling

Utilities

• react-hot-toast 2.6.0 - Toast notifications
• react-use 17.6.0 - Custom React hooks (localStorage, etc.)
• @fontsource/roboto - Material Design typography

Installation

# Clone the repository
git clone <your-repo-url>

# Navigate to project directory
cd memo

# Install dependencies
npm install

Usage

Development

Start the development server with hot module replacement:

npm run dev

The app will be available at http://localhost:5173

Production Build

Build the application for production:

npm run build

Preview Production Build

Preview the production build locally:

npm run preview

Project Structure

memo/
├── src/
│   ├── features/
│   │   ├── add/
│   │   │   └── Add.jsx              # Create new memos
│   │   ├── edit/
│   │   │   ├── Edit.jsx             # Edit page wrapper
│   │   │   └── MemoItem.jsx         # Edit form and logic
│   │   ├── home/
│   │   │   └── Home.jsx             # Home page
│   │   ├── memo-list/
│   │   │   ├── MemoList.jsx         # Memo list container
│   │   │   └── MemoListItem.jsx     # Individual memo item
│   │   └── search/
│   │       └── Search.jsx           # Search functionality
│   ├── ui/
│   │   ├── AppLayout.jsx            # Main layout wrapper
│   │   ├── NavBar.jsx               # Top navigation bar
│   │   └── BottomNavBar.jsx         # Bottom navigation
│   ├── assets/                      # Static assets
│   ├── App.jsx                      # Main app component with routing
│   └── main.jsx                     # Application entry point
├── public/                          # Public assets
├── index.html                       # HTML entry point
├── vite.config.js                   # Vite configuration
└── package.json                     # Project dependencies

Routes

• / - Home page displaying all memos
• /add - Create a new memo
• /search - Search through your memos
• /memo/:memoId - Edit a specific memo

Data Structure

Memos are stored in localStorage with the following structure:

{
  id: Number,        // Unique timestamp-based ID (Date.now())
  title: String,     // Memo title
  body: String,      // Memo content
  dueDate: String    // Optional due date in ISO format (YYYY-MM-DD)
}

Key Features Implementation

Local Storage Persistence

• Uses useLocalStorage hook from react-use
• Data automatically syncs across components
• Survives browser refreshes and sessions

Search with URL Parameters

• Search term stored in URL query parameters (?q=searchterm)
• Allows bookmarking and sharing search results
• Real-time filtering by memo title (case-insensitive)

Timezone-Safe Date Display

• Due dates stored in ISO format (YYYY-MM-DD)
• Manual date parsing prevents timezone conversion issues
• Displays the exact date selected by the user

Toast Notifications

• Success notifications for create/update operations
• Error notifications for delete operations
• Custom styled with consistent theme

Browser Support

Works on all modern browsers that support:

• ES6+ JavaScript
• LocalStorage API
• HTML5 Date Input

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is open source and available under the MIT License.

Author

Created with React and Material-UI

---

Note: This application stores all data locally in your browser. No data is sent to any server. Clear your browser's localStorage to reset all memos.