🚧 Aplicação Finalizada! 🚧

🏁 Tópicos

👉 Sobre
👉 Funcionalidades
👉 Demonstração
👉 Como executar
👉 Tecnologias
👉 Autor
👉 Licença

💻 Sobre o projeto

Um clone do site do Instagram, na qual você pode logar/registrar, criar novos posts(imagens/videos), seguir outros usuários, ver os posts dos usuários que você segue, comentar e curtir as postagens e receber notificações relacionadas ás suas postagens e quem te segue.

O site pode ser acessado no link abaixo:

⚙️ Funcionalidades

• Usuário pode se registrar criando uma conta com seu nome, email, nome de usuário, senha e foto de perfil;
• Usuário pode se logar utilizando suas credenciais;
• Usuário pode criar um post e armazenar as imagens no cloudinary;
• Usuário pode seguir outros usuários;
• Usuário pode ver o post de outros usuários (pessoas que o usuário segue);
• Usuário tem um perfil que mostra todas as suas postagens;
• Usuário pode visualizar o perfil de outros usuários;
• Usuário pode ver um feed global de imagens (de acordo com os usuários que ele segue);
• Usuário tem uma página de notificações (sempre que alguém comenta/curte um post seu ou passa a te seguir);
• O feed é atualizado sempre que um novo post é adicionado/deletado (Web Sockets);
• O post é sempre atualizado em tempo real quando alguém curte/comenta (Web Sockets);
• Página de perfil dos usuários é atualizada em tempo real p/ seguidores/seguindo (Web Sockets);
• As notificações (coração) no header do site é atualizado em tempo real (Web Sockets);
• Layout responsivo para mobile.

🕹️ Demonstração

🚀 Como executar o projeto

💡O Frontend precisa que o Backend esteja sendo executado para funcionar, que pode ser acessado AQUI.

Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, Node.js, Yarn.d Além disto é bom ter um editor para trabalhar com o código como VSCode

Váriaveis de Ambiente

Veja o arquivo .env.sample

🧭 Rodando a aplicação web (Frontend)

# Clone este repositório
$ git clone https://github.com/grochavieira/instagram-clone-frontend.git

# Acesse a pasta do projeto no seu terminal/cmd
$ cd instagram-clone-frontend

# Vá para a pasta da aplicação Front End
$ cd web

# Instale as dependências
$ yarn install

# Execute a aplicação em modo de desenvolvimento
$ yarn start

# A aplicação será aberta na porta:3000 - acesse http://localhost:3000

🛠 Tecnologias

As seguintes ferramentas foram usadas na construção do projeto:

Website (React + TypeScript)

• react router dom
• react icons
• axios
• scss
• react-lottie
• react-loading
• react-dropzone
• react-timeago
• react-toastify
• react-video-js-player
• socket.io-client

Veja o arquivo package.json

Utilitários

• Editor: Visual Studio Code
• Teste de API: Insomnia
• Ícones: Feather Icons
• Fontes: Grand Hotel

🦸‍♂️ Autor

_{🌟 Guilherme Rocha Vieira 🌟}

📝 Licença

Este projeto esta sobe a licença MIT.

Feito com 😆 por Guilherme Rocha Vieira 👋🏽 Entre em contato!