💳 Business Card Maker App with React

Make your business Card

Demo Link => https://609e02e6eafbe46d09c18459--business-card-maker-react.netlify.app/

---

🔗 Index

1. Purpose of this project
2. Tech Stack
3. Over View
4. About Project
5. Architecture
6. What I've learned
7. Issue

1. Purpose of this project

• Learn how to route using React Router
• Learn how to manage user authentication using Firebase
• Learn how to use the Firebase's realtime database
• Learn how to use cloudinary to reseize and upload images

2. Tech Stack

3. Over View

4. About Project

🔑 Login Page

- Login with Google or Github or Facebook

- If you are logged in, you will be logged in automatically even if you return to the login page.

- Even if you log out, your card information will be shown again when you log in again.

📝 Maker Page

- Enter information on the left maker side, upload a image and press the add button, you will see the result on the right preview side.

- If you edit information in the left maker section, you can see a preview of your business card in the preview side at the same time.

- Add and Delete 

5. Architecture

Overall

1. When the login button is clicked, run the login function.
2. Firebase authenticates the user.
3. React Router send the user to Maker page
4-5-6. If the user has own data, Firebase's database get the data and get image from Cloudinary.
7. Editor section and Preview section shows the data.
8. When the user changes the data, it changes in the database as well as the data shown in Preview section.

6. 📝 What I've learned

- How to route using React Router.
- Understand what dependency injection is.
- How to authenticate users with Firebase.
- How to use Firebase SDK(Software Development Kit).
- How to treat data in object form.
- How to use Firebase Realtime database.
- How to use Cloudinary to upload media files.

7. 💥 Issue

- Unnecessary rending of components. (header, footer, buttons, cards)
    => Improve performance with memo() and useCallback()