Project Overview

This project is a full-stack contact form management system built using the MERN stack (MongoDB, Express.js, React, Node.js).
It allows users to fill out a contact form, automatically sends a confirmation email to the user, and stores all inquiries securely in a MongoDB database.
An admin panel is included where only authorized administrators can view and delete user submissions after logging in.
The system uses React Toastify for real-time success/error notifications, ensuring a smooth and professional user experience.

Screenshots

Key Features

• Full CRUD Functionality: Create (form submission), Read (admin view), Delete (admin delete).
• Authentication & Authorization: JWT-based secure login for admin access.
• Email Integration: Sends automated confirmation emails using Nodemailer + SMTP.
• MongoDB Storage: All inquiries stored with timestamps and user details.
• Modern UI: Built with React Vite + Tailwind CSS v4.1 for a clean, responsive interface.
• Toast Notifications: Smooth UX feedback for user actions.
• Admin Dashboard: Role-based protected route for managing inquiries.
• API-Based Architecture: Fully RESTful backend with Express.js routes.

Functionality

• User-Side:
  • Users can submit a contact form with their name, email, subject, and message.
  • On submission:
    • The data is stored in MongoDB.
    • A success toast notification appears.
    • A confirmation email is sent to the user automatically.
• Admin-Side:
  • Admin can log in securely using email and password (JWT authentication).
  • Once logged in:
    • Admin can view all inquiries from users.
    • Admin can delete any inquiry if needed.
    • Unauthorized users cannot access admin features.
• Email Notification System:
  • Every successful submission triggers an automatic email to the user confirming their message has been received.
• Real-Time Toast Notifications:
  • Uses React Toastify to show instant messages for successful submission, login, deletion, or errors.

Technology Used

• Frotnend:
  • React (Vite): Component-based UI for better performance.
  • Tailwind CSS v4.1: For fast, responsive styling.
  • React Router DOM: Handles routing between Contact, Login, and Admin pages.
  • React Toastify: Real-time toast notifications.
  • Axios: For API calls to the backend.
• Backend:
  • Node.js + Express.js: REST API server.
  • MongoDB + Mongoose: Database and schema management.
  • Nodemailer: For sending confirmation emails.
  • bcrypt.js: For password hashing and secure authentication.
  • jsonwebtoken (JWT): For admin login authentication.
  • dotenv + CORS: Environment configuration and cross-origin support.

Why This Project Is Useful

• Practical Learning: Demonstrates full MERN stack integration with authentication, email handling, and database CRUD.
• Portfolio-Worthy: A real-world project that shows full-stack capabilities.
  Reusability: Can be easily extended into any business “Contact Us” or “Inquiry Management” system.
• Automation: Automatically emails users and manages inquiries without manual work.
• Security: Implements protected routes and JWT authentication for admin actions.
• Scalable Design: Easily adaptable for additional roles or features (e.g., reply to inquiries, analytics, etc.).

Deployment and Environment Setup

1. Environment Variables Setup:
   • backend/.env
     • PORT: 3000
     • MONGO_URI: mongodb_url_string
     • JWT_SECRET: your_jwt_secret_key_here (if needed)
   • frontend/.env
     • VITE_API_URL: backend_url
2. Deployment Overview:
   • Render or Railway for backend hosting
   • Vercel or Netlify for frontend hosting
   • MongoDB Atlas for the database
3. Backend Deployment:
   • Push your code to GitHub.
   • Go to Render.com or Railway.app.
   • Create a new Web Service and connect your GitHub repository.
   • Choose “backend/” as the root directory.
   • Add the following environment variables on Render:
   • PORT=10000
   • MONGO_URI=your MongoDB Atlas URI
   • JWT_SECRET=your JWT secret
   • Start command: npm start (Ensure your backend/package.json includes “start”: “node server.js”)
   • After deployment, note your backend URL, e.g. https://your-backend-name.onrender.com
4. Frontend Deployment:
   • Go to Vercel.com or Netlify.com.
   • Create a new project and connect the GitHub repo.
   • Select the “frontend/” folder as root.
   • In environment variables, set:
   • VITE_API_URL=https://your-backend-domain.com/api (or REACT_APP_API_URL if using CRA)
   • Deploy.
5. MongoDB Atlas Setup:
   • Go to https://cloud.mongodb.com
   • Create a free cluster.
   • Add your current IP address in Network Access.
   • Create a database user and password.
   • Copy the connection string and replace username, password, and database name in MONGO_URI in backend/.env

Download SOurce Code

Project Setup Instructions

Note: This project is for educational purposes only. Not for commercial sale.