Contact-Hub — Next.js 后台模板

SHA-256: 09c9f752842291f50ae1698b062a6f275cdccb881c2596afda2509b9e973bc43

2026-10-15T11:08:28.751Z

# Contact Hub

**Stop rebuilding contact form backends for every side project.**

[![Built with Elements](https://img.shields.io/badge/Built%20with-Elements-0D9488?style=flat-square)](https://github.com/unlayer/elements)
[![License: MIT](https://img.shields.io/badge/License-MIT-blue?style=flat-square)](LICENSE)

**Repo:** https://github.com/Oluwaseg/Contact-Hub

---

## The Problem

If you build a few different apps or sites (a portfolio, a SaaS product, a side project), each one usually ends up with its own scattered way of handling "someone wants to reach me."

Maybe it's a mailto link. Maybe it's a form that quietly emails a Gmail you forget to check. Maybe you find out three weeks later that someone tried to contact you about one of your apps, but the message went to the wrong inbox and got buried.

Multiply that across every project you build, and you get a mess: no single place to see who's reached out, when, or about what.

## The Idea

Contact Hub is a small, single service that every one of your projects talks to.

Instead of each app building (and re-building) its own contact form backend, they all send their messages to one place. Contact Hub stores them, can notify you through configurable providers such as Discord, Telegram, or email, and gives you one dashboard to see everything at a glance, filterable by project.

Think of it as your own private, self-hosted, open-source version of Formspree. Built once, owned entirely by you, and reusable forever.

**Example use case** (the project names below are just some of my own apps that talk to Contact Hub):

One side project gets a feature request. Another gets a partnership inquiry. Your portfolio gets a freelance lead. Instead of checking three different inboxes, every message lands in Contact Hub, tagged by project, in one place.

## How It Fits Together

```
Portfolio         ──┐
DeadLink Watchdog ──┼──►  Contact Hub  ──►  Email notification (Elements template)
WalletWise        ──┘           │
(next project...)               ▼
                          Admin dashboard
                          (message + email/web preview)
```

Every project sends its messages to Contact Hub. Contact Hub keeps a record of everything, notifies you the moment a message arrives, and shows it all in one admin dashboard (sorted, searchable, and filterable by project).

---

## Built with Unlayer Elements

Elements is a core part of this project, not a side experiment.

Contact Hub was already a real app with a real use case: I kept rebuilding contact-form backends for every project. The challenge gave me a reason to replace hand-written notification HTML with a proper, reusable template system powered by [@unlayer/react-elements](https://github.com/unlayer/elements).

### What the template does

When someone submits a contact form, Contact Hub sends a "New Contact Message Received" notification. That email is built entirely with Elements:

| Piece | Location |
|-------|----------|
| Template component | [`src/templates/ContactMessageNotification.tsx`](src/templates/ContactMessageNotification.tsx) |
| Render helpers | [`src/lib/renderContactMessageNotification.tsx`](src/lib/renderContactMessageNotification.tsx) |
| Live email sending | [`src/lib/mailer.ts`](src/lib/mailer.ts) |
| Dashboard email preview | `/dashboard/messages/[id]/email` |
| Dashboard web preview | `/dashboard/messages/[id]/web` |

### Write once, render everywhere

The same JSX content is wrapped in two Elements root components:

- `<Email>` produces table-based HTML for Gmail, Outlook, Apple Mail (used when Nodemailer sends notifications)
- `<Page>` produces responsive web HTML (shown in the dashboard's web preview)

One template. Two outputs. No duplicated markup.

```tsx
// Shared content, two render modes
<Email>...</Email>   // notification in your inbox
<Page>...</Page>     // responsive web preview in the dashboard
```

---

## Demo

[Watch the demo video](docs/videos/demo.mp4)

## Screenshots

### Message details

![Message details view](docs/screenshots/message-preview.png)

### Email preview (Elements `<Email>` mode)

![Email preview](docs/screenshots/email-preview.png)

### Web preview (Elements `<Page>` mode)

![Web preview](docs/screenshots/web-preview.png)

---

## Quick start

Full setup guide: **[SETUP.md](SETUP.md)**

```bash
git clone https://github.com/Oluwaseg/Contact-Hub.git
cd Contact-Hub
pnpm install
cp .env.example .env   # then fill in your values
pnpm prisma migrate dev
pnpm dev
```

Open `http://localhost:3000`, sign in at `/login`, and submit a test message via the contact API (see [SETUP.md](SETUP.md) for environment variables).

> The public landing page works out of the box. The dashboard and notifications require your own `.env` (database, admin password, and at least one notification provider).

---

## Notifications

Every incoming message can trigger instant notifications through configurable providers:

- **Email** (Gmail via Nodemailer), rendered with the Elements template
- **Discord** (webhook)
- **Telegram** (bot)

Configure one or more providers in `.env`. The app skips any provider that isn't set up.

## What It Solves

- **No more guessing which inbox a message landed in.** Every message is tagged with the project it came from.
- **No more rebuilding the same contact form logic for every new project.** Build it once here, reuse it everywhere.
- **One place to check.** Instead of five different "contact" systems across five different projects, there's one.
- **A record you actually keep.** Emails get lost or archived. A proper dashboard doesn't.
- **Instant alerts.** Notifications mean you find out the moment someone reaches out.

## Why it's free

Contact Hub was built to solve a problem I kept running into across my own projects. Rather than turning it into a paid SaaS, I decided to keep it open source so anyone can self-host, contribute, or adapt it.

If it saves you time or helps your projects, consider:

- Starring the repo on GitHub
- Sharing feedback or opening issues
- [Supporting development with a donation](https://selar.com/showlove/oluwaseg) (optional, never required)

I don't intend to monetize Contact Hub. It's infrastructure I wanted for myself, and I'd rather share it than gate it.

## Why build this instead of a third-party tool?

Tools like Formspree or Getform are fine, but they come with limits on free tiers, monthly costs as you scale, and no real ownership of your data. Since the goal is to reuse this across every project for years, it made more sense to own the whole thing. No usage caps, no per-project pricing, and full control over how messages are stored and displayed.

## Roadmap

```
Done:
  Core API
  Project authentication (per-project API keys)
  Email notifications (Unlayer Elements template)
  Email + web template previews in dashboard
  Basic spam protection
  Admin dashboard (login, inbox, filters)
  Project management UI (add/remove projects, rotate keys)
  Search
  Labels / tags
  Archive & bulk actions
  Webhooks (Discord / Telegram notifications)

Planned:
  Rate limiting
  Analytics (messages per project, over time)
  AI spam / auto-categorization
  Attachments support
  reCAPTCHA verification
  Team accounts (future)
```

## Tech stack

- **Next.js** (App Router, fullstack)
- **[@unlayer/react-elements](https://github.com/unlayer/elements)** for notification email + web template rendering
- **PostgreSQL** via **Neon**
- **Prisma** ORM
- **Zod** for validation
- **Nodemailer** (Gmail) for email delivery
- **Vercel** for hosting

## Contributing

See [CONTRIBUTING.md](CONTRIBUTING.md) if you want to report a bug, improve the docs, or send a pull request.

## License

MIT. See [LICENSE](LICENSE).

---

_Built by [Samuel Oluwasegun](https://github.com/Oluwaseg) as shared infrastructure for personal and portfolio projects._