mbrandau/simple-chat

A simple chat app using Angular and socket.io

simple-chat's Issues

Catch errors on the server object in web_server.js and log them

server.on('error', error => {...})

Remove content from app.component.html and display StartComponent

Remove all content from app.component.html and replace it with <app-start></app-start>.

Style StartComponent

Wrap the content in a Bootstrap card and place it in the center of the page.
On small devices, the card should be full width and without a border-radius.

Add Bootstrap classes to style the form

Create a ChatComponent

Use ng g c chat/chat to create the component in a chat folder.
The component should contain all messages that are sent. Messages by the current user should be on the right side and those from other users on the left. Both of them should be in boxes. Join and leave messages should be centered.

Create a message model with a type (string) and a data (any) value. The component should have an array containing all those messages.

Add a SocketService to the frontend

Generate a new service using ng g s Socket and install socket.io-client using npm i --save socket.io-client. Then include socket.io in the service using import * as io from 'socket.io-client';

Add a license section to README.md

Add FormsModule to app.module.ts

Import FormsModule from @angular/forms and add it to the imports of the AppModule.

Add deployment guide to README

Create a StartComponent for the frontend using Angular CLI

Run ng g c Start in the frontend folder.

Add username validation

A username should only consist of alphanumeric characters and should have a minimum length of 4.

If the username is valid, the server should emit a login event to the socket with the value true.
If it's invalid the login event should have the value false.

Make the form in StartComponent an Angular Form

Use the Template Driven approach. The submit but should be disabled until the form is valid. The username field is required and as a minimum length of 4 while consisting only of alphanumeric characters.

Include Bootstrap v4 in frontend/src/index.html

Use the tags provided on getbootstrap.com to include bootstrap in the Angular App.

Use npm package beautiful-logs for server-side logging

Install the package with npm install --save beautiful-logs and add it to the web_server.js file using

const log = require('beautiful-logs')();

log.info('simple-chat is starting...');

Set background color to #f7f7fa

File to change: /frontend/src/styles.scss

Add build script to package.json

Add a script that builds the frontend to the main package.json

cd frontend && npm run build --prod

Add a Dockerfile for simple deployment using docker

It should the latest node image and run the command npm start.

Create Node.js server

Create basic Node.js server exposing the /frontend/dist folder on http://localhost/ and creating the socket.io object.

Log all user related events (join,msg,leave) in web_server.js

Use log.debug()

Add contribution guide to README