https://github.com/csahu14/mailchimp-clone

Mailchimp clone build on react js using Firebase as Backend and firestore database, we use Material UI , Chakra UI and SCSS in frontend, Paypal as payment gateway and we use React Redux and Context APIs to configure connections between components and dynamic Search Section. For Login and Signup we use Firebase Auth and mail services
https://github.com/csahu14/mailchimp-clone

chakra-ui css3 favicon firebase firebase-auth firebase-database material-ui netlify payment-gateway paypal reactjs redux scss

Last synced: 3 months ago
JSON representation

Mailchimp clone build on react js using Firebase as Backend and firestore database, we use Material UI , Chakra UI and SCSS in frontend, Paypal as payment gateway and we use React Redux and Context APIs to configure connections between components and dynamic Search Section. For Login and Signup we use Firebase Auth and mail services

• Host: GitHub
• URL: https://github.com/csahu14/mailchimp-clone
• Owner: cSahu14
• Created: 2022-02-27T10:09:36.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-02-27T10:14:36.000Z (over 4 years ago)
• Last Synced: 2025-03-28T15:29:21.583Z (over 1 year ago)
• Topics: chakra-ui, css3, favicon, firebase, firebase-auth, firebase-database, material-ui, netlify, payment-gateway, paypal, reactjs, redux, scss
• Language: JavaScript
• Homepage: https://clone-mailchimpmailchimp.netlify.app/
• Size: 7.67 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          

# Mailchimp Clone!

 - Mailchimp clone build on **React js** using **Firebase** as

   **Backend** and **firestore** database.

 - We use **Material UI** , **Chakra UI** and **SCSS** in frontend.

   


   

 - **Paypal** as payment gateway

 - **React Redux** and **Context APIs** to configure connections between components and dynamic Search Section.

 - For Login and Signup we use **Firebase Auth** and **mail services**.

 - On SingUp and reseting password a custom mail will be send to you

   given email too.

# Home Page

![](https://miro.medium.com/max/1400/1*fZk9jNu2DEf4eVLQaa00dQ.png)

![](https://miro.medium.com/max/1400/1*DahbeqfWyA_75vf0_5ETgQ.png)

## Search Section

 

 -  On clicking on Search icon in navbar, navbar will slide down and    search section will appears.

![](https://miro.medium.com/max/1400/1*LSYTgNLDF7pTn4fe6Oid6w.png)




 -  On search any desired section it will show the list and all items according to that section

 ![](https://miro.medium.com/max/1400/1*cm77TaCz9BKsxh5wa7_ZUw.png) 




 - We can even filter the type of specific sections which we are doing with **react redux**

## Blog page and Ads page 

| ![](https://miro.medium.com/max/1400/1*1aH5t16F8LxsVWt5m51JiA.png) | ![](https://miro.medium.com/max/1400/1*_QrKzlYIAXp-awhM_8CZng.png) |

|--|--|

| Blog page | Ads page |

## Sign up section 

 - Signup section is done by using Firebase Auth .

 

![](https://miro.medium.com/max/1400/1*9snOjY9y8pUlZowShfrbuQ.png)

## Login section 

![](https://miro.medium.com/max/1400/1*1I26hc7IvpX-MNV-3Gr2Cg.png)

 - If details are wrong 

 

 ![](https://miro.medium.com/max/1400/1*umZsECiuaeJtAUIfnWfw_A.png)

 

  - If details are corrent 

 

 ![image](https://user-images.githubusercontent.com/71251834/155871947-5ff80578-e298-40d6-9730-3fc5c05f9014.png)

 

 

 - On clicking forget password it will collect your email address and send a mail on it

|![](https://miro.medium.com/max/1400/1*a_IchPT3C3iJ9xU9CWuKYw.png)| ![](https://miro.medium.com/max/1400/1*9T1CEP5U0SDQS8ZMQpVPEg.png) |

|--|--|

| ![](https://miro.medium.com/max/1400/1*4dHc0iJb9gKOZIMHPb-VzA.png) | ![](https://miro.medium.com/max/1400/1*o1nrT_YlPBXknNJgaSD9Wg.png) |

# Payment Section

In payment section we use **Pay pal.**

![](https://miro.medium.com/max/1400/1*YdAy2xDvc3hhmaNk27s1_w.png)



|![](https://miro.medium.com/max/1400/1*nr4ioRZMKdMV-e2gYgNPIQ.png)| ![](https://miro.medium.com/max/1400/1*l27zaheC0XjHZ1g52QSgdA.png) |

|--|--|

| Creadit card | Pay pal |

![](https://miro.medium.com/max/1400/1*ftKCUwQvjBtoOg6-WfJA3Q.png)







Team Pandavs