/addressbook

Implementation of simple addressbook on AngularJS

Primary LanguageJavaScriptGNU General Public License v2.0GPL-2.0

Addressbook Build Status Coverage Status Code Climate

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:

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: Build Status.

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

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

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

TODO

  1. Unit tests for MongoLabAdapter
  2. Implement flash messaging
  3. Make protection of adding entries after 200 addresses
  4. E2E tests
  5. Fix margins & paddings where needed
  6. Google analytics
  7. Create adapter for firebase storage
  8. 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

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