Address book application. Express server and client using react & rxjs. Babel to transpile ES2015 to ES5 and tooling supported by webpack.
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 startBrowser open url http://localhost:3000
Pushing dist directory to github.io
git subtree push --prefix dist origin gh-pages- Shows contact list
- Responsive demo: shows the detail block towards the right for all resolution other than mobile. For mobile it shows at the top.
- Search by contact name at the bottom. Implementation uses Observable concepts.
Implemented CRUD using express & MongoDB. REST API up & running on heroku.
- Create contact
request
url => 'https://heroku-pp-test.herokuapp.com/contacts'
type => 'POST'
{
name: 'String',
phone: 'String'
}
status => 200
response
{
name: 'String',
phone: 'String'
}
- 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'
},...]
- 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'
}
- Delete contact
request
url => 'https://heroku-pp-test.herokuapp.com/contacts/:id'
type => 'DELETE'
response
{
name: 'String',
phone: 'String'
}
- 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'
},...]
Don't miss to check out the demo at http://samarpanda.github.io/pp-test/
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent