will3g / Instarocket-Instagram

O projeto foi desenvolvido durante a semana OmniStack da Rocketseat, utilizando NodeJS & MongoDB + React + React Native e frameworks como socket.io, mongoose, express, entre outros... Projeto desenvolvido em uma semana e com Real Time.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Instarocket

Objetivo

O Instarocket é uma réplica do Instagram. O objetivo dessa aplicação é aprender funcionalidas que o Instagram possuí, tanto em parte WEB quanto Mobile.

Obs: Projeto desenvolvido em uma semana por meio do evento semana OmniStack da rocketseat.

Funcionalidades

O App atualmente possuí funcionalidades (via Mobile e WEB) como, criação de posts e likes em real-time. Sendo elas: título, descrição do post, seleção de imagem, hashtags e nome do autor.

Para o funcionamento em real-time foi utilizado a lib socket.io, sendo ela um dos responsáveis por sincronizar interações por tempo real, entre aplicação WEB e Mobile

Próximas implementações

Futuramente a aplicação possuíra as seguintes funcionalidades:

  • Comentários
  • Cadastro de usuários
  • Avatar e perfil de usuário
  • Login e autenticação de usuários
  • Compartilhamento de posts
  • Criação de chat para conversa em tempo real

Funcionamento WEB

Por meio da lib socket.io temos a experiência de tempo real. Na seguinte demonstração podemos ver o funcionamento da aplicação WEB, upload de arquivo, likes e criação de posts.

Funcionamento WEB e Mobile

Por meio da seguinte demonstração podemos ver que a aplicação WEB se comunica com a aplicação Mobile (android), possuindo também match em real-time.

O post que aparece "derrepente" foi criado via Mobile, assim como suas curtidas também (repare que variou de 1 à 5 curtidas).

Funcionamento Mobile e WEB

Com a proxima aprensentação da aplicação em parte Mobile, podemos ver o funcionamento de real-time. O post que surgiu derrepente foi criado via aplicação WEB.

Funcionamento Mobile (criação de posts)

Para criar um novo post no App Mobile, assim como na parte WEB, é necessário pressionar a câmera na parte superior à direita. Para selecionar o arquivo desejado é só pressionar "selecionar imagem".

Logo em seguida aparecerá a seguinte tela com duas opções, podendo tirar a foto agora ou selecionar da galeria de fotos.

upload-post-cel2

Na sequêcia temos os campos, nome, local, descrição e hashtags. Preenchendo os tais campos é só pressionar "compartilhar" que o post será criado em real-time e salvo no banco de dados.

upload-post-cel

Funcionamento banco de dados

O banco de dados utilizado foi o MongoDB Atlas uma instância de banco de dados em nuvem, que fica responsável por armazenar todos os posts dos usuários. E para interface grágica (GUI) do armazenamento de dados, utilizamos o MongoDB Compass.

About

O projeto foi desenvolvido durante a semana OmniStack da Rocketseat, utilizando NodeJS & MongoDB + React + React Native e frameworks como socket.io, mongoose, express, entre outros... Projeto desenvolvido em uma semana e com Real Time.


Languages

Language:JavaScript 69.0%Language:Objective-C 8.9%Language:CSS 4.9%Language:Ruby 4.7%Language:Starlark 4.1%Language:Java 3.7%Language:HTML 3.7%Language:Dockerfile 1.0%