Project 2: Socket.IO Chat application

My final project was to create a simple chat application using the socket.io library. Socket.IO enables realtime, bi-directional communication between web clients and servers. It has two parts: a client-side library that runs in the browser, and a server-side library for Node.js.

The hardest part of this application was getting the socket-client set up and to accomplish this I read a lot and watched many tutorials. In the end I was able to produce a basic chat application that has room for advancements and alterations in the future. 

On the Angular side of this I felt that it really tied in a lot of the things I learned this semester about components and angular's structure. Below you will find a demonstration of my working application. You can see that two separate users in separate tabs are able to converse and the conversation is displayed in both in real-time.

Challenge 6: MapIt application using the Google Maps API

This application was not only my first look at using the GoogleMaps API but also my first time using the AngularCLI. The first thing I noticed? It was really nice not having to go clone the sample template from git and to have my project all made for me simply by running the "ng new projectname" command.

The Google Maps API was also surprisingly easy to setup simply by following the instructions at the link below: https://angular-maps.com/docs/getting-started.html

In this application I learned new Angular CLI commands such as the above mentioned: "ng new projectname", I also learned I needed to use ng serve to serve the project and that it would be at localhost:4200.

The marker entries are stored in local storage and this is similar to what we have done in class with vanilla JS, PHP and more. I plan to expand this project and use it to track places I have visited within Nova Scotia and abroad.

Below you will see a video demonstration of the application and my score results on the quiz at the end of the tutorial.

Challenge 5: Authentication using Auth0

For this challenge I wanted to learn how to implement an authentication system in Angular 2. I had previous experience with authentication during my co-op where I used passportjs for a token based authentication system. During this challenge I implemented Auth0 and used Twitter Bootstrap for styling. It was surprisingly much easier than I expected. Auth0 handled all of the user storage and signup without me having to worry about it.

I used the quickstart template to get the application up and running quickly and created a service to do the basic interaction with auth0. I also had to install Angular2jwt which is a helper library for autho0 and the lock widget.

One challenge I had was ensuring I included the extension when I added angular2 jwt component to the map object in systemjs.config.js. The component needed to be added to packages as well. Another challenge with the lock widget was that even though it was installed I still needed to add a script tag to index to html:
     <script src="http://cdn.auth0.com/js/lock/10.2/lock.min.js"></script>

Other than those package issues I found the application to be very straight-forward. Below you can see a video of my working challenge.

Here are my quiz results from the tutorial on Auth0: