Contact Form with Resend and React Email 📧

A modern contact form application built with Next.js 15, TypeScript, and various cutting-edge technologies.

---

✨ Features

Feature	Description
🎨 Modern UI/UX	Beautiful and intuitive interface using Tailwind CSS
🔒 Email Sending	Secure email sending with Resend and React Email
📱 Responsive	Fully responsive design for all devices
✍️ Contact Form	Easy-to-use contact form for user inquiries

🚀 Quick Start

1. Clone the repository

git clone https://github.com/yourusername/contact-form-resend-react-email.git
cd contact-form-resend-react-email

2. Install dependencies

npm install
# or
pnpm install
# or
yarn install

3. Set up environment variables Create a .env file in the root directory and add:

RESEND_API_KEY=your_resend_api_key

4. Start the development server

npm run dev
# or
pnpm dev
# or
yarn dev

5. Open your browser Navigate to http://localhost:3000 to see the application running.

6. Start React Email development server (optional)

npm run email

This will start the React Email preview server at http://localhost:3001

🛠️ Tech Stack

Click to expand tech stack details

Core Framework

• Next.js 15 - React framework for production
• TypeScript - Static type checking

Email Services

• Resend - Modern email delivery service
• React Email - Email template builder for React

Form Management

• React Hook Form - Form validation
• Zod - TypeScript-first schema validation
• Next Safe Action - Type-safe server actions

UI Components & Styling

• Tailwind CSS - Utility-first CSS framework
• Shadcn UI - Re-usable components
• Lucide Icons - Beautiful open-source icons

Motion & Feedback

• Motion - Animation library
• Sonner - Toast notifications

📸 Screenshots

Contact Form

Email Template

🔐 Environment Variables

To run this project, you will need to add the following environment variables to your .env file:

Variable	Description
RESEND_API_KEY	API key for Resend email service

RESEND_API_KEY=