Notes

If you want to run it with your own mailchip account, then define following variables in your .env.local file.

• MAILCHIMP_API_KEY=_________________
• MAILCHIMP_API_SERVER=_______________
• MAILCHIMP_AUDIENCE_ID=______________

You can get all those values once you create your account in Mailchimp.

Tech Stack Used

• Next-JS v13.4
• TypeScript
• Tailwind CSS
• Mailchimp API

Used Packages

• formik
• react-confetti
• yup

UI Captures

Basic UI.

UI after you subscribe the newsletter(see the satisfying celebration. 👻)

References

Some great blogs that provided me guide to build this newsletter.

• https://www.agirl.codes/setup-newsletter-mailchimp-nextjs
• https://www.peterlunch.com/blog/nextjs-mailchimp
• https://codewithmarish.com/post/newsletter-subscription-using-next-js-and-mailchimp-api
• https://leerob.io/blog/mailchimp-next-js