Create React App Deploy to Heroku

Deploy create react app to Heroku. Demo NPM (Node Package Manager), Node.js, Git, GitHub, Heroku and knowledge of how to write commands in a terminal will be required for this project. There are many ways to install NPM, Git and Node.js on your machine. I recommend researching the best way to install this software. Visiting the NPM, Git and the …

Angular5 with Firebase, MySportsFeeds API, HttpClientModule

This is an example of a previous post showing new changes to Angular in the latest stable release. Setting up FireBase. Install these modules for firebase config. Run npm install angularfire2 firebase –save. Import Firebase settings to app.module.ts. Create a firebase db and config the db in app.module.ts. In the firebase DB console click Authentication tab then click the WEB …

Angular4 : Update data realtime Firebase

Get real-time data updates from firebase. I created a small cms to allow me to update the status of my data by clicking on an image to toggle true or false. I created a view that can only be accessed by an authenticated user so that a random user wouldn’t be able to make unwanted changes to my app. I …

Angular4: User authentication with Firebase

Create user authentication with firebase The purpose of this app is to show confirmed starting NHL goalies every day. The api provides a best guess and the actual starter does not get updated to until well into game time. This created a lot of false data being represented on this app. I created a system of indicators that work with …

Javascript Job Interview Question and Answer: EventDispatcher Test

Most front-end jobs these days want you to know your way around javascript TESTS. The problem is when I am making an app at home I don’t write tests, but rather I use manual testing in chrome’s js console. However, when startups make big apps and deploy them into production they want to make sure that the app will scale …

Javascript Job Interview Question and Answer: Create multiple buttons with Javascript

How to make 20 buttons appear in the DOM by using javascript. I applied for a web developer job opening recently and I was asked to create a group of buttons with the text “Button” and the index number of the button written inside the button without writing any html. I had to use javascript to render these buttons in …

Angular4 Angular-material2 Table and Dialog: MySportsFeeds API Part 6

Angular-material2 dataTable. This app uses angular material2 dataTable module to show baseball player data. Run npm install –save @angular/material @angular/cdk Import it to app.module import {MdTableModule} from ‘@angular/material; Set it up in app.component define the table columns and pass data to the table. Call the dataTable in the app.component.html //app.compoent.ts import { Component, ViewChild, Inject, OnInit } from ‘@angular/core’; import …

Angular4 Make custom data: MySportsFeeds API Part 5

Make custom data. In this app I use one array to show all data in the views. I use 5 different endpoints to get different information about each player. In order to sort the data and apply it to the correct player I use the responses returned by the endpoints, for each loop through the response and match data by …

Angular4 Make multiple api calls dynamically: MySportsFeeds API Part 4

Make multiple api calls dynamically. In this app I needed to get a week worth of game data. To do this I need to get the schedule for the week and strip all the game ID’s then dynamically assign the id to call for each game and get detailed stats from that game. In app.component.ts import ‘rxjs/add/observable/forkJoin’;. Make an api …

Angular4 with Firebase: MySportsFeeds API Part 3

Setting up FireBase. Install these modules for firebase config. Run npm install angularfire2 firebase –save. Import Firebase settings to app.module.ts. Create a firebase db and config the db in app.module.ts. Initialize app in the imports array in ngModule. //app.module.ts import { FirebaseService } from ‘./firebase.service’; import { AngularFireModule } from ‘angularfire2’; import { AngularFireDatabaseModule } from ‘angularfire2/database’; import { AngularFireAuthModule …