💼 Random Contacts Dashboard

A React-based dashboard that lets users search, save, tag, and manage random contacts using the RandomUser API. The app also features dark mode, local storage persistence, and filtering capabilities. It is also a PWA (Progressive Web App), allowing installation on supported devices.

🚀 Features

🔍 Search & Fetch

• Search for random users by name or location.
• Filter users by gender or nationality before fetching new users.
• Powered by randomuser.me API.

💾 Save Contacts Locally

• Save contacts with a single click.
• Contacts are stored in your browser’s localStorage.
• Access saved contacts in the “My Contacts” section.

🏷️ Tag & Categorize

• Assign tags like Friend, Colleague, or Important.

🔎 Filter & Search Saved Contacts

• Filter contacts by:
  • Tag
  • Gender
  • Country
  • Name

🗑️ Remove Contacts

• Delete individual contacts.
• Option to clear all saved contacts with a confirmation dialog in the “Settings” section.

🌙 Dark Mode

• Toggle between Light and Dark theme.
• Theme is saved in localStorage and restored on reload.

📲 Installable (PWA Support)

• Works as a Progressive Web App (PWA).
• Can be installed to home screen on mobile for native-like experience.

📂 Folder Structure

src/
├── components/         # Reusable components
├── pages/              # Top-level views: Search, MyContacts, Settings
├── hooks/              # Custom React hooks like useLocalStorage
├── utils/              # Helper functions (getFormattedPhone, delUniqueContact, etc.)
├── App.jsx             # Root component with routes/tabs
└── main.jsx            # React entry point

🛠️ Technologies Used

• React
• Bootstrap 5
• Vite
• LocalStorage API
• Native HTML <dialog> and Popover API
• Custom Hooks & Utility Functions

📦 Installation

1. Clone this repo