A modern, feature-rich contact management application built with Vue 3 and Vite.
- Add & Edit Contacts - Create and update contact information with ease
- Search Functionality - Quickly find contacts by name, phone, or email
- Local Storage - Contacts are automatically saved to browser storage
- Form Validation - Real-time validation for phone numbers and email addresses
- Responsive Design - Works seamlessly on desktop, tablet, and mobile devices
- Modern UI - Beautiful gradient design with smooth animations
- Delete Confirmation - Prevents accidental contact deletion
- Node.js (v16 or higher)
- npm or yarn
- Clone the repository
git clone <repository-url>
cd phone-contact- Install dependencies
npm install- Start the development server
npm run dev- Open your browser and navigate to
http://localhost:3000
npm run buildThe built files will be in the dist directory.
- Vue 3 - Progressive JavaScript framework
- Vite - Next generation frontend tooling
- Composition API - Modern Vue 3 API with
<script setup> - Composables - Reusable logic with custom hooks
- Local Storage API - Client-side data persistence
src/
├── components/
│ ├── ContactForm.vue # Form for adding/editing contacts
│ └── ContactList.vue # Display and manage contacts
├── composables/
│ ├── useContacts.js # Contact management logic
│ └── useValidation.js # Form validation utilities
├── App.vue # Main application component
├── main.js # Application entry point
└── style.css # Global styles
- First Name & Last Name (required)
- Phone Number (format: 09XXXXXXXX)
- Email Address (validated)
- Gender Selection
- Address (optional)
- Card-based layout with avatars
- Search across all contact fields
- Edit and delete actions
- Empty state messaging
- Automatic save to localStorage
- Data persists across browser sessions
- No backend required
Contributions are welcome! Feel free to submit issues and pull requests.
This project is open source and available under the MIT License.