Clone of Mailchimp using MERN Stack.

Hello, Readers, this is Abhishek, welcoming you to a new post, today I will be talking about another team project in Masai School the clone of the popular email campaigning app Mailchimp.com. In this project, we have used the MERN stack and some external Libraries to build it & in just 6 days we have completed this project with some amazing functionalities as a part of our curriculum’s Unit-5 project evaluation. This blog is all about what are all things we used? how do we do it? what challenges did we face? and what were our key learnings?

GitHub Repository Link: https://github.com/shuklabhisekh/Clone-of-Mailchimp

Project Deployed Link: https://mailchimp-frontend.vercel.app/

Used Technology: MongoDB, Express, React, NodeJS, Material UI, UnLayer Library, GrapesJS

New Features: Authentication, Login confirmation, Search Functionality, Payment Integration, Order confirmation.

Team Members: Shilpa, Akshay, Vikas, Faruk, Abhishek

A GLIMPSE OF PROJECT -

Mailchimp is an American marketing automation platform designed and developed for businesses using email to reach out to their target markets.

It is an all-in-one tool where you can manage your mailing lists, create hassle-free custom email templates, and nurture and automate your entire marketing campaigns.

Our approach to marketing focuses on healthy contact management practices, beautifully designed campaigns, and powerful data analysis.

Enterprises looking to leverage their email marketing can use Mailchimp, to run their campaigns like a well-oiled machine.

• Home Page :

Fig 1.0 This is the Homepage of the website where the user will first land when he/she open the website.

• Signup page :

Fig 2.1 This is Signup Page where users need to signup to create an account

Fig 2.2 Account verification

• Log In page :

Fig 2.3 The login page from where the user can land on user dashboard by filling signup details

• User Dashboard Pages :

Fig 3.1 This is the dashboard from where the user can update his details and also logout

Fig 3.2 Dashboard page

Fig 3.3 From here user can create email templates or website

Fig 3.4 Template Create Page

Fig 3.5 Import Contact

Fig 3.6 Add Contact Page

Fig 3.7 Copy-Paste Page

Fig 3.8 Template Selection Page

fig 3.8 Create Email Template Page

Fig 3.9 Website Builder PAge

Fig 3.10 All Campaigns Page

Fig 3.11 All Contacts Page

Fig 3.12 Add Subscriber Page

• Payment Page :

Fig 4.1 Payment Selection Page

Fig 4.2 Payment Page

Fig 4.3 Payment Page

Fig 4.4 Payment confirmation

CHALLENGES WE FACED :

1. Select what features we can implement with the time frame in mind.
2. Collaborating remotely via zoom and having clear communication among the teammates.
3. Having a clear division of workload distribution.
4. Figuring out bugs and feature implementations.
5. Write readable code so the other person can figure out what is happening and help with the troubleshooting with ease.

KEY LEARNINGS :

1. A better understanding of React and Material UI.
2. Figuring out different and optimal ways to achieve a feature.
3. Better interconnect and reusability of code.
4. Working in a team efficiently and listening to teammates so collaboration can be seamless.

CONCLUSION :

We got a new team this time, and we made a great team, each member has pushed their limits to complete the work in given time constraints and was always present to help other team members. We have successfully cloned major functionalities in just 7 days. Overall it was a great teamwork experience and a week full of learning.

Thanks a lot for being with me till here, I will meet you again in some other post, this is me Abhishek, signing off.