How to Create Your Own Mailchimp Service?

Mailchimp is often used to collect email lists. This post will teach you how to quickly create a Mailchimp-style email collection form. You can then start using it to collecting subscribers' emails.

Why build your own version of a Mailchimp form?

There are a few reasons to do create your own Mailchimp style form, one is to remove the Mailchimp sponsor branding in your form. Sponsor branding free subscriber list forms are a paid-for feature with Mailchimp, and you may not want your subscribers to see third-party branding. Another reason is to avoid sharing user data with third parties. If you're going to take a privacy-minded approach with your services, it is good practice to avoid sharing user details with third parties wherever possible.

The "Supastack".

I picked a stack with minimal setup, and which allows us to scale easily later without any stress.

• Next.js Click here for more info
• Tailwind CSS Click here for more info
• Supabase Click here for more info

Next.js is a React based Front-End framework and it helps us to build a web page of Mailchimp.

Tailwind CSS is a utility-first CSS framework packed with classes. So, we don't have to create CSS styling classes, instead, we can just use ready-made Tailwind CSS classes directly in our HTML.

Supabase is a Backend-as-a-Service based on PostgreSQL Database. It provides not only a database but also Authentication, RESTfull APIs, a real-time database, and other back-end-related services (I'm also currently interning at Supabase!).

Let's create the project

First of all, we need to sign up for an account with Supabase. You can sign up at Supabase.io. Once you have an account, create a new project and enter the following code in SQL Editor of the project:

create table functions_emails (
  id bigint generated by default as identity primary key,
  name text,
  email_address text NOT NULL UNIQUE
);

-- This creates a table called functions_emails with id, name, and email_address columns.

Secondly, clone my starter repository and open it with your Code Editor.

Now, let's install the required dependencies by entering the following command on the terminal of the Code Editor:
npm install

We should now have everything set up. It is time to make the pieces together. Create a file called env.local to save Environment Variables:

NEXT_PUBLIC_SUPABASE_URL=SupabaseURL 

NEXT_PUBLIC_SUPABASE_KEY=SupabaseKEY

SupabaseURL is a unique URL provide by Supabase to connect to your project database. You can find it in your project settings.

SupabaseKEY is a key provided by Supabase to access your project database. You can find it in your project settings.

Now, we can move on to Form Component. I have already created the form except main functionality. Let's complete the component by modifying handleSubmit(e) function:

// Form.js
async function handleSubmit(e) {
    try {
      e.preventDefault();
      if (!email)
        throw new Error(
          "Email is required. Please provide a valid email address!"
        );
// Following code inserts data into the database.
      const { error } = await supabase.from(props.table).insert([
        {
          name,
          email_address: email,
        },
      ]);
      resetName();
      resetEmail();
      if (error) alert(error.details);
      if (!error) alert("You have successfully subscribed!");
    } catch (error) {
      alert(error.message);
    }
  }

The Form Component should now be ready. We now have to add it into the index.js file in the pages folder by entering the following code:

// index.js
import Form from "../components/Form/Form";

export default function Home() {
  return (
    <div className="dark">
      <main>
        <Form table="functions_emails" title="Functions" />
      </main>
    </div>
  );
}

One final step is running the project by entering the following code in the terminal:
npm run dev

If it runs successfully, we can check the project by entering the http://localhost:3000 URL on our choice of browser. Now we have to submit the form by entering our name and email address.

If the form is submitted successfully, the data should be stored in the Supabase database.

If you have made it this far, it means you have your own Mailchimp Service. Of course, you can customize it however you want and start using it.

The final version of the project: https://mailchimp.vercel.app/
The final version of the project Github Repository: https://github.com/erkeen/mailchimp

Thank you for your attention!