Contact Form ✉️

This application allows users to submit their contact information and messages to the administrator of the page.

Screenshots 📸

Features ✨

• 📝 Users can submit their contact information and messages by filling out a form.
• 📧 The submitted contact form is automatically sent to the email address specified by the site administrator.
• 🛠️ User inputs are validated both server-side and client-side, ensuring error messages are displayed to the user if any issues arise.
• 📬 Notifications are used to provide feedback to the user about the submission process.

Technologies Used 💻

• 💻 React.js - JS library for crafting user interfaces
• 📦 Vite - Module bundler
• 🎨 Tailwind CSS - A utility-first CSS framework
• 🚀 Express.js - Web framework for Node.js
• 📧 Nodemailer - Email sending module for Node.js
• ✅ React Hook Form - Simple React forms validation
• 🛠️ Express Validation - Validation middleware for Express.js
• 📬 Notistack - Notification library for React

Installation 🛠️

Prerequisites

• Install Node.js ⚙️
• Clone the repo 🔄

📦 After cloning the repo install dependecies with

Setting Up the .env File ⚙️

1. Cloning the Project: 🔄
   • Once you've cloned the project, you'll need to create a .env file.
   • I've included an .env.example file with detailed instructions on which environment variables the project requires and how to set them up.

• Example:

    MY_EMAIL=your_email_address
    ADMIN_EMAIL=receiver_email_address
    PASSWORD=your_email_app_pasword

2. Creating the .env File: ⚙️

   • Start by copying the .env.example file and creating a new file named .env.
   • Make sure to fill in the contents of the .env file.

3. Defining Environment Variables: 🔧

   • In the .env file, you'll see placeholders for environment variables.
   • Instead of using a regular password for DB_PASS, you'll need to generate an application-specific password from your Gmail account.

4. Generating Application-Specific Password from Gmail: 🔑

   • Go to your Gmail settings.
   • Look for the option to generate an application-specific password under the "Security" or "Account" section.
   • Follow the prompts to create a password specifically for this project.

5. Completing Setup: ✅

   • Once you've generated the application-specific password from Gmail, use it for the DB_PASS variable in the .env file.

6. Open up two terminal instances and run scripts below in directories /server and /client

• Server

   npm i && node index.js

• Client

   npm i && npm run dev

after running scripts go to http://localhost:5173 with your browser to use the app. 🌐

Usage 🚀

1. 📝📤 Fill out the form and click the Send Message button.
2. ✅📬 Upon successful submission, you will receive a notification.
3. 📧📩 The content of the contact form is sent to your email address.

License 📄

MIT