Windows Live Messenger (MSN) JS 💬

🔎   A antiga rede de relacionamentos do windows.

     

Demo: Clique Aqui

     

📽 Sobre o projeto

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.

Funcionalidades

• 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

Tecnologias que usei para desenvolver esse projeto no front-end

• ReactJS
• Styled Components
• React icons
• React Hook Form
• Socket.io
• react-notification-system
• interactjs

💻 Como começar

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.

Há duas parametrizações a serem consideradas, é necessário mudar o ip nas configurações do frontend e backend.

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

Vercel

Framework preset React

Build Command CI= npm run build

Root Directory frontend

Heroku

Buildpacks (Settings) 'heroku/nodejs'

Config vars key PROJECT_PATH

value backend

Iniciando a aplicação

$ cd backend && yarn start

$ cd frontend && yarn start

---

Feito por Pablo Bion.

 Veja meu linkedin

Agradecimentos ao @AndroidWG, samu obrigado pelos assets!