A front end AngularJS web application for viewing the Steam Store.
You can see a demo version of the application deployed to Heroku here: https://steam-navigator.herokuapp.com/
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.
- 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.
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:
- Install Node.js. NPM comes packaged with it.
npm installin the command line while in the project directory. It will install dependencies from the package.json file.
- Install Bower.
bower install. It will install front end dependencies from the bower.json file.
- To run the local dev server at http://localhost:5000, run
node index.js. It will run the Node/Express application in the index.js file.
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
This project is open source under the terms of the MIT License.