MemoVault

A modern, feature-rich notes management application built with React, Redux Toolkit, and Tailwind CSS. Create, edit, view, and manage your notes with a beautiful and intuitive interface.

✨ Features

• Create Notes: Quickly create notes with titles and content
• Edit Notes: Update existing notes seamlessly
• View Notes: Read your notes in a clean, distraction-free view
• Search Functionality: Find notes instantly by searching titles
• Copy to Clipboard: One-click copying of note content
• Persistent Storage: Notes are saved in local storage
• Responsive Design: Works beautifully on all device sizes
• Modern UI: Clean interface with smooth animations and hover effects
• Date Tracking: Automatic timestamp for each note

🚀 Tech Stack

• Frontend Framework: React 18.3.1
• State Management: Redux Toolkit 2.2.7
• Routing: React Router DOM 6.26.2
• Styling: Tailwind CSS 3.4.12
• Icons: Lucide React 0.445.0
• Notifications: React Hot Toast 2.4.1
• Build Tool: Vite 5.4.7

📦 Installation

1. Clone the repository

git clone https://github.com/yourusername/notes-saver-app.git
cd notes-saver-app

2. Install dependencies

npm install

3. Start the development server

npm run dev

4. Build for production

npm run build

5. Preview production build

npm run preview

🛠️ Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

📁 Project Structure

notes-saver-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   │   └── react.svg
│   ├── components/
│   │   ├── Home.jsx          # Create/Edit notes
│   │   ├── Navbar.jsx        # Navigation component
│   │   ├── Paste.jsx         # List all notes
│   │   └── ViewPaste.jsx     # View single note
│   ├── data/
│   │   └── Navbar.js         # Navigation data
│   ├── redux/
│   │   ├── pasteSlice.js     # Redux slice for notes
│   │   └── store.js          # Redux store configuration
│   ├── utlis/
│   │   └── formatDate.js     # Date formatting utility
│   ├── App.jsx               # Main app component
│   ├── index.css             # Global styles
│   └── main.jsx              # App entry point
├── index.html
├── package.json
├── tailwind.config.js
├── vite.config.js
└── vercel.json

🎯 Key Features Explained

Create & Edit Notes

• Create new notes with a title and content
• Edit existing notes by clicking the edit icon
• Real-time updates reflected in the notes list

Search Notes

• Search through your notes by title
• Instant filtering as you type
• Case-insensitive search

Local Storage

• All notes are automatically saved to browser's local storage
• Data persists across browser sessions
• No backend required

Copy to Clipboard

• One-click copy functionality for note content
• Visual feedback with toast notifications

🎨 UI Components

• Navbar: Clean navigation with active link highlighting
• Note Editor: Distraction-free writing interface with macOS-style window controls
• Note Cards: Beautiful card layout with action buttons
• Search Bar: Instant search with smooth filtering
• Toast Notifications: Non-intrusive success/error messages

🌐 Deployment

This app is configured for easy deployment on Vercel:

1. Push your code to GitHub
2. Import the project in Vercel
3. Deploy with one click

The vercel.json configuration ensures proper routing for the single-page application.

🔧 Configuration

Tailwind CSS

Tailwind is configured in tailwind.config.js. You can customize:

• Colors
• Fonts
• Spacing
• Breakpoints
• And more

Vite

Vite configuration in vite.config.js includes:

• React plugin
• Build optimizations
• Development server settings

📝 Usage Examples

Creating a Note

1. Navigate to the Home page
2. Enter a title and content
3. Click "Create My Paste"

Editing a Note

1. Go to the Pastes page
2. Click the edit icon on any note
3. Modify the content
4. Click "Update Paste"

Searching Notes

1. Navigate to the Pastes page
2. Type in the search bar
3. Notes filter automatically

🤝 Contributing

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

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

🙏 Acknowledgments

• React team for the amazing framework
• Redux team for state management
• Tailwind CSS for the utility-first CSS framework
• Lucide for beautiful icons
• Vite for the blazing-fast build tool

---

Note: This app uses localStorage for data persistence. For production use with multiple users, consider implementing a backend API with proper authentication and database storage.