SETUP-GUIDE.md

DevLeads Setup Guide

Complete step-by-step guide to deploy your own DevLeads instance.

→ README - Main project overview and introduction

→ Features Guide - Learn what DevLeads can do after setup

Table of Contents

1. Quick Start Checklist
2. Prerequisites
3. Database Setup (MongoDB Atlas)
4. Authentication Setup (Firebase)
5. Email Setup (Optional)
6. Repository Setup
7. Environment Configuration
8. Installation & Development
9. Customization Guide
10. Create Your GitHub Repository
11. Production Deployment
12. Web Forms Integration (Optional)
13. Configuration Checklist
14. Troubleshooting

---

Quick Start Checklist

• Create MongoDB Atlas account and cluster
• Create Firebase project and setup authentication
• Clone repository and install dependencies
• Set up .gitignore file for security
• Configure environment variables
• Update Firebase configuration in frontend
• Customize email templates
• Test application locally
• Deploy to production
• Add web forms to website (optional)

---

Prerequisites

Before you begin, ensure you have:

• Node.js - Download here
• npm or yarn package manager
• Git for version control
• Text editor (VS Code recommended)

Accounts needed:

• MongoDB Atlas (free tier available)
• Firebase (free tier available)
• Email account with SMTP access (optional but highly recommended)

---

Database Setup (MongoDB Atlas)

Step 1: Create Account and Cluster

1. Visit MongoDB Atlas and click "Get Started":

2. Fill out the signup form and create your free account:

3. Set up Multi-Factor Authentication (recommended for security):
   • Verify your email address first
   • Choose your preferred MFA method

4. Complete the welcome questionnaire or skip:
   • Primary goal: Select "Build a project I have in mind"
   • MongoDB experience: Select your experience level
   • Programming language: Choose "JavaScript / Node.js"
   • Fill in other details as appropriate

5. Create your first cluster by clicking the "Create" button:

   • If you already have a MongoDB ATLAS account, you can just create a new project after you sign in

6. Deploy your cluster - Choose the Free tier:
   • Select "Free" cluster option
   • Sample data set: uncheck "preload sample dataset"
   • Provider: Choose your preferred cloud provider
   • Region: Choose the region closest to your users
   • Cluster Name: Use the default name or choose your own
   • Click "Create Deployment"

7. Set up security - You'll be prompted to create a database user and configure network access:

• Username: Choose a username
• Password: Use the auto-generated password or create your own
• Click "Create Database User"

8. Your cluster will be created (this takes 1-3 minutes)

Step 2: Get Connection String

1. Choose connection method - Click "Choose a connection method":

2. Select "Drivers" to connect your application:

⚠️ Important: DO NOT ACTUALLY INSTALL DRIVERS. WE JUST NEED THE CONNECTION STRING

3. Copy the connection string:
   • Driver: Node.js
   • Version: 6.7 or later (should be selected by default)

4. Copy and save the connection string
   • The connection string format will be: mongodb+srv://username:password@cluster.mongodb.net/
   • Save this complete connection string somewhere secure for later use in .env
   • Click "Done" button

Step 3: Configure Network Access

1. Go to Database & Network Access in the left sidebar

2. Click IP Access List

3. Add IP Address:

• For development: Add 0.0.0.0/0 (allows access from anywhere)
• For production: Add your server's specific IP addresses

4. Confirm

5. Do not sign out or close this tab.

   • We will need to add the authorized IP addresses once we deploy our app shortly.

---

Authentication Setup (Firebase)

Step 1: Create Firebase Project

1. Go to Firebase Console and click "Go to console":

2. Create a project:
   • Project name: Choose your project name
   • Continue through setup wizard

3. Your Firebase project is ready:

Step 2: Get Web App Configuration

1. Add App

   • Click "+ Add app"

2. Choose Web
   • Click "< / > (Web)"

3. Register app:

   • Pick an App nickname: e.g. "DevLeads Web"
   • Don't check hosting checkbox

   

4. Copy the config object

   • Copy the Firebase configuration public facing keys locally (you'll need this later for dashboard/js/authApi.js)

   • ⚠️ Important: Do not run npm install firebase in the console. Firebase is already in the project's package.json file.

   // Your web app's Firebase configuration
   const firebaseConfig = {
     apiKey: "your-api-key",
     authDomain: "your-project.firebaseapp.com",
     projectId: "your-project-id",
     storageBucket: "your-project.appspot.com",
     messagingSenderId: "123456789",
     appId: "your-app-id",
   };

   

5. Continue to console

   • Click the 'Continue to console' button

Step 3: Setup Authentication

1. Select 'Build' → Click 'Authentication'

2. Click 'Get started'

3. Sign-in method tab → Email/Password:
   • Enable Email/Password

4. Users tab → Add your first user

Step 4: Generate Service Account Key

1. Project Settings → Service accounts tab

2. Generate new private key → Generate key

3. Download the JSON file (keep it secure!)

   • These will go in .env later

4. Extract these values from the JSON file:

   • project_id
   • private_key_id
   • private_key
   • client_email
   • client_id
   • auth_uri
   • token_uri
   • auth_provider_x509_cert_url
   • client_x509_cert_url
   • universe_domain

5. Leave this tab open

   • We will need to add the authorized URL once we deploy our app shortly

---

Email Setup (Optional but highly recommended)

Email notifications are optional but highly recommended for lead management. It is set up to work seamlessly with the customizable web form web components provided later on in this document. Both you and the person submitting the form are sent email confirmations.

Understanding the Three Email Variables

DevLeads uses three separate email configuration variables. In most cases (99% of the time), you'll use the same email address for all three. However, having separate variables gives you flexibility for more advanced configurations if needed.

EMAIL_USER

Purpose: SMTP authentication username

This is the account you use to log into your email server.

• Used for: Authenticating with the SMTP server
• Example: your-email@gmail.com

ADMIN_EMAIL

Purpose: Recipient address for notifications

This is YOUR email address where you want to receive notifications when new leads submit forms.

• Used for: Receiving new lead notifications
• Example: your-email@gmail.com

EMAIL_FROM

Purpose: Sender address displayed to customers

This is the "From" address that appears in emails your customers receive.

• Used for: Branding outgoing confirmation emails
• Example: your-email@gmail.com or noreply@your-business.com

Most Common Setup (Recommended)

For most users, all three variables will be the same:

EMAIL_USER=your-email@gmail.com
ADMIN_EMAIL=your-email@gmail.com
EMAIL_FROM=your-email@gmail.com

Advanced Setup (Optional)

If you want professional branding or need to separate concerns:

EMAIL_USER=your-email@gmail.com          # Your Gmail for authentication
ADMIN_EMAIL=your-email@gmail.com         # Where YOU receive lead notifications
EMAIL_FROM=noreply@your-business.com     # What CUSTOMERS see as the sender

Why separate variables?

• Professional branding: Customers see your business domain instead of personal email
• Clear communication: Use noreply@ to indicate automated emails
• Flexibility: Receive notifications at one address while sending from another

Important Note: Not all email providers allow sending from a different address than your authenticated account. Gmail requires you to verify alternate "From" addresses in settings. If unsure, just use the same email for all three variables.

Understanding Email Password (EMAIL_PASS)

What is EMAIL_PASS?

The EMAIL_PASS field is where you put your email account's authentication credentials. This is not your regular login password for your email.

App Password

• A special password generated specifically for applications
• More secure than your main account password
• Required for two-factor authentication
• Unique to each application you connect

How to Get the Right Password

For Most Email Providers:

1. Log into your email account settings
2. Find the security or app passwords section
3. Enable two-factor authentication (if not already active)
4. Generate an app-specific password
5. Select "Mail" or "SMTP" as the application type
6. Copy the generated password
7. Use THIS password in EMAIL_PASS

Specific Provider Examples:

• Gmail:

  1. Go to Google Account > Security
  2. Enable 2-Step Verification
  3. Go to "App passwords" https://myaccount.google.com/apppasswords
  4. Generate a 16-character password
  5. Save password for use in .env

• Outlook/Office 365:

  1. Go to Microsoft Account security settings
  2. Look for "App passwords" or "Additional security"
  3. Generate an app-specific password
  4. Save password for .env

• Zoho Mail:

  1. Log into Zoho Mail at https://mail.zoho.com
  2. Click your profile picture (top right)
  3. Select "My Account" (opens in new window)
  4. Click "Security" tab
  5. Click "App Passwords"
  6. Click "Generate New Password"
  7. Enter a name (e.g., "DevLeads" or "Nodemailer")
  8. Copy the generated password immediately (only shown once)
  9. Save password for use in .env

Email Provider Settings

• These are examples of how you will fill out your environmental variables later

Gmail (for .env):

EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
ADMIN_EMAIL=your-gmail@gmail.com
EMAIL_FROM=your-gmail@gmail.com
EMAIL_USER=your-gmail@gmail.com
# Remove spaces from app password and add without quotes
EMAIL_PASS=your16characterapppassword
EMAIL_SECURE=false

Outlook (for .env):

EMAIL_HOST=smtp-mail.outlook.com
EMAIL_PORT=587
ADMIN_EMAIL=your-outlook@outlook.com
EMAIL_FROM=your-outlook@outlook.com
EMAIL_USER=your-outlook@outlook.com
# Remove spaces from app password and add without quotes
EMAIL_PASS=yourapppassword
EMAIL_SECURE=false

Zoho Mail (for .env):

EMAIL_HOST=smtp.zoho.com
EMAIL_PORT=587
ADMIN_EMAIL=your-email@zoho.com
EMAIL_FROM=your-email@zoho.com
EMAIL_USER=your-email@zoho.com
# Remove spaces from app password and add without quotes
EMAIL_PASS=yourapppassword
EMAIL_SECURE=false

Finding Your SMTP Settings

How to Get Accurate SMTP Details

1. Check your email provider's official documentation
2. Contact your email provider's support
3. Look for these key pieces of information:
   • SMTP Server Address
   • Port Number (usually 587 or 465)
   • Whether SSL/TLS is required
4. Gmail and Outlook use port 587

---

Repository Setup

Step 1: Clone the Repository

Open your terminal/command prompt and navigate to where you want the project saved locally, then run:

# Clone the repository
git clone https://github.com/DevManSam777/devleads.git
cd devleads

• Alternatively, you can press the "Use Template" button at https://github.com/DevManSam777/devleads
  • this will give you a fresh copy without the git history
• Tip: You can now open this Setup Guide locally docs/SETUP-GUIDE.md line 398

Step 2: Install Dependencies

In your terminal/command prompt, run:

# Install server dependencies
cd server
npm install
cd ..

---

Environment Configuration

Step 1: Copy Environment Template

In your terminal/command prompt (make sure you're in the project root directory), run:

# From the project root directory
cp .env.example .env

Step 2: Configure .env File

Open .env and replace placeholders with your values from MongoDB Atlas, the Firebase JSON, and your email app password:

# ===== DATABASE =====
MONGO_URI=mongodb+srv://your-username:your-password@your-cluster.mongodb.net/devleads

# ===== SERVER =====
PORT=5000
NODE_ENV=development

# ===== FIREBASE ADMIN SDK =====
# Only the private key value should be wrapped in quotes
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_PRIVATE_KEY_ID=your-private-key-id
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\nYour-Private-Key-Here\n-----END PRIVATE KEY-----\n"
FIREBASE_CLIENT_EMAIL=firebase-adminsdk-xxxxx@your-project.iam.gserviceaccount.com
FIREBASE_CLIENT_ID=your-client-id
FIREBASE_AUTH_URI=https://accounts.google.com/o/oauth2/auth
FIREBASE_TOKEN_URI=https://www.googleapis.com/oauth2/v1/certs
FIREBASE_AUTH_PROVIDER_X509_CERT_URL=https://www.googleapis.com/oauth2/v1/certs
FIREBASE_CLIENT_X509_CERT_URL=https://www.googleapis.com/project/firebase-adminsdk-xxxxx%40your-project.iam.gserviceaccount.com
FIREBASE_UNIVERSE_DOMAIN=googleapis.com

# ===== EMAIL NOTIFICATIONS (OPTIONAL) =====
ADMIN_EMAIL=your-admin-email@example.com
EMAIL_FROM=your-sending-email@example.com
EMAIL_USER=your-sending-email@example.com
# Remove spaces from app password and add without quotes
EMAIL_PASS=yourappspecificpassword
EMAIL_HOST=smtp.gmail.com
EMAIL_PORT=587
EMAIL_SECURE=false

Important Notes:

• ⚠️ Never commit the .env file to version control
• FIREBASE_PRIVATE_KEY: Copy the entire private key value from the JSON file, including the quotation marks and everything between them (e.g., "-----BEGIN PRIVATE KEY-----\nYour-Key-Here\n-----END PRIVATE KEY-----\n")
• The FIREBASE_PRIVATE_KEY should include the \n characters for line breaks
• EMAIL_PASS: Remove any spaces from your app password and add it without quotes
• Email settings are optional - the app works without them but it is highly recommended

---

Installation & Development

Step 1: Update Frontend Firebase Config

Edit dashboard/js/authApi.js and replace the firebaseConfig object with your Firebase web app configuration (these are public facing keys and they are ok to expose. These are different from the Firebase SDK keys from the JSON file that you added to the .env):

// Replace this object with your Firebase config
const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "123456789",
  appId: "your-app-id",
};

Step 2: Start Development Server

In your terminal/command prompt, run:

# From the server directory
cd server
npm run dev

Step 3: Access the Application

• Login: http://localhost:5000/login
• API Documentation: http://localhost:5000/api

Step 4: Login for the first time

1. Navigate to http://localhost:5000/login
2. Log in using email/password you set up in firebase console
3. You should be redirected to the dashboard

---

Customization Guide

Email Template Customization

After setting up your email configuration, you'll need to customize the email templates in the /server/utils/emailNotification.js file:

Required Customizations

1. Schedule Consultation Link (emailNotification.js:446)

   • Replace href="#" with your actual scheduling URL
   • Example: href="https://cal.com/your-business/consultation"

2. Support Email Address (emailNotification.js:453)

   • Replace your-email@example.com with your actual support email
   • This appears in the "Questions?" section of confirmation emails

3. Business Name (emailNotification.js:458)

   • Replace Your Business Name with your actual business name
   • This appears in the footer copyright section

Style Customization Warning

⚠️ Caution: The email templates use inline CSS for maximum email client compatibility. While you can modify the existing styles, be aware that:

• The current styles have been tested and are optimized for responsiveness
• Email clients have limited CSS support
• Test thoroughly across different email clients if you make style changes
• Consider using email testing tools before deploying style modifications

1. Client Form Submission Confirmation Email

   • 

2. Developer Form Submission Confirmation Email

   • 

---

Important Warnings

• Do NOT use your regular account password
• Keep your .env file PRIVATE
• Never commit .env to version control
• The .gitignore file should already prevent .env from being shared

Troubleshooting

• Double-check ALL settings
• Verify app password is copied correctly
• Ensure two-factor authentication is enabled
• Confirm SMTP settings with your email provider

Want to Skip Email Notifications?

Simply do not add your email and SMTP information to the .env file. The app will work normally. (Not Recommended)

---

Create Your GitHub Repository

Now that you have fully configured and tested your DevLeads application, you need to create your own GitHub repository and push your customized code there. This is required for deployment.

Step 1: Create New GitHub Repository

1. Go to GitHub and sign in
2. In the upper-right corner, select the "+" dropdown menu and click "New repository"
3. Repository settings:
   • Use the Owner dropdown to select the account that will own the repository
   • Repository name: devleads (or your preferred name)
   • Description: "Professional Lead and Project Management System"
   • Choose repository visibility: Private (recommended) or Public
   • Do NOT check any boxes to initialize with README, .gitignore, or license (you already have these)
4. Click "Create repository"

Step 2: Initialize Git and Connect Your Repository

In your terminal/command prompt (make sure you're in the project root directory), run:

# Remove the existing git history
rm -rf .git

# Initialize a fresh git repository
git init

# Add your new repository as the remote origin
git remote add origin https://github.com/YOUR-USERNAME/YOUR-REPO-NAME.git

# Verify the remote was added correctly
git remote -v

Step 3: Commit Your Configuration

In your terminal/command prompt, run:

# Add all your configured files
git add .

# Commit your customized setup
git commit -m "Initial DevLeads setup with custom configuration

- Added MongoDB Atlas connection
- Configured Firebase authentication
- Set up environment variables
- Customized email templates and branding
- Added web forms integration (if applicable)
- Ready for deployment"

# Rename the default branch to "main"
git branch -M main

# Push to your repository
git push -u origin main

Important Notes:

• Your .env file will NOT be pushed (protected by .gitignore)
• Only your configuration files and customizations will be uploaded
• This repository will be used for deployment in the next steps
• Keep your repository private if it contains any sensitive configuration
• You now have your own copy of DevLeads ready for deployment!

---

Production Deployment

Deploy DevLeads to any hosting platform that supports Docker. Our demo site is deployed on Fly.io at https://app.devleads.site/.

Key Requirements:

• Docker deployment required - Business Finder needs Chrome/Chromium
• Set NODE_ENV=production in your environment variables
• Add DOMAIN environment variable with your deployment URL (without http/https)
  • Example: DOMAIN=your-app.fly.dev or DOMAIN=yourdomain.com
• Configure your production IP addresses in MongoDB Atlas

---

Domain Configuration

---

After deployment

1. Update CORS settings in server/server.js for production security:

   IMPORTANT: You need to modify two CORS configuration blocks:

   • UNCOMMENT Production CORS (line 33 through line 62):

     • Start at line 33 with the comment // PRODUCTION CORS configuration - uncomment for production use
     • Remove the // comment markers from lines 33-62 (ending with the line before // End Uncomment in production)
     • This enables the production CORS configuration that restricts allowed origins to only your domain

   • COMMENT OUT Development CORS (line 66 through line 71):

     • Start at line 66 with the comment // Development CORS - comment out in production
     • Add // comment markers to lines 66-71 (ending with the line before // End comment out in production)
     • This disables the development CORS that allows all origins (insecure for production)

   • DO NOT MODIFY line 74 through line 76:

     • The lines app.use(cors(corsOptions)) and app.options("*", cors(corsOptions)) must remain uncommented in both development and production

   After making these changes, commit and push to your repository to trigger a new deployment.

2. Save changes, stage, commit, and push to your Github repo

3. Configure Firebase authorized domains

   • "Authentication" > "Settings" > "Authorized Domains"
   • Add your deployment domain

4. Configure MongoDB Atlas production IPs

   • Go to your MongoDB Atlas cluster
   • "Database & Network Access" > "IP Access List"
   • Add your hosting platform's IP addresses to the IP Access List
   • Remove "0.0.0.0/0" from your IP Access List for security

5. Verify environment variables are set correctly with your deployment domain and NODE_ENV=production

---

Web Forms Integration (Optional but highly recommended)

After your DevLeads application is deployed, you can add web forms to your website to automatically capture leads. Forms are available as the @devmansam/forms package with multiple installation options.

Choose Your Web Form

Need a simple contact form? → Use Minimalist Contact Form
Need detailed business inquiries? → Use Full Web Inquiry Form

Installation Methods

Method 1: NPM with Bundler (React, Vue, Angular)

For projects with build systems:

npm install @devmansam/forms

import '@devmansam/forms';
// Forms available as <contact-form> and <web-inquiry-form>

Method 2: NPM without Bundler

Use npm but without a build tool:

npm install @devmansam/forms

<script type="importmap">
{
  "imports": {
    "@devmansam/forms": "./node_modules/@devmansam/forms/index.js"
  }
}
</script>

<script type="module">
  import '@devmansam/forms';
</script>

Method 3: CDN

Add a script tag to your HTML. No npm, no build tools.

Minimalist Contact Form:

<contact-form endpoint="https://your-devleads-api.com/api/leads"></contact-form>
<script src="https://cdn.jsdelivr.net/gh/DevManSam777/forms@main/contact-form.js" defer></script>

Full Web Inquiry Form:

<web-inquiry-form api-url="https://your-devleads-api.com/api/leads"></web-inquiry-form>
<script src="https://cdn.jsdelivr.net/gh/DevManSam777/forms@main/web-inquiry-form.js" defer></script>

Works in WordPress, static HTML, PHP, ASP.NET, Squarespace, Wix, any website.

Option 1: Minimalist Contact Form

Basic Setup (CDN):

<contact-form endpoint="https://your-devleads-api.com/api/leads"></contact-form>
<script src="https://cdn.jsdelivr.net/gh/DevManSam777/forms@main/contact-form.js" defer></script>

Features:

• Simple 5-field contact form
• Lightweight implementation
• Dark/light mode support
• Fully customizable styling
• Real-time validation
• Phone number auto-formatting

Option 2: Full Web Inquiry Form

Basic Setup (CDN):

<web-inquiry-form api-url="https://your-devleads-api.com/api/leads"></web-inquiry-form>
<script src="https://cdn.jsdelivr.net/gh/DevManSam777/forms@main/web-inquiry-form.js" defer></script>

Features:

• Multi-step form with 5 steps
• Comprehensive business data collection
• Billing address capture
• Service selection
• Progress indicator
• Review step before submission

Package Information

NPM Package: @devmansam/forms
Repository: https://github.com/DevManSam777/forms
Documentation: See the forms repository README for complete customization options, styling guides, and advanced features

Important Notes

• Replace https://your-devleads-api.com with your actual DevLeads deployment URL
  • Don't forget to append API end point /api/leads to the end of your URL
• IMPORTANT: Ensure CORS is configured in your DevLeads application for your website domain. You need to add the domain where your the web component is hosted to the allowedOrigins array at line 38 & line 39 of server/server.js
• Forms will automatically create new leads in your DevLeads dashboard
• Email notifications will be sent (if configured) for new form submissions

---

Configuration Checklist

Use this checklist to ensure your DevLeads application is properly configured before and after deployment.

Pre-Setup Requirements

• Node.js installed
• Git installed
• Text editor ready
• MongoDB Atlas account created
• Firebase account created

Database Setup

• MongoDB Atlas cluster created
• Database user created with read/write permissions
• Network access configured (0.0.0.0/0 for development)
• Connection string obtained and tested
• Database name added to connection string

Firebase Setup

• Firebase project created
• Authentication enabled (Email/Password)
• Web app configuration obtained
• Service account key downloaded
• All required values extracted from service account JSON

Environment Configuration

• .env.example copied to .env
• MONGO_URI configured with your connection string
• All FIREBASE_* variables configured
• PORT and NODE_ENV set appropriately
• Email variables configured (if using email notifications)

Repository Setup

• Repository cloned successfully
• .gitignore file created in project root
• .env file added to .gitignore
• node_modules/ directories added to .gitignore
• Server dependencies installed (npm install in server directory)
• Sensitive files protected from version control

Frontend Configuration

• Firebase config updated in dashboard/js/authApi.js
• API public keys replaced with your values

Application Customization

• Business name updated in email templates
• Contact email updated in email templates
• Consultation link updated in email templates
• Domain references updated for production

Testing

• Server starts (npm run dev)
• Can access login page (http://localhost:5000/login)
• Can log in successfully
• Can create a test lead
• Business form templates are seeded
• Business Finder works from hitlists page

Production Preparation

• Environment variables set for production on your hosting platform
• CORS settings updated for production domains
• Firebase authorized domains updated
• Database connection tested in production environment

Security Verification

• .env file is in .gitignore
• No sensitive data committed to version control
• Production uses HTTPS

Web Forms Integration Checklist

• DevLeads application deployed and accessible
• CORS configured for website domain(s)
• Chosen appropriate web form type (Minimalist vs Full)
• Web component form script added to website
• Web component custom element added to HTML of your website with correct endpoint URL
• Test form submission creates leads in DevLeads
• Email notifications working for form submissions

Post-Deployment

• Application accessible at production URL
• All features tested in production
• Email notifications working
• Monitoring/logging set up
• MongoDB Atlas IP Access List configured with production IPs
• Firebase Authorized Domains configured with production domain

Troubleshooting Checklist

If something isn't working:

• Check browser console for JavaScript errors
• Check server logs in terminal
• Verify all environment variables are set
• Test database connection separately
• Verify Firebase configuration matches console
• Check network connectivity
• Validate CORS settings
• Test with fresh browser session (incognito)

Common Configuration Mistakes

Avoid these common issues:

1. Firebase Config Mismatch: Ensure frontend config matches Firebase Console exactly
2. MongoDB URI Format: Include database name at the end of connection string
3. Private Key Format: FIREBASE_PRIVATE_KEY must include \n characters
4. Email Passwords: Use app-specific passwords, not account passwords
5. CORS Origins: Production origins must match exactly (including https://)
6. Environment Variables: Restart server after changing .env file
7. Firebase Domains: Add production domain to Firebase authorized domains
8. MongoDB: Add production domain to MongoDB authorized domains

---

Troubleshooting

Common Issues

MongoDB Connection Failed

• Verify connection string format
• Check username/password
• Confirm IP address is whitelisted
• Disable VPN (if using one)
• Test connection with MongoDB Compass

Firebase Authentication Issues

• Verify authApi.js config matches Firebase Console
• Check authorized domains in Firebase Console
• Ensure Authentication is enabled

Email Not Working

• Verify your hosting platform supports SMTP (platforms like Fly.io support it, while others may require paid plans)
• Verify SMTP settings
• Verify web form is using correct API endpoint URL
• Use app-specific passwords, not account passwords
• Test credentials with email client first
• Check spam folder

CORS Errors

• Check server CORS configuration
• Verify allowed origins include your domain
• Test API endpoints with Postman

Debugging

1. Check browser console for errors
2. Check server logs in terminal
3. Verify all environment variables are set
4. Test individual components separately

---

Congratulations! Your DevLeads application should now be ready for use.

Check out the Features Guide to learn more about DevLeads.

---

Show your support! → Buy me a coffee ☕