https://github.com/underprotectiondev/contact-form-resend-react-email
Contact Form Next.js 15 next-safe-action
https://github.com/underprotectiondev/contact-form-resend-react-email
nextjs react-email resend resend-email
Last synced: 6 months ago
JSON representation
Contact Form Next.js 15 next-safe-action
- Host: GitHub
- URL: https://github.com/underprotectiondev/contact-form-resend-react-email
- Owner: UnderprotectionDev
- Created: 2025-01-19T12:34:05.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-19T15:33:54.000Z (about 1 year ago)
- Last Synced: 2025-03-13T07:43:56.690Z (11 months ago)
- Topics: nextjs, react-email, resend, resend-email
- Language: TypeScript
- Homepage:
- Size: 1.02 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Contact Form with Resend and React Email 📧
A modern contact form application built with Next.js 15, TypeScript, and various cutting-edge technologies.
[](https://nextjs.org/)
[](https://www.typescriptlang.org/)
[](https://resend.com/)
[](https://react.email/)
[](https://tailwindcss.com/)
[](https://ui.shadcn.com/)
[](https://vercel.com/)
---
## ✨ 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**
```bash
git clone https://github.com/yourusername/contact-form-resend-react-email.git
cd contact-form-resend-react-email
```
2. **Install dependencies**
```bash
npm install
# or
pnpm install
# or
yarn install
```
3. **Set up environment variables**
Create a `.env` file in the root directory and add:
```env
RESEND_API_KEY=your_resend_api_key
```
4. **Start the development server**
```bash
npm run dev
# or
pnpm dev
# or
yarn dev
```
5. **Open your browser**
Navigate to [http://localhost:3000](http://localhost:3000) to see the application running.
6. **Start React Email development server** (optional)
```bash
npm run email
```
This will start the React Email preview server at [http://localhost:3001](http://localhost:3001)
## 🛠️ Tech Stack
Click to expand tech stack details
### Core Framework
- **[Next.js 15](https://nextjs.org/)** - React framework for production
- **[TypeScript](https://www.typescriptlang.org/)** - Static type checking
### Email Services
- **[Resend](https://resend.com/)** - Modern email delivery service
- **[React Email](https://react.email/)** - Email template builder for React
### Form Management
- **[React Hook Form](https://react-hook-form.com/)** - Form validation
- **[Zod](https://zod.dev/)** - TypeScript-first schema validation
- **[Next Safe Action](https://next-safe-action.dev/)** - Type-safe server actions
### UI Components & Styling
- **[Tailwind CSS](https://tailwindcss.com/)** - Utility-first CSS framework
- **[Shadcn UI](https://ui.shadcn.com/)** - Re-usable components
- **[Lucide Icons](https://lucide.dev/)** - Beautiful open-source icons
### Motion & Feedback
- **[Motion](https://motion.dev/)** - Animation library
- **[Sonner](https://sonner.emilkowal.ski/)** - 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=
```