No description, website, or topics provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

General Assembly Logo

Game Project Lessons

So you've made your first Single Page Web Application! Nice work, but there's lots to learn!

This repo holds different scenarios in which certain code is broken. The different scenarios are listed below; each has a "before" and "after" branch. The "after" branch includes detailed commits with what was done to resolve each problem.


  • None of my auth is working!
    • Find the starter code on the auth-broken branch
    • Find the solution code on the auth-working branch
  • "New Game" is broken!
    • Find the starter code on the new-game-broken branch
    • Find the solution code on the new-game-working branch
  • The game board is broken!
    • Find the starter code on the board-broken branch
    • Find the solution code on the board-working branch
  • Why and how do I use PATCH?
    • Find the starter code on the patch-broken branch
    • Find the solution code on the patch-working branch
    • Find some alternatives on the patch-alt branch
  • My messaging is not very DRY - what can I do?
    • Find the starter code on the messaging-wet branch
    • Find the solution code on the messaging-dry branch
  • My board click logic is not very DRY - what can I do?
    • Find the starter code on the click-wet branch
    • Find the solution code on the click-dry branch


  1. Fork and clone this repository.
  2. Install dependencies with npm install.
  3. Checkout to a scenario's starter branch (see above).
  4. Run with grunt serve



Developers should store JavaScript files in assets/scripts. The "manifest" or entry-point is assets/scripts/app.js. In general, only application initialization goes in this file. It's normal for developers to start putting all code in this file, but encourage them to break out different responsibilities and use the require syntax put references where they're needed.


Developers should set apiUrls.production and apiUrls.development in assets/scripts/config.js. With apiUrls set, developers may rely on apiUrl as the base for API URLs.


Developers should store styles in assets/styles and load them from assets/styles/index.scss. Bootstrap version 3 is included in this template.

Forms and Using getFormFields

Developers should use getFormFields to retrieve form data to send to an API.


To deploy a browser-template based SPA, run grunt deploy.

Adding Images

To add images to your project, you must store them in the public directory. To use the image in HTML or CSS, write the path to the image like this:

<img src="public/cat.jpg">


#my-cool-div {
  background-image: url('public/cat.jpg')

Note that there's no ./ or / in front of public/filename.jpg.

Adding Fonts

To add custom fonts to your app, you can either use a CDN like Google Fonts, or you can download the fonts and save them in the public directory. If you use the former method, follow the directions on the website providing the fonts.

For local fonts, put the files in public, and then import and use them in a .scss file like this:

@font-face {
  font-family: 'Nature Beauty';
  src: url('public/Nature-Beauty.ttf') format('truetype');

.element-with-custom-font {
  font-family: 'Nature Beauty';


Developers should run these often!

  • grunt nag or just grunt: runs code quality analysis tools on your code and complains
  • grunt make-standard: reformats all your code in the JavaScript Standard Style
  • grunt <server|serve|s>: generates bundles, watches, and livereloads
  • grunt build: place bundled styles and scripts where index.html can find them
  • grunt deploy: builds and deploys master branch

Additional Resources


  1. All content is licensed under a CC­BY­NC­SA 4.0 license.
  2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact