Email Campaigner — Scope & User Guide

4.1 Login

URL: /login

What you see:

• The Email Campaigner logo and app name in the top-left corner
• A centered card with the heading “Welcome back” and subtitle “Sign in to manage your email campaigns”
• Email input field (placeholder: you@example.com)
• Password input field with a show/hide toggle; in login mode, Forgot password? opens email-only reset request
• Sign In button (blue, full-width)
• A “Don’t have an account? Sign up” link below
• A theme toggle button (sun/moon icon) in the top-right corner
• Footer text: “Email Campaigner — Self-hosted email marketing”

How to use:

1. Enter your email address and password
2. Click Sign In
3. You will be redirected to the Dashboard on success
4. If you don’t have an account, click Sign up to register

Forgot password: Click Forgot password?, enter your email, then Send reset link. Open the link in the message (it opens /reset-password), set a new password, and you are signed in to the Dashboard. Add the exact redirect URL (e.g. http://localhost:8098/reset-password) to Supabase Auth redirect allow-list; the app uses the current browser origin for redirectTo.

4.2 Dashboard

URL: / (root, after login)

What you see:

Sidebar (left): Persistent navigation with links to all sections:

• Dashboard (highlighted when active)
• Campaigns, Contacts, Lists, Templates, Analytics, Transactional, Settings
• Logged-in user info at the bottom (email, role)
• Theme toggle and Sign out button

Main area:

• Page heading: “Dashboard”
• Four KPI cards across the top: Total Contacts, Total Campaigns, Avg. Open Rate, Avg. Click Rate
• Sends — Last 7 Days — chart area (shows “No send activity yet” when empty)
• Recent Campaigns — list with name, send count, open %, status badge (Sent or Draft)

How to use:

• Use the Dashboard for a quick health check of your email operations
• Click any sidebar link to navigate to that section
• The KPI cards update automatically based on campaign data

4.3 Campaigns

URL: /campaigns

What you see:

• Page heading: “Campaigns”
• + New Campaign button (top-right, blue)
• Search bar to filter campaigns by name
• Campaign list — each row: name, status badge, subject/list/date, sent campaigns show send/open/click stats, action buttons (view, edit, send, delete)

How to use:

1. Click + New Campaign to start a new campaign
2. Fill in the campaign name, subject, sender details, pick a list and template
3. Use the search bar to find campaigns by name
4. Use the eye, pencil, paper plane, and trash icons to view, edit, send, or delete

4.4 Campaign detail

URL: /campaigns/:id

What you see:

• Back arrow, campaign name with status badge, subject line
• Edit and Send Campaign buttons
• Stat cards: Recipients, Sent, Opens, Clicks
• Campaign Info: From, List, Template, Bounces, Unsubscribes
• Recipients table with delivery status

How to use:

1. Review campaign stats after sending
2. Click Edit to modify the campaign (drafts)
3. Click Send Campaign to deliver to subscribed contacts on the list

4.5 Contacts

URL: /contacts

What you see:

• Import CSV and + Add Contact buttons
• Search bar; list rows with name, email, date, Unsubscribed badge, delete, detail arrow

How to use:

1. Add contacts manually or via CSV import
2. Search by name or email
3. Open a contact for full detail and campaign history
4. Unsubscribed contacts are excluded from future campaign sends

4.6 Lists

URL: /lists

What you see:

• + New List button
• Cards: name, description, contact count, date, edit/delete, Add Contacts

How to use:

1. Create lists and assign contacts
2. Select a list as the audience when creating a campaign
3. Only subscribed contacts on the list receive the campaign

4.7 Templates

URL: /templates

What you see:

• + New Template button
• Cards: thumbnail, name, updated date, Edit, delete

How to use:

1. Create templates in GrapesJS or MJML
2. Use Handlebars merge fields (e.g. {{first_name}})
3. Attach a template when creating a campaign

4.8 Analytics

URL: /analytics

Before selecting a campaign: filter field, campaign dropdown, message “Select a sent campaign to view analytics”.

After selecting a campaign: Sent, Unique Opens, Unique Clicks, Bounces; Events Over Time chart; legend (Opens, Clicks, Sent).

How to use:

1. Choose a sent campaign from the dropdown
2. Filter by campaign name
3. Review rates and the timeline

4.9 Transactional emails

URL: /transactional

What you see: “Transactional Emails” heading, Send Email button, history rows with subject, recipient, time, status (sent / queued).

How to use:

1. Click Send Email for one-off sends
2. Optional Handlebars variables for personalisation
3. Use for welcome messages, receipts, and other non-campaign mail

4.10 Settings

URL: /settings

What you see: Save Settings; SMTP Host, Port, Username, Password; dev note about MailHog; Default From Name and Email.

How to use:

1. Configure SMTP for production
2. Set default From name and email
3. Click Save Settings
4. In development, view caught mail at http://localhost:8025

4.11 Users (admin)

URL: /users

What you see (non-admin): shield icon, “Admin access required”, and explanatory text.

Admin features: list users, invite users, change roles, delete users.

How to use: Restricted to the admin role; regular users must contact an administrator.