Addressbook

Implementation of simple addressbook on AngularJS

If you need real-world application using AngularJS but you tired from TodoMVC app - this project is for you.

Here you can find the code written in best practices and can be a good platform to catch ideas about structuring and writing the code.

Constantly trying to start writing the tests but you don't understand how to structure and what to test? Your tests looks dirty and too complicated? Checkout the real tests for services and controllers. These are following BetterSpecs guidelines so they looks easy and maintainable.

Live example

http://dezoxel.github.io/addressbook

Installation

$ cd /tmp
$ git clone https://github.com/dezoxel/addressbook.git
$ cd addressbook
$ npm install
$ bower install
$ grunt serve:dist

After running latest command your default browser will be automatically opened with the started Addressbook application. If browser was not opened, please open the http://localhost:9000 on your favorite browser.

Features

List of addressbook entries
Search for entries (filtering)
Add
Edit
Delete

Storage adapters

Project supports two types of storages:

MongoDB
Browser's Local Storage

By default, project uses MongoDB for storing the addressbook entries. As an example we use MongoLab SaaS.

If you wish to change the storage adapter, you can do this easily through the application configuration:

// addressbook/config.js
  .config(function(EntryProvider) {
    // adapter name for MongoDB - MongoLabAdapter
    EntryProvider.setAdapterName('LocalStorageAdapter');
  });

If you will use MongoLab, please change the MongoLab Api Key in addressbook/storage/mongolab.config.js too:

// addressbook/storage/mongolab.config.js
  .constant('MONGOLAB_API_KEY', 'API_KEY')

Build & development

Run grunt for building. Code is built under dist directory. Run grunt serve for preview and development. Run grunt serve:dist for production build and preview.

Testing & code quality

See the build history and tests results on Travis CI. Current build status: .

See the code coverage reports on Coveralls.io. Current coverage status: .

See the code quality reports on Code Climate. Current code quality: .

Running grunt test will run the unit tests with Karma.

Tests are following BetterSpecs guidelines.

Run grunt plato for generating code static analysis using Plato. Visit reports/static-analysis/index.html in your browser in order to see the report. Currently code is 81.30% maintainable according to Plato

Deployment

Currently project supports deployment to the Github Pages. Run the grunt buildcontrol in order to deploy latest version of the code.

Technology stack

Twitter Bootstrap - UI framework
AngularJS - base JS framework
Yeoman - scaffolding tool
Bower - frontend package manager
NPM - backend package manager
Grunt - task runner
JSHint - built-in code errors detector
Karma - frontend test runner
Mocha - test framework
Chai - test assertion library
Sinon - test spy, stub and mock library
PhantomJS - browser for testing
Github Pages - hosting platform for the live example
Plato - tool of code visualization, static analysis and complexity
Coveralls - code coverage tool
Code Climate - code quality tool
Travis CI - CI server
MongoDB - NoSQL database
MongoLab - MongoDB SaaS
Local Storage - Local browser's built-in database

TODO

Unit tests for MongoLabAdapter
Implement flash messaging
Make protection of adding entries after 200 addresses
E2E tests
Fix margins & paddings where needed
Google analytics
Create adapter for firebase storage
Optimize performance for 2000 entries

Requirements

One entry in the addressbook is presented by Name (full name) and Address (full address) fields in the free form
Both Name and Address should not be empty
Browser's local storage should be used as a backend

Performance

Application should not be optimized for big collections (>1000 items)

UI

Should use Twitter Bootstrap
Shoud be simple

List of addresses

URL should be persistent
Table with a two data columns: Name and Address
One special (third) column for options: Edit and Delete buttons.
Edit button goes to a separate page with an edit entry form
Delete button immediately removes entry from the addressbook without confirmation
Table header contains Add address button
Add address button goes to a separate page with an add entry form
Search entry input should be placed on top of the table with entries
Search input should have width the same as table
Typing something in the Seach input should filter out the table entries immediately
Search should be performed by Name and Address columns

Add addressbook entry

URL should be persistent
Separate page with a form
Two form fields provided: Name and Address
Both fields should not be empty
Cancel and Add buttons at the bottom of the form
Cancel button goes to the list
Add button adds the entry and goes to the list
Add button is disabled if the form is not valid
Enabling and disabling of Add button should be immediate
If some of the field is not passed the validation it's block is highlighted with a red color and hint for user is provided

Edit addressbook entry

The same requirements as for Add entry, but with corrections below
URL contains ID of the entry
Form should be populated with a data of edited entry
Instead of Add button should be Save
Delete button after Save should be present
Clicking on Delete button should remove entry from the addressbook and redirect to the list
Delete function should work without confirmation

dezoxel / addressbook