ColdSunERA / steam-navigator

A front end AngularJS web application for viewing the Steam Store

Steam Navigator

A front end AngularJS web application for viewing the Steam Store.

Demo App

You can see a demo version of the application deployed to Heroku here: https://steam-navigator.herokuapp.com/

Functionality

It leverages the Steam Store web API and displays top selling games in a responsive interface. Users can view different categories for games with a side navigation and get more information for individual games as well.

Application Info

• AngularJS is used for the front end. It functions as a single-page application.
• Node and Express.js are used for a simple back end (found in the index.js). It acts as a proxy to make API requests to Steam in order to circumvent cross-origin denial.
• Data for games on the front end is acquired via AJAX requests made through a service, invoked via app.js resolves before pages are loaded.
• AngularJS Material is used for layout and styling.
• A responsive grid system is implemented for games and screenshots via AngularJS Material through a service.
• Images are loaded then animated in to prevent loading distortions in the image grids. Game thumbnails and screen shot thumbnails are modified with a directive which triggers a controller scope variable and displays the image when it has loaded via ng-show in the template. That in turn triggers ngAnimate CSS animations to fade the fully loaded component template in.

Install Instructions

Node Package Manager (NPM) is used for back end dependencies while Bower is used for front end dependencies. To install the application locally, follow these instructions:

1. Install Node.js. NPM comes packaged with it.
2. Run npm install in the command line while in the project directory. It will install dependencies from the package.json file.
3. To run the local dev server at http://localhost:5000, run npm run start. It will run the Node/Express application in the index.js file.

Testing

The test framework uses Jasmine and Karma as the test runner.

Tests are found under the tests folder. Currently the test suite is incomplete.

On Linux, you can install the Karma CLI via the command: sudo npm install -g karma-cli. Then, after NPM and Bower dependencies have been installed, run the tests with karma start.

License

This project is open source under the terms of the MIT License.