📌 Index

• Project Media
• About
• Technologies
• Installation
• Author

---

📸 Project Media

Login - upload invalid photo

Upload valid photo

Modal photo - delete photo

---

📜 Rules

• Photo upload

  • It is not allowed to upload an empty file.
  • It is not allowed to upload file with other extensions than these: 'image/jpeg', 'image/jpg', 'image/png'.

warned by React Toastify

---

🧐 About

Project designed to practice React integration with Firebase Storage and Google OAuth / Theme Switch.

To log into the application, react-google-login lib was used. Data is persisted to Local Storage via useGoogleAuthInfo Hook.

To change themes, Styled Components Theme Context was used via useSwitchTheme Hook.

I hope you enjoy :D

---

🚀 Technologies

This project was developed with the following technologies:

• ✔️ React
• ✔️ Context API
• ✔️ Hooks
• ✔️ Styled Components
• ✔️ TypeScript
• ✔️ OAuth
• ✔️ Firebase Storage
• ✔️ Modal / Toastify / Switch
• ✔️ ESLint
• ✔️ Prettier
  
  

---

🛠️ Installation Steps

This project involves many .env files, be sure you have them!

---

You must have an active project on google console

• Go to https://console.cloud.google.com/
• Create and configure a new project API (set http://localhost:3000 in allowed urls).
• Save client_id and secret_key keys, we need them.

You must have an active project on Firebase

• Go to https://console.firebase.google.com/
• Create and configure a new project.
• Save Firebase keys, we need them.
• On Storage session, create a folder images.
• On Storage session, set Rules to:
  

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth!=null;
    }
  }
}

---

1. Clone the repository

git clone git@github.com:PatrickMoraisN/Photobase.git

2. Change the working directory

cd Photobase

3. Install dependencies

npm install

4. Create .env file in root and add your variables

### GOOGLE

REACT_APP_CLIENT_ID=__your-client-id-from-google__
REACT_APP_SECRET_KEY_CLIENT=__your-secret-key-from-google__

### FIREBASE

REACT_APP_API_KEY=__your-api-key-from-firebase__
REACT_APP_AUTH_DOMAIN=__your-auth-domain-from-firebase__
REACT_APP_PROJECT_ID=__your-project-id-from-firebase__
REACT_APP_STORAGE_BUCKET=__your-storage-bucket-from-firebase__
REACT_APP_MESSAGING_SENDER_ID=__your-messaging-sender-id-from-firebase__
REACT_APP_APP_ID=__your-app-id-from-firebase__

5. Run the app

npm start

You are all set! Open localhost:3000 to see the app.

---

📕 Author

Patrick Morais