Demo: Clique Aqui
Projeto WEB responsivo para reproduzir o windows live messenger em web. O Windows live Messenger foi um dos mensageiro mais famosos da internet, que foi descontinuado em 15 de março de 2013.
O MSN foi o mais usado no mundo com mais de 230 milhões de usuários. No Brasil, o serviço atingiu mais de 75% dos usuários da internet, que significava mais de 34 milhões de usuários no país.
Este projeto foi feito para relembrar o mensageiro e matar um pouco da saudade.
Ele foi feito com reactJS, node e socket.io.
- Acesso ao msn
- Conversar com outras pessoas
- Mostrar janelinha ao ficar online
- Mostre o que você está ouvindo no spotify (New!)
- Mudar subnick, Status, avatar
- Mudar tema
- Chamar atenção
- Multi Chats
- Msn sounds
- Aumentar e mover a janela de chat
- Troque de idioma
- Winks
- Emoticons
Tecnologias que usei para desenvolver esse projeto no front-end
- ReactJS
- Styled Components
- React icons
- React Hook Form
- Socket.io
- react-notification-system
- interactjs
Clonando repositório
$ git clone https://github.com/pablobion/msn-js
&& cd msn-js
Instalando as dependências
$ cd backend && yarn
$ cd frontend && yarn
Iniciando
Configurando ips.
Frontend/src/configs/config_connections.js Dentro desse arquivo terá o campo de colocar o ip, no caso é o ip do servidor, onde ele está hospedado.
Há também uma confiuração para fazer a sincronização com o spotify funcionar, para mostrar na lista de contatos a musica que está escutando
Crie um app no spotify api https://developer.spotify.com/dashboard Ao criar o spotify irá fornecer duas chaves, client e secret.
Também é necessário configurar o redirecionamento de url, colocando a url onde está hospedado seu servidor. Exemplo.
http://localhost:80/routes/spotify/callback
http://msn-js.herokuapp.com/routes/spotify/callback
Feito isso, será necessário colocar o client_id e o client_secret no arquivo de configuração na pasta do backend
Backend/configs/config.js Dentro desse arquivo terá o campo de colocar o ip, no caso é o ip do servidor, onde ele está hospedado. E informar as duas chaves.
Configuração na vercel e heroku
$ cd backend && yarn start
$ cd frontend && yarn start
Feito por Pablo Bion.
Agradecimentos ao @AndroidWG, samu obrigado pelos assets!