Address book

Address book application. Express server and client using react & rxjs. Babel to transpile ES2015 to ES5 and tooling supported by webpack.

Usage

git clone https://github.com/samarpanda/pp-test.git

# install dependencies
npm install

# create distribution directory ui public folder
npm run deploy

# Start mongo db locally with directory path
mongod --dbpath $DIR_PATH

# Start server
npm start

Browser open url http://localhost:3000

Host html in github.io

Pushing dist directory to github.io

git subtree push --prefix dist origin gh-pages

Client

1. Shows contact list
2. Responsive demo: shows the detail block towards the right for all resolution other than mobile. For mobile it shows at the top.
3. Search by contact name at the bottom. Implementation uses Observable concepts.

Server

Implemented CRUD using express & MongoDB. REST API up & running on heroku.

1. Create contact

request
url  => 'https://heroku-pp-test.herokuapp.com/contacts'
type => 'POST'
{
  name: 'String',
  phone: 'String'
}

status => 200
response
{
  name: 'String',
  phone: 'String'
}

1. Get all contacts

request
url  => 'https://heroku-pp-test.herokuapp.com/contacts'
type => 'GET'

status => 200
response
[{
  name: 'String',
  phone: 'String'
},
{
  name: 'String',
  phone: 'String'
},...]

1. Update contact

request
url  => 'https://heroku-pp-test.herokuapp.com/contacts/:id'
type => 'PUT'
{
  name: 'String',
  phone: 'String'
}

status => 200
response
{
  name: 'String',
  phone: 'String',
  _id: 'String'
}

1. Delete contact

request
url  => 'https://heroku-pp-test.herokuapp.com/contacts/:id'
type => 'DELETE'

response
{
	name: 'String',
	phone: 'String'
}

1. Filter by name

request
url  => 'https://heroku-pp-test.herokuapp.com/contacts/filter/:name'
type => 'get'
{
	name: 'String'
}

response
[{
  name: 'String',
  phone: 'String'
},
{
  name: 'String',
  phone: 'String'
},...]

Demo

Don't miss to check out the demo at http://samarpanda.github.io/pp-test/

List of todos

1. Update from UI
2. Combining search result & list view
3. Test suite using ava
4. Multiple browser testing using karma and saucelabs
5. Refactor the repetative codes