https://github.com/ronaldprofile/simple-gallery-photos

uploading photos to Firebase Storage.
https://github.com/ronaldprofile/simple-gallery-photos

firebase reactjs storage styled-components

Last synced: 30 days ago
JSON representation

uploading photos to Firebase Storage.

• Host: GitHub
• URL: https://github.com/ronaldprofile/simple-gallery-photos
• Owner: ronaldprofile
• Created: 2021-10-23T02:07:37.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-11-01T14:34:54.000Z (about 3 years ago)
• Last Synced: 2024-11-08T07:34:25.813Z (3 months ago)
• Topics: firebase, reactjs, storage, styled-components
• Language: TypeScript
• Homepage: https://simple-gallery-photos.vercel.app/
• Size: 70.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Gallery Photos




## 💻 Projeto

aplicação simples que faz upload de imagens para o storage do firebase.

## 🚀 Tecnologias

- ReactJS

- Firebase

- Typescript

## :zap: Novidades

- Fiz pequenas alterações no layout, antes cada imagem era acompanhada com um botão _remover foto_ e pra deixar algo mais suave retirei. Agora basta passar o mouse sobre a foto e um icone para excluir a foto vai aparecer.

- Quando passar o mouse sobre a foto, também vai aparecer outro icone para expandir a visualização da imagem.

- Quando você estiver com a imagem expandida, passe o mouse sobre a imagem para ver mais detalhes como: **name, size e contentType**. 

- Fazer um slider com todas as imagens da galeria (Em breve) 💥💥

## 😍 Detalhes

- Para rodar o projeto na sua máquina será preciso que você crie seu próprio projeto firebase e configure seu cloud storage.

- Depois dessa etapa você precisa configurar as regras do seu storage, por padrão você vai ver algo parecido com isso:

  ```js

    rules_version = '2';

    service firebase.storage {

      match /b/{bucket}/o {

        match /{allPaths=**} {

          allow read, write: if request.auth != null;

        }

      }

    }

  ```

  o que você precisa mudar é essa condição: `if request.auth != null`. Depois de ter feito isso basta **publicar essa atualização**

- Sua próxima tarefa é criar uma pasta chamada **images** na seção **files**, e pronto nosso storage está configurado.

- Mas depois disso tudo é preciso que você adicione suas credenciais do projeto firebase no arquivo **.env.EXAMPLE**, só assim ele vai funcionar corretamente.

  Você vai ver algo assim:

  ```js

  VITE_APP_KEY=

  VITE_AUTH_DOMAIN=

  VITE_PROJECT_ID=

  VITE_STORAGE_BUCKET=

  VITE_MESSAGING_SENDER_ID=

  VITE_APP_ID=

  ```

  basta adicionar seus resepctivos valores.

## ✨ Execute o projeto

- clone o repo: `git clone https://github.com/ronaldprofile/simple-gallery-photos`

- instale as dependências do projeto: `yarn`

- rode o servidor: `yarn dev`

- veja a aplicação funcionado: [localhost:3000]()