A modern, responsive, and feature-rich contacts management application built with Next.js, React, and TypeScript. Manage your contacts with ease and style!
![Contacts App Main View]:
- 📱 Responsive design for mobile and desktop
- 🌓 Light and dark mode support
- 🌐 Internationalization (English and Persian)
- 📥 Import and export contacts (VCF format)
- 🔍 Fast and efficient contact search
- 🔄 Customizable sorting options
- 📸 Contact images with avatar support
- 🚀 Optimized performance with virtualized lists
Click to view screenshots
![Main Contact List]
![Contact Details]
![Add/Edit Contact Form]
![Settings Dialog]
![Mobile View] ( Based on iPhone 14 ProMax) 
- Next.js - React framework for production
- React - JavaScript library for user interfaces
- TypeScript - Typed superset of JavaScript
- Tailwind CSS - Utility-first CSS framework
- shadcn/ui - Re-usable components built with Radix UI and Tailwind CSS
- Framer Motion - Animation library for React
- Lucide React - Beautiful & consistent icon toolkit
- Node.js 14.0 or later
- npm or yarn
-
Add a contact: Click the '+' icon in the header and fill in the contact details. ![Add Contact]
-
Edit a contact: Click the edit icon on a contact card to modify its details.
-
Delete a contact: Click the delete icon on a contact card to remove it.
-
Search contacts: Use the search bar in the header to find specific contacts. ![Search Contacts]
-
Sort contacts: Click the sort icon in the header to change the sorting order.
-
Import/Export contacts: Use the settings menu to import or export contacts in VCF format.
-
Change language: Switch between English and Persian in the settings menu.
-
-
Toggle theme: Switch between light and dark mode using the theme toggle in the header. ![Toggle Theme]
Contributions, issues, and feature requests are welcome! Feel free to check issues page.
Made with ❤️ for my father that wanted contact app on his PC by Mahdi