Click here to Skip to main content
13,151,514 members (40,768 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


1 bookmarked
Posted 13 Aug 2013

Carcassonne Scoring Board Application

, 13 Aug 2013
Rate this:
Please Sign up or sign in to vote.
Carcassonne scoring board application


Here is the link to the application and the link to source code on GitHub.


First of all – hi all!, this is my first post so go easy on me. :)

I would like to give my thanks to James Clear, whose post pushed me to finally put this blog idea up and running. He has some great posts on his blog, which you may want to check out.

The Story (Rather Short One)

Since I’m a big fan of Carcassonne board game and I happen to come across this unique project on the web, I just had to make one for myself… It proved to be great for Carcassonne scoring, and just recently we started using it to track scores in Qwirkle board game.

Here are some pictures of how my version of the electronic carcassonne scoring board looks like:

Web Application

The idea for a web app came naturally since the electronic counter was too cumbersome to carry around. I wanted to see what “the cool kids use” these days in web development so I went to try Yeoman with Angular generator.

Below is the image of the application on iPhone and you can see how it looks like on your device by visiting the link:

How to Use This Project?

First you have to clone it with git, and then run npm install and bower install in the cloned folder for all the dependencies to install themselves:

git clone 
cd carcassonne-scoring-board  npm install  bower install

To test my application, run:

grunt server

and you should see the application open up in your browser.

What I Liked

  • Because of this whole Yeoman development process, I liked the thing that with only few commands, you have the application scaffolded out for you and you don’t have to go and install all the scripts by downloading to your computer first.
  • Pushing to git only takes the crucial parts of your code and not the whole dependency folders (bower_components and node_modules) which are rarely small in size – imagine, you only need to push to the repository stuff that are crucial to the application, other stuff you keep locally, and it of course is way more convenient to clone (or later push for that matter) a 1MB project than say 20MB – everyone who wants to run your project clones it and installs the needed dependencies with two simple commands (npm install and bower install)
  • While writing the application, you can have grunt server “turned on” and every change you make to your files, it automatically reloads the page (also it's running sass to css translation so you’re covered there as well).
  • Developing with the Yeoman workflow is just a bliss once you get a hang of it (and it actually doesn’t have a steep learning curve) – you’ll appreciate the fact that with one command, you can make your code ready for deploying (minimize, concat, optimize images, etc.)
  • Since I only scratched Angulars surface, I can say I liked the data binding, the ng-repeat directive and basically the general speed-up in dev process because of this. Anyways, you can take a look at this post for more information on why Angular rocks


Since this project was done while I was learning (still am) Angular.js, there is a lot space for improvement (especially code structure and logic). That’s why I encourage you to give suggestions on best (better) Angular practices, or even help out on GitHub. Btw, the code on GitHub is free to use, I didn’t put any restrictions on it so feel free to fork it, improve it, alter it to suit your needs.

The icons are from The IconFactory, and the font is Lindsay Becker in case you’re wondering.

Oh and, I would love to hear what you think about this and for which game you used it to track scores?


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Nikola Breznjak
Web Developer
Croatia Croatia
Nikola Brežnjak is an engineer at heart and a jack of all trades kind of guy.

For those who care about titles, he has a masters degree in computing from FER. For the past 7 years he worked in a betting software industry where he made use of his knowledge in areas ranging from full stack (web & desktop) development to game development through Linux and database administration and use of various languages (C#, PHP, JavaScript to name just a few).

Lately he’s been interested in the MEAN stack, Ionic framework and Unity3D. Also, he likes to help out on StackOverflow where he’s in the top 0.X% currently.

Come and see what I write about on my blog.

My book on MEAN stack.

You may also be interested in...


Comments and Discussions

GeneralMy vote of 5 Pin
ThatsAlok6-Sep-13 18:42
memberThatsAlok6-Sep-13 18:42 
GeneralRe: My vote of 5 Pin
Nikola Breznjak6-Sep-13 20:37
professionalNikola Breznjak6-Sep-13 20:37 
SuggestionPhoneGap Pin
Riz Thon19-Aug-13 15:19
memberRiz Thon19-Aug-13 15:19 
GeneralRe: PhoneGap Pin
Nikola Breznjak19-Aug-13 19:26
professionalNikola Breznjak19-Aug-13 19:26 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170924.2 | Last Updated 13 Aug 2013
Article Copyright 2013 by Nikola Breznjak
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid