EmailBox

Introducing Emailbox, the innovative product from Backendifyi that streamlines email form handling for your applications. With Emailbox, you get access to a powerful API that effortlessly manages email addresses submitted through your forms.

Unlock the true potential of your email forms with Emailbox from Backendifyi. Sign up now and experience the convenience of automated email form handling. Empower your application with Emailbox and take email management to the next level.

Say goodbye to manual validation and monitoring; Emailbox takes care of it all.

Getting Started

1. Visit Backendifyi and click on the Sign in with Google button.

2. Create EmailBox by entering your Project Name.

note

You can create only 3 EmailBox and cannot delete anyone of them. (Delete EmailBox feature coming soon.)

Configuration

BASE URL

Following is the BASE API URL to be requested:-

https://api.backendifyi.vercel.app/

Authentication

To access the API endpoints, you need to include authentication credentials in your requests. The API uses API keys for authentication.

Obtaining an API Key:

To obtain an API key, follow these steps:

• Sign In with Google on Home Page

• Create a Project or just select one

• Copy the API key and store it securely. This key will be used to authenticate your API requests.

Security Considerations

• Keep API Keys Secret: Treat your API keys like passwords. Do not expose them in publicly accessible code or share them with unauthorized individuals.

• Rotate Keys: For security, consider rotating your API keys periodicall

Rate Limiting

To ensure fair usage and server stability, the API enforces rate limits on the number of requests that can be made by an end user within a specific time period.

Rate Limit Details

• Rate Limit: 3 requests per hour per client.
• Reset Time: The rate limits are reset every hour.

Validating Email Address on the Client Side

Before sending an email address to the API, it's a good practice to validate its structure on the client side to ensure it follows a valid email format. This helps prevent unnecessary API calls and improves the overall user experience.

Email Validation

To validate an email address on the client side, you can use regular expressions. Below is an example using JavaScript and a simple regular expression:

function isValidEmail(email) {
  const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
  return emailPattern.test(email);
}

const userEmail = "user@example.com";
if (isValidEmail(userEmail)) {
  // Proceed to make the API request
} else {
  // Display an error message to the user
}

Endpoints

POST /emailbox/addEmail

Description: Add an email to the email box.

Parameters:

• None

Example Request:

POST /api/emailbox/addEmail/

Headers:

{
  "Content-Type": "application/json",
  "Authorization": "APIKey {token}"
}

Request Body:

{
  "email": "user@example.com"
}

Response:

• 201 Created

  {
    "message": "Email added successfully."
  }

• 400 Bad Request

  {
    "error": "Bad Request",
    "message": "Description of the error"
  }

• 403 Forbidden

  {
    "error": "Forbidden",
    "message": "Too many requests"
  }

Code Example

In this example, we'll implement a subscription form component called Footer that enables users to subscribe to tech articles. The component includes the following functionalities:

1. Input field to enter an email address.
2. Sending a POST request to the backend API to add the email to the subscription list.

The example code illustrates how to set up the necessary HTTP headers, construct the data payload, and make the API request using the axios library. Additionally, it covers handling successful and error responses from the API.

// Import necessary dependencies
import React, { useState } from 'react';
import axios from 'axios';

// Define the Footer component
function Footer() {
  // State to store the entered email
  const [email, setEmail] = useState('');

  // Handle email input change
  const handleInputChange = (event) => {
    setEmail(event.target.value);
  };

  // Handle form submission
  const handleSubmit = () => {
    // Prepare headers and data for the API request
    if (email === "" || email === null || email === undefined) {
        window.alert("Please enter an Email Address!")
        setEmail("")
        return
    }
    if (!validateEmail(email)) {
        window.alert("Please enter a Valid Email Address!")
        setEmail("")
        return
    }
    const token = `${process.env.REACT_APP_BACKENDIFYI_APIKEY}`;
    const config = {
      headers: {
        'Content-Type': 'application/json',
        Authorization: `APIKey ${token}`,
      },
    };
    const data = {
      email: email,
    };

    // Make a POST request to the API
    axios
      .post('https://api.backendifyi.vercel.app/api/emailbox/addEmail/', data, config)
      .then((response) => {
        window.alert("Subscription Added Successfully!")
      })
      .catch((error) => {
        // Handle error response
        if(error.response.status === 403){
                window.alert("Too Many Requests!")
                setEmail("")
            }
            else{
                window.alert("We are facing some issues!")
                setEmail("")
            }
      });
  };

  // Component rendering
  return (
    <div>
        <center>
          <div className="title">Subscribe to my Tech Articles</div>
          <div>You will receive an email, whenever I post a new Article</div>
          <div>
            <input type="email" placeholder="Enter Email Address" value={email} 
            onChange={handleInputChange} required
            />
            <button type="button" onClick={handleSubmit}
            >
            Subscribe
            </button>
          </div>
        </center>
        <div className="footer">Made with ❤️ by Prem!</div>
      </div>
  );
}

export default Footer;

Feel free to incorporate and adapt this example to your React application to enable sending email data to your backend API for processing.

You can checkout this repository for the code.

Conclusion

Congratulations! You've delved into the world of Emailbox, an innovative product brought to you by Backendifyi. With Emailbox, the way you handle email forms in your applications is revolutionized. This example showcased how to seamlessly integrate Emailbox's API into your React application to effortlessly manage email addresses submitted through your forms.

Should you have any questions, encounter any hurdles, or seek further guidance, don't hesitate to reach out to our dedicated support team at backendifyi@gmail.com. Your journey with Backendifyi's Emailbox is just beginning, and we're here to ensure your success every step of the way.

Thank you for choosing Backendifyi's Emailbox. Embrace the future of email form management and experience the difference today!