🔐 Magic Link Submission System

A sleek, production-ready Next.js application that enables secure user submissions through Magic Link email verification. This system ensures that every submission is backed by a verified email address, enhancing security and data integrity.

---

🚀 Tech Stack

• Framework: Next.js (App Router)
• UI Architecture: Mantine UI
• Database ORM: Prisma
• Styling: Tailwind CSS & Mantine Core
• Icons: Tabler Icons
• Email Templates: React Email
• Database: PostgreSQL
• Validation: Zod
• Email Delivery: Resend

---

✨ Key Features

• 🎯 Secure Submissions: Users fill out a form that requires email confirmation.
• 🔗 Magic Link Verification: Secure, single-use, time-limited tokens sent via email.
• 🛡️ Token Security: High-entropy token generation with SHA-256 hashing in the database.
• ⚡ Async Processing: Non-blocking email delivery for a snappy user experience.
• 📱 Responsive Design: Fully responsive UI built with Mantine.
• ✅ Robust Validation: Client-side and server-side validation using Zod.

---

🔄 How It Works

1. Submission: User submits the form with their details and email.
2. Verification: The system creates a pending submission and sends a magic link to the user's email.
3. Confirmation: User clicks the link, creating a confirmed session/status, ensuring the email is valid.

---

🛠️ Getting Started

1. Prerequisites

Ensure you have the following installed:

• Node.js: v18.18.0 or higher
• PostgreSQL: Running instance (Local or Cloud like Neon/Supabase. Both will work)
• npm

2. Installation

Clone the repository and install dependencies:

npm install

3. Environment Configuration

Create a .env file in the root directory and populate it with your credentials:

# Database connection string
DATABASE_URL="postgresql://postgres:password@localhost:5432/magic_link"

# Resend API Key for emails
RESEND_API_KEY="re_123456789"

# Sender identity for Resend (Verify this domain in Resend dashboard)
EMAIL_FROM="onboarding@yourdomain.com"

# The base URL of your application
NEXT_PUBLIC_APP_URL="http://localhost:3000"

---

🗄️ Database Setup

The project uses Prisma as the ORM. Follow these steps to set up your PostgreSQL database:

Option A: Cloud Setup using Neon.tech (Recommended for Production)

1. Sign Up: Create a free account at Neon.tech.
2. Create Project: Create a new project and database instance.
3. Get Connection String:
   • In the Neon console, go to the Dashboard.
   • Copy the Connection Details (ensure it's the Connection String format).
   • It should look like: postgresql://[user]:[password]@[neon-host]/[dbname]?sslmode=require.
4. Configure .env:
   • Paste the connection string into your .env file:

     DATABASE_URL="postgresql://user:password@ep-shiny-glade-123456.us-east-2.aws.neon.tech/neondb?sslmode=require"

5. Initialize Database:

   npx prisma migrate dev --name init

Option B: Local Setup using Docker (Recommended for Development)

If you want to run the database locally without setting up a cloud provider:

1. Start Database:

   docker-compose up -d

   This will start a PostgreSQL instance on port 5432.

2. Configure .env: Ensure your DATABASE_URL matches the Docker credentials:

   DATABASE_URL="postgresql://postgres:ayushManufac123@localhost:5432/magic_link"

3. Initialize Database:

   npx prisma migrate dev --name init

---

📧 Resend Configuration

To enable email delivery, follow these steps:

1. Sign Up: Create an account at Resend.com.
2. API Key: Navigate to the API Keys section and create a new key.
3. Add Key: Copy the key and add it to your .env file as RESEND_API_KEY.
4. Domain Verification:
   • To send emails to any recipient, you must verify your domain at resend.com/domains.
   • If your domain is not verified, you can use the resend.dev testing domain (e.g., onboarding@resend.dev), but you can only send emails to your own account email.
5. Update .env: Once verified, update EMAIL_FROM with your verified email/domain.

---

🏃 Development

To start the development server:

npm run dev

The application will be available at http://localhost:3000.

Project Structure (Key Folders)

• /app/api: Backend API routes handling submissions and confirmation logic.
• /app/confirm: Page for token verification and confirmation.
• /app/schemas: Zod validation schemas used across client and server.
• /app/submission: Contains the user input form.
• /emails: React-based email templates using react-email.
• /lib: Reusable services, Prisma client, and email utility.
• /prisma: Database schema definition.

---

📚 Reference Links

• Next.js Documentation
• Prisma Documentation
• Resend Documentation
• Mantine UI Components
• Tailwind CSS
• Tabler Icons
• Zod Validation
• PostgreSQL Documentation

---