https://github.com/patrickmoraisn/photobase
Save your photos in Firebase
https://github.com/patrickmoraisn/photobase
eslint-prettier firebase oauth react-js styled-components theme-switcher typescript
Last synced: 3 months ago
JSON representation
Save your photos in Firebase
- Host: GitHub
- URL: https://github.com/patrickmoraisn/photobase
- Owner: PatrickMoraisN
- Created: 2021-12-23T18:53:01.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-01-08T22:53:07.000Z (over 4 years ago)
- Last Synced: 2025-06-23T00:02:02.432Z (about 1 year ago)
- Topics: eslint-prettier, firebase, oauth, react-js, styled-components, theme-switcher, typescript
- Language: TypeScript
- Homepage:
- Size: 3.44 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# :pushpin: Index
- [Project Media](#camera_flash-project-media)
- [About](#monocle_face-about)
- [Technologies](#rocket-technologies)
- [Installation](#hammer_and_wrench-installation-steps)
- [Author](#closed_book-author)
---
# :camera_flash: Project Media
Login - upload invalid photo
Upload valid photo
Modal photo - delete photo
---
# :scroll: 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*
---
# :monocle_face: 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
---
# :rocket: Technologies
This project was developed with the following technologies:
- :heavy_check_mark: **React**
- :heavy_check_mark: **Context API**
- :heavy_check_mark: **Hooks**
- :heavy_check_mark: **Styled Components**
- :heavy_check_mark: **TypeScript**
- :heavy_check_mark: **OAuth**
- :heavy_check_mark: **Firebase Storage**
- :heavy_check_mark: **Modal / Toastify / Switch**
- :heavy_check_mark: **ESLint**
- :heavy_check_mark: **Prettier**
---
# :hammer_and_wrench: 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:
```js
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth!=null;
}
}
}
```
---
1. Clone the repository
```bash
git clone git@github.com:PatrickMoraisN/Photobase.git
```
2. Change the working directory
```bash
cd Photobase
```
3. Install dependencies
```bash
npm install
```
4. Create `.env` file in root and add your variables
```bash
### 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
```bash
npm start
```
You are all set! Open [localhost:3000](http://localhost:3000/) to see the app.
---
# :closed_book: Author
Patrick Morais
[](https://www.linkedin.com/in/patrick-morais/)
[](mailto:ppternunes@gmail.com)
[](https://www.github.com/patrickmoraisn/)