Newsletter Signup

A responsive newsletter subscription web application that integrates with Mailchimp API to manage email subscribers.

Overview

This application provides a clean, user-friendly interface for visitors to subscribe to a newsletter. User data is securely sent to Mailchimp for mailing list management.

Tech Stack

Technology	Purpose
Node.js	Runtime environment
Express 5	Web framework
Mailchimp API	Email list management
Bootstrap 5	Responsive UI components
Vercel	Serverless deployment

Features

• 📧 Newsletter subscription form with first name, last name, and email
• ✅ Success/failure feedback pages
• 📱 Fully responsive design
• 🔒 Secure API key handling with environment variables
• ⚡ Serverless deployment on Vercel

Project Structure

Newsletter-Signup/
├── api/
│   └── index.js        # Express server & Mailchimp integration
├── public/
│   ├── css/
│   │   └── styles.css  # Custom styles
│   └── images/         # Static assets
├── signup.html         # Main subscription page
├── success.html        # Successful subscription page
├── failure.html        # Failed subscription page
├── vercel.json         # Vercel deployment config
└── package.json

Prerequisites

• Node.js (v18 or higher)
• Mailchimp account with API access

Environment Variables

Create a .env file in the root directory:

MAILCHIMP_API_KEY=your_mailchimp_api_key
MAILCHIMP_LIST_ID=your_audience_list_id

Installation

1. Clone the repository

   git clone https://github.com/yourusername/Newsletter-Signup.git
   cd Newsletter-Signup

2. Install dependencies

   npm install

3. Configure environment variables

   • Create a .env file with your Mailchimp credentials

4. Start the server

   npm start

5. Open in browser

   http://localhost:3000
   

Deployment

This project is configured for Vercel deployment:

1. Push your code to GitHub
2. Import the repository in Vercel
3. Add environment variables in Vercel dashboard:
   • MAILCHIMP_API_KEY
   • MAILCHIMP_LIST_ID
4. Deploy

API Reference

Mailchimp Integration

The application uses Mailchimp's Marketing API v3 to add subscribers:

• Endpoint: https://usX.api.mailchimp.com/3.0/lists/{list_id}
• Method: POST
• Authentication: Basic Auth with API key

License

This project is licensed under the MIT License - see the LICENSE file for details.