https://github.com/ryzmdn/mern-contact-form
Full-stack web application built with the MERN Stack (MongoDB, Express, React, Node.js).
https://github.com/ryzmdn/mern-contact-form
bootstrap express form-validation mern-stack mongodb nodejs nodemailer react
Last synced: about 1 month ago
JSON representation
Full-stack web application built with the MERN Stack (MongoDB, Express, React, Node.js).
- Host: GitHub
- URL: https://github.com/ryzmdn/mern-contact-form
- Owner: ryzmdn
- Created: 2025-05-01T03:13:42.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-05-01T03:16:48.000Z (about 1 year ago)
- Last Synced: 2025-05-01T04:23:54.332Z (about 1 year ago)
- Topics: bootstrap, express, form-validation, mern-stack, mongodb, nodejs, nodemailer, react
- Language: JavaScript
- Homepage:
- Size: 48.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MERN Email Contact Form
**MERN Email Contact Form** is a full-stack web application built with the **MERN Stack** (MongoDB, Express, React, Node.js). It provides a functional and secure contact form that allows users to send messages via email using **Nodemailer**. The form collects essential details such as first name, last name, email, phone number, subject, and message, with a mandatory privacy policy agreement toggle.
## Form Image
## Features
- **Email Contact Form** with input validation
- **Fields:** First Name, Last Name, Email, Phone Number, Subject and Message
- **Privacy Policy Toggle** (must be accepted before submitting)
- **Nodemailer Integration** for sending messages to a designated email
- **Frontend & Backend Separation** (MERN stack)
- **Environment-Based Configuration**
- **Responsive Design** using React Bootstrap
## Project Structure
```plaintext
contact-form-mern/
│
├── client/
│ ├── public/
│ └── src/
│ ├── assets/
│ ├── App.jsx
│ └── main.jsx
│
├── models/
├── routes/
├── utils/
│
├── .env.example
├── .gitignore
├── package-lock.json
├── package.json
├── README.md
└── server.js
```
## Installation
```bash
# Clone the repository
git clone https://github.com/ryzmdn/mern-contact-form.git
# Navigate into the project directory
cd mern-contact-form
# Install server dependencies
npm install
# Change directory to client folder
cd client
# Install client dependencies
npm install
# Start the development client
npm run dev
# Return to the root directory
cd ..
# Copy the example environment file
cp .env.example .env
# Fill in your environment variables (see Configuration section)
# Start the development server
node server.js
# or
nodemon server.js
```
## Configuration
Create a `.env` file in the root directory and provide the following variables:
```env
PORT=4000
MONGODB_URI=
USER_EMAIL=
USER_PASSWORD=
```
## Usage
1. Run `npm run dev` to start client directory.
2. Run `node server.js` or `nodemon server.js` to start root directory.
3. Open the browser at `http://localhost:5173`.
4. Fill in the contact form fields and accept the privacy policy.
5. Click **Submit** button.
6. A confirmation will appear and the message will be sent to the configured email address.
## Technologies Used
- **MongoDB** - NoSQL database for storing messages (optional, if storing)
- **Express.js** - Backend API framework
- **React.js** - Frontend UI framework
- **React Bootstrap** - Component based CSS framework
- **Node.js** - JavaScript runtime
- **Nodemailer** - Email sending utility
- **dotenv** - Environment configuration
- **Axios** - HTTP client for frontend-backend communication
- **Yup** - JavaScript schema builder used for value parsing and validation
- **Formik** - React library for form management, handling tasks like form state, validation, and submission
## API Endpoints Overview
| Endpoint | Method | Description |
|----------------|--------|----------------------|
| `/api/contact` | POST | Submit contact form |
## License
This project is licensed under the [MIT License](./LICENSE). You are free to use, modify, and distribute it with proper attribution.