SportsSpot

Technologies Used: Node.js,React,Redux,Websockets,CSS,Bootstrap,Mocha,chai

SportsSpot is a web application is capitalizes the powerful React and Redux.It utilizes ESPN API provided by News API for headlines and images. Node.js is used for server side rendering. The server makes a requests to the ESPN API periodically to fetch the latest news which is then emmitted by the socket to the client. The client then updates the news as and when it receives.Another Major API that the application uses is MySportsFeed API which provied all the sports data, such as standings,player profile,Points table,etc.The app currently provides information about 4 sports namely (NFL,NHL,MLB and NBA).

Home page

The Home page contains information about all the sports along with top headlines of the moment. The news feed is provided by ESPN for the home page.

Clicking on other tabs in the navigation bar gives information about specific sports.For example clicking on NFL produces the following results. The results are fetched by making a request to Eventregistry api which provides the sports news from multiple web sites of our chose. For this app I fetch the news from CBSSports,ESPN and FoxSports. The communication between the server and the client is made through web sockets

NFL Home Page

Clicking on specific sports tab brings up a sub avigation bar which includes links for scores,schedules,standings,and teams.Cliking on each of them will fetch the content of that particular tab. For example when you click on the scores tab I dispatch an action of type 'GET_SCORES'. The client then emits this action and the server which is subscibed to this action makes a request to the MYSportsFeed API. I am utilizing the capabilities of promise for server to wait until the promise resolves and then dispatch the response. On the client as react has the option of componentDidMount I register the componet to socket action dispatched by the server. In my case the action is 'curr_feeds'. I use socket.once as this action has to take place once when the component loads on not when other component loads. This will present the scorecard as follows

Scorecard of NBA
NHL schedule for 2016-2017 season

MLB standings for 2016-2017 season

NFL Stats Page

NFL Player Passing Stats Page

MLB Teams Page

MLB Teams Roster Stats Page

You can also create an account in order to customize such as add news to favorites.Login sceen was built using the muti theme ui provided by google.