👉 Sobre
👉 Funcionalidades
👉 Demonstração
👉 Como executar
👉 Tecnologias
👉 Autor
👉 Licença
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:
- 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.
💡O Frontend precisa que o Backend esteja sendo executado para funcionar, que pode ser acessado AQUI.
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
Veja o arquivo .env.sample
# 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
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
- Editor: Visual Studio Code
- Teste de API: Insomnia
- Ícones: Feather Icons
- Fontes: Grand Hotel
Este projeto esta sobe a licença MIT.
Feito com 😆 por Guilherme Rocha Vieira 👋🏽 Entre em contato!