🛡️ DMARC Dashboard

A comprehensive email security analytics platform for monitoring DMARC authentication and protecting your domain reputation.

---

✨ What is DMARC Dashboard?

DMARC Dashboard is a modern web application that helps organizations monitor and analyze their email authentication posture. By uploading DMARC XML reports, you get powerful insights into:

🔍 Key Features

• 📧 Email Authentication Analysis - Monitor DKIM and SPF authentication success rates
• 🌍 Source IP Tracking - Identify and analyze email sources by provider and geographic location
• 📊 Visual Analytics - Interactive charts and trends showing your email security posture
• 🚨 Threat Detection - Spot unauthorized email sources and potential spoofing attempts
• 📈 Historical Trends - Track authentication performance over time
• 📋 Compliance Reporting - Generate comprehensive reports for security audits

💡 Why Use DMARC Dashboard?

• Protect Your Brand - Prevent email spoofing and phishing attacks using your domain
• Improve Deliverability - Optimize email authentication to ensure legitimate emails reach inboxes
• Gain Visibility - Understand who's sending emails on behalf of your domain
• Meet Compliance - Satisfy security requirements with detailed DMARC monitoring

---

🚀 Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

• Node.js (v16 or higher) - Download here
• npm or yarn package manager
• Git for version control

🛠️ Local Development Setup

1. Clone the repository

   git clone <your-repository-url>
   cd dmarc-dashboard

2. Install dependencies

   npm install
   # or
   yarn install

3. Environment Configuration

   🔧 For Lovable Platform (Original Development):

   This project was built on Lovable, where Supabase credentials are hardcoded in the client configuration. This is the recommended approach for Lovable projects:

   • Public keys (URL and anon key) are safely included in client code
   • Server-side secrets are managed through Supabase's secret management system
   • No .env files are needed or supported on Lovable

   ⚙️ For Self-Hosting/Other Platforms:

   If you're deploying this code outside of Lovable, create a .env.local file in the root directory:

   VITE_SUPABASE_URL=your_supabase_project_url
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

   Then update src/integrations/supabase/client.ts to use environment variables:

   const SUPABASE_URL = import.meta.env.VITE_SUPABASE_URL;
   const SUPABASE_PUBLISHABLE_KEY = import.meta.env.VITE_SUPABASE_ANON_KEY;

   💡 Need Supabase credentials?

   1. Create a free account at supabase.com
   2. Create a new project
   3. Find your URL and anon key in Project Settings → API

   ⚠️ Security Note: The anon/publishable key is designed to be public and included in client-side code. Never commit your service role key or other sensitive secrets to version control.

4. Database Setup

   The database schema will be automatically created when you first run the application. The following tables will be created:

   • dmarc_reports - Main report metadata
   • dmarc_records - Individual email authentication records
   • dmarc_auth_results - Detailed authentication results

5. Start the development server

   npm run dev
   # or
   yarn dev

6. Open your browser

   Navigate to http://localhost:8080 to see the application running!

📱 First Steps After Setup

1. Create an account - Sign up using the authentication form
2. Upload your first DMARC report - Click "Upload Report" and select an XML file
3. Explore the dashboard - View your email authentication analytics
4. Monitor trends - Upload more reports to see historical patterns

---

🏗️ Tech Stack

Technology	Purpose	Version
React	Frontend Framework	18.x
TypeScript	Type Safety	5.x
Vite	Build Tool & Dev Server	5.x
Supabase	Backend & Database	Latest
Tailwind CSS	Styling Framework	3.x
shadcn/ui	UI Components	Latest
Recharts	Data Visualization	Latest
React Router	Client-side Routing	6.x

---

📋 Available Scripts

Command	Description
npm run dev	Start development server on port 8080
npm run build	Build for production
npm run build:dev	Build for development
npm run preview	Preview production build
npm run lint	Run ESLint code analysis

---

🔒 Security & Privacy

• Data Privacy - All DMARC reports are stored securely in your Supabase instance
• User Authentication - Secure login powered by Supabase Auth
• Data Isolation - Multi-tenant architecture ensures data separation
• Local Processing - XML parsing happens client-side for security

---

🤝 Contributing

We welcome contributions!

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📚 Learn More

• DMARC Specification - RFC 7489
• Email Authentication - DKIM & SPF
• React Documentation - reactjs.org
• Supabase Docs - supabase.com/docs

---

📄 License

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