Website Email Retrieval Using MERN Stack.

Are you looking to create a web application that can retrieve email addresses by website links? using MERN Sack. In this tutorial, we’ll walk you through the process of building a MERN stack application to do just that. What is the MERN stack?

Creating the frontend:

let’s create the front end of our application. We’ll use React to create a simple user interface that allows users to enter a website link and display the associated email address.

Install the necessary dependencies:
npm install react axios

1. Create a file called App.js and add the following code:

javascript
Copy code
import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [url, setUrl] = useState('');
  const [email, setEmail] = useState('');

  const handleSubmit = async (event) => {
    event.preventDefault();
    const response = await axios.get(`/links/${url}`);
    setEmail(response.data.email);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <label>
          Enter a website link:
          <input type="text" value={url} onChange={(event) => setUrl(event.target.value)} />
        </label>
        <button type="submit">Submit</button>
      </form>
      {email && <p>The email address is: {email}</p>}
    </div>

Render App:

Add the following code to index.js to render the App component:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

This code sets up the root element for our React application and renders the App component.

BACKEND:

1. Install the necessary dependencies:

npm install express mongoose body-parser

1. Create a file called server.js and add the following code:

const express = require('express');
const bodyParser = require('body-parser');
const mongoose = require('mongoose');

const app = express();
// Connect to MongoDB database
mongoose.connect('mongodb://localhost/mydatabase');
// Define a schema for website links and associated email addresses
const linkSchema = new mongoose.Schema({
  url: String,
  email: String
});
// Create a model for the links collection
const Link = mongoose.model('Link', linkSchema);
// Parse incoming requests
app.use(bodyParser.json());
// Create an endpoint to add a link and associated email address to the database
app.post('/links', async (req, res) => {
  const { url, email } = req.body;
  const link = new Link({ url, email });
  await link.save();
  res.json(link);
});
// Create an endpoint to retrieve an email address by website link
app.get('/links/:url', async (req, res) => {
  const link = await Link.findOne({ url: req.params.url });
  res.json(link);
});
// Start the server
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

This code sets up a basic Express server, connects to a MongoDB database, and defines two endpoints: one for adding links and associated email addresses to the database, and one for retrieving email addresses by website links.

Testing the application:

Start the development server:

npm start

we’ve created the backend and front end of our application, let’s test it out.

Open your browser and navigate to http://localhost:3000.
Enter a website link in the input field and click the "Submit" button.
The email address associated with the website link will be displayed below the input field.

Conclusion

In this tutorial, we’ve shown you how to create a MERN stack application to retrieve email addresses by website links. By using Node.js, Express, MongoDB, and React, we’ve created a fast, scalable, and easy-to-maintain web application that can be used to solve real-world problems. We hope this tutorial has been helpful in getting you started with MERN stack development.