Criando um chat de conversa em tempo real usando ReactJs para frontend e ExpressJs para backend e MongoDB
A interface foi estilizada com cores pardões que remetem ao espaço, seu container e sidebar de mensagem estão transparent para valorizar a imagem de fundo, o design foi estilizado com tailwind css. O framework utilizado no frontend foi o React na qual criei components de rotas para navegação das paginas de login e cadastrar se conectando ao mongoDB pelo json.
No Backend estalei a expressjs usando JavaScript (nodejs) onde configurei um servidor Express com rotas para uma aplicação web, incluindo a manipulação de requisições de autenticação e mensagens, path para lidar com caminhos de arquivos, express para criar o servidor web, dotenv para carregar variáveis de ambiente de um arquivo .env, e outros para lidar com cookies, rotas e conexão com o MongoDB. Utilizei o JWT como atentificação para fornecer um token seguro para returnar ao lado do cliente.
- Intalação do React com vite na pasta frontend
- Instalação do Tailwind
npx vite@latest -template
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
- Intalação do Express e MongoDB na pasta backend
npm init -y
npm install express
npm i mongoose
