📇 Contact App

A modern, full-stack contact management application built with Node.js, Express, MongoDB, and EJS. Features a beautiful responsive UI with smooth animations and comprehensive error handling.

✨ Features

• Create, Read, Update, Delete (CRUD) operations for contacts
• Beautiful & Interactive UI with gradient backgrounds and smooth animations
• Responsive Design - Works seamlessly on all devices
• Form Validation - Client-side and server-side validation
• Error Handling - Comprehensive error handling with custom error pages
• MongoDB Integration - Persistent data storage
• EJS Templating - Dynamic server-side rendering
• Font Awesome Icons - Professional icon integration
• Bootstrap 5 - Modern UI framework

🚀 Quick Start

Prerequisites

• Node.js (v22 or higher)
• MongoDB (local or Atlas)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone https://github.com/muhammadumarafzaal/ContactApp.git
   cd ContactApp

2. Install dependencies

   npm install

3. Create .env file in the root directory

   MONGODB_URL=mongodb://localhost:27017/contacts-crud
   PORT=3000

4. Start the application

   npm start

   Or for development with auto-reload:

   npm run dev

5. Open in browser

   http://localhost:3000
   

📦 Project Structure

ContactApp/
├── controller/
│   └── contacts.controller.js      # Business logic for contacts
├── models/
│   └── contacts.models.js          # MongoDB schema
├── routes/
│   └── contacts.routes.js          # API routes
├── views/
│   ├── home.ejs                    # Contact list page
│   ├── add-contact.ejs             # Add contact form
│   ├── update-contact.ejs          # Edit contact form
│   ├── show-contact.ejs            # Contact details page
│   ├── 404.ejs                     # Error page
│   └── partials/
│       ├── header.ejs              # Navigation header
│       └── footer.ejs              # Footer
├── public/
│   ├── bootstrap.min.css           # Bootstrap framework
│   └── custom.css                  # Custom animations & styles
├── config/
│   └── database.js                 # MongoDB connection
├── index.js                        # Main application file
├── package.json                    # Dependencies
└── README.md                       # Project documentation

🎨 UI Features

Animations & Transitions

• Smooth Page Transitions - Fade-in animations for content
• Card Animations - Pop-in effects with elevation
• Button Hover Effects - Scale and rotation on hover
• Table Row Animations - Staggered fade-in for contacts
• Responsive Interactions - Smooth transitions on all devices

Color Scheme

• Primary Gradient: Purple (#667eea) to Blue (#764ba2)
• Secondary Colors: Green (#10b981), Red (#ef4444), Blue (#0ea5e9)
• Professional Typography - Clean, modern fonts

📋 API Routes

Method	Route	Description
GET	/	Get all contacts
GET	/add-contact	Show add contact form
POST	/add-contact	Create new contact
GET	/show-contact/:id	Get contact details
GET	/update-contact/:id	Show edit form
POST	/update-contact/:id	Update contact
GET	/delete-contact/:id	Delete contact

🔒 Error Handling

The application includes comprehensive error handling:

• 400 Bad Request - Missing or invalid form fields
• 404 Not Found - Invalid contact ID or missing contact
• 500 Server Error - Database or server errors
• Custom Error Pages - Professional error messages with navigation

🛠️ Technologies Used

Backend

• Node.js - JavaScript runtime
• Express - Web application framework
• MongoDB - NoSQL database
• Mongoose - MongoDB ODM
• Dotenv - Environment variable management

Frontend

• EJS - Templating engine
• Bootstrap 5 - CSS framework
• Font Awesome - Icon library
• Custom CSS - Animations and styling

📝 Contact Model

{
  first_name: String,
  last_name: String,
  email: String,
  phone: String,
  address: String,
  createdAt: Date (auto),
  updatedAt: Date (auto)
}

🧪 Form Validation

Required Fields

• ✅ First Name
• ✅ Last Name
• ✅ Email (valid email format)
• ✅ Phone (phone number format)
• ✅ Address

Validation Features

• Client-side validation using Bootstrap validation classes
• Server-side validation in controller
• Helpful error messages for users
• Field placeholder hints

🚀 Future Enhancements

• Search and filter contacts
• Sort contacts by name/email
• Export contacts to CSV
• Contact categories/groups
• Photo upload for contacts
• Contact backup/restore
• Multi-user authentication
• Dark mode toggle
• Contact backup to email
• Advanced search filters

📄 License

This project is licensed under the ISC License - see the LICENSE file for details.

👨‍💻 Author

Muhammad Umar Afzaal

• GitHub: @muhammadumarafzaal
• Email: umarafzaal182@gmail.com

🙏 Acknowledgments

• Bootstrap for the responsive UI framework
• Font Awesome for beautiful icons
• MongoDB for reliable data storage
• Express.js community for excellent documentation

📞 Support

For support, email umarafzaal182@gmail.com or open an issue in the repository.

---

Made with ❤️ by Muhammad Umar Afzaal