MonitorVerse - Portfolio Contact Manager

A beautiful and modern Flutter application for managing contacts from your portfolio website. This app connects to Firebase Firestore to display, search, and manage people who have contacted you through your portfolio.

✨ Features

• Beautiful Modern UI: Clean, Material 3 design with dark/light theme support
• Real-time Data: Live updates from Firebase Firestore
• Contact Management: View, search, and manage all your portfolio contacts
• Statistics Dashboard: See contact metrics (today, week, month, total)
• Email Integration: Quick reply to contacts directly from the app
• Search Functionality: Find contacts by name or email
• Responsive Design: Works beautifully on all screen sizes
• Loading States: Elegant shimmer loading effects
• Error Handling: Graceful error states with retry functionality

🏗️ Architecture

The app follows a clean, modular architecture:

lib/
├── models/                 # Data models
│   └── contact.dart       # Contact model with Firestore integration
├── providers/              # State management
│   └── contact_provider.dart  # Contact state provider
├── screens/                # UI screens
│   ├── contacts_screen.dart    # Main contacts list screen
│   └── contact_detail_screen.dart  # Detailed contact view
├── services/               # Business logic
│   └── firebase_service.dart   # Firebase operations
├── widgets/                # Reusable UI components
│   ├── contact_card.dart      # Contact card widget
│   └── stats_card.dart        # Statistics card widget
├── firebase_options.dart   # Firebase configuration
└── main.dart              # App entry point

🚀 Getting Started

Prerequisites

• Flutter SDK (latest stable version)
• Firebase project with Firestore enabled
• A code editor (VS Code, Android Studio, etc.)

1. Clone and Setup

git clone <your-repo-url>
cd monitorverse
flutter pub get

2. Firebase Configuration

1. Go to your Firebase Console
2. Select your project (or create a new one)
3. Go to Project Settings > Your apps
4. Add a new app for your platform (Android/iOS/Web)
5. Download the configuration files or copy the configuration values
6. Update lib/firebase_options.dart with your actual Firebase configuration:

// Replace the placeholder values with your actual Firebase config
static const FirebaseOptions web = FirebaseOptions(
  apiKey: 'your-actual-api-key',
  appId: 'your-actual-app-id',
  messagingSenderId: 'your-messaging-sender-id',
  projectId: 'your-project-id',
  authDomain: 'your-project-id.firebaseapp.com',
  storageBucket: 'your-project-id.appspot.com',
);

3. Firestore Database Structure

Your Firestore database should have a collection named contacts with documents containing:

{
  "name": "John Doe",
  "email": "john@example.com",
  "subject": "Project Inquiry",
  "message": "Hi, I'm interested in your services...",
  "company": "ABC Corp", // Optional
  "createdAt": "2024-01-15T10:30:00Z" // Timestamp
}

4. Run the App

flutter run

📱 App Screens

Home Screen (Contacts List)

• Statistics Card: Shows total, today, week, and month contact counts
• Contact Cards: Beautiful cards displaying contact information
• Search: Find contacts by name or email
• Pull to Refresh: Refresh data with a simple pull gesture

Contact Detail Screen

• Complete Contact Info: Full name, email, company, subject, and message
• Quick Actions: Email the contact directly
• Beautiful Design: Card-based layout with proper spacing

🎨 UI Components

ContactCard Widget

ContactCard(
  contact: contact,
  onTap: () => navigateToDetail(contact),
  onDelete: () => deleteContact(contact),
)

StatsCard Widget

StatsCard(stats: {
  'total': 50,
  'today': 2,
  'week': 8,
  'month': 15,
})

🔧 Key Dependencies

• firebase_core & cloud_firestore: Firebase integration
• provider: State management
• google_fonts: Beautiful typography
• url_launcher: Email integration
• shimmer: Loading animations
• intl: Date formatting

🎯 Code Structure Explanation

Models (lib/models/)

• Contact: Represents a contact with methods for Firestore conversion
• Includes computed properties like initials and formattedDate

Services (lib/services/)

• FirebaseService: Handles all Firebase operations
• Methods for CRUD operations, search, and statistics
• Error handling and data transformation

Providers (lib/providers/)

• ContactProvider: Manages app state using Provider pattern
• Handles loading states, error states, and data operations
• Provides reactive updates to UI

Screens (lib/screens/)

• ContactsScreen: Main screen with list and search
• ContactDetailScreen: Detailed view of individual contacts
• Responsive design and proper navigation

Widgets (lib/widgets/)

• ContactCard: Reusable contact card component
• StatsCard: Statistics display component
• Clean, maintainable widget structure

🚀 Running the App

1. Make sure you have Flutter installed
2. Update the Firebase configuration in firebase_options.dart
3. Run flutter pub get to install dependencies
4. Run flutter run to start the app

🤝 Contributing

Feel free to contribute to this project by:

• Reporting bugs
• Suggesting new features
• Submitting pull requests
• Improving documentation

📄 License

This project is open source and available under the MIT License.

---

Note: Remember to replace the placeholder values in firebase_options.dart with your actual Firebase project configuration before running the app.