-
- 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
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
This project was developed with the following technologies:
- ✔️ React
- ✔️ Context API
- ✔️ Hooks
- ✔️ Styled Components
- ✔️ TypeScript
- ✔️ OAuth
- ✔️ Firebase Storage
- ✔️ Modal / Toastify / Switch
- ✔️ ESLint
- ✔️ Prettier
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
andsecret_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;
}
}
}
- Clone the repository
git clone git@github.com:PatrickMoraisN/Photobase.git
- Change the working directory
cd Photobase
- Install dependencies
npm install
- 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__
- Run the app
npm start
You are all set! Open localhost:3000 to see the app.