Sobre | Layout | Tecnologias e Ferramentas | Funcionalidades | Instalação | Licença |
✔ Projeto concluído
Este projeto é uma aplicação React de galeria de fotos usando Firebase. O projeto é para fins didáticos e foi feito baseado em um tutorial do Youtube do canal Boniek Lacerda.
Veja como ficou o arquivo package.json
- Exibir fotos do Storage do Firebase
- Fazer upload de fotos para o Storage (só são permitidos os formatos jpg, jpeg ou png)
- Fazer download das fotos
- Excluir fotos
Para abrir e executar o projeto no seu computador, você vai precisar ter o Node.js instalado na sua máquina (recomendo baixar a versão LTS). Além disso, para conseguir executar os comandos de terminal a seguir, você precisará instalar o GIT. É recomendado ter alguns conhecimentos básicos de HTML, CSS, JavaScript e React para conseguir entender os códigos do projeto e também ter alguma noção prévia de comandos de terminal para conseguir acompanhar as instruções no seu computador. Além disso, para o projeto funcionar na sua máquina você vai precisar configurar seu próprio Storage no Firebase. Para isso, primeiro você deve possuir uma conta no Google. Para saber como configurar seu Storage no Firebase continue acompanhando este tutorial. Após ter certeza de que tudo está instalado no seu computador, acompanhe os passos a seguir:
- Faça download do projeto ou clone ele com o seguinte comando no terminal:
git clone https://github.com/Gustavo-Victor/photo-gallery.git- Descompacte o arquivo do projeto e abra a pasta do projeto; se tiver clonado basta só abrir a pasta do projeto; você pode abrir a pasta usando o seguinte comando:
cd photo-gallery/- Instale as dependências necessárias do projeto (a pasta do projeto precisa estar aberta no terminal):
npm i -g yarn ;
yarn install ; -
Vá para a plataforma do Firebase, crie um projeto do Firebase e registre um app nesse projeto. Ao registrar o App no Firebase, você receberá um objeto JavaScript de configuração que servirá para conectar a aplicação aos recursos do Firebase. Após, isso você deve criar um Bucket padrão do Cloud Storage para poder usá-lo. Caso tenha dúvidas sobre como realizar os passos acima, confira alguns links que podem ajudar:
-
Renomeie o arquivo ".env.example" para ".env.local" sem as aspas. Após isso, copie os valores das propriedades do objeto de configuração do seu projeto no Firebase e cole esses valores nos campos em branco das variáveis de ambiente do arquivo ".env.local".
-
Execute o projeto em modo de desenvolvimento:
yarn dev - Abra o projeto em seu navegador de preferência. (Basta digitar na barra de pesquisa: http://localhost:5173/).
O projeto está sob a Licensa MIT
Qualquer pessoa pode usar, clonar e contribuir com este projeto.
Clique aqui para saber mais