Picky ( BigTime Search API )
- This is a premium product, under license, and not for distribution.
An advanced API Search application which allows to integrate dynamic Restful/API using only client with Angular 6 and (Angular CLI 6). Currently supports
Getty Images API,
Flickr API, and
OMDB API (Movie DB). It can be extended to any number of new type Restful/API’s for data reference. There are two pages, main products page which can toggle apis, and the product-item/single page which lists all of item values in json format. It has a localstorage integration for any subsequent views to the same item
API’s have feature to display random results upon load . You can filter thru the results, and search the live API as well > then filter thru it.
Please read more about the details below.!
- Important: You need to register your own api keys to use in development, and purchase for production.
- Demo site is available, see below.
Flickr is social media for sharing free/images and selling artwork/images. Yo u can search for different types of artwork
in different sizes using their custo m filters.
Getty Images is a well known payed service for buying best images you can fin d, search for all size/type/shape with custom
OMDB API Movie DB
OMDB API Is a movie data base where you can search for all generes and type: movi e/tv series, and by
from imDB database.
PunkAPI is a fake beer product search API, good for all kinds of testing.
INSTALL NE W Angular 6 CLI, and install angular-picky-search!
$/ npm uninstall -g @angular/cli # remove old $/ npm cache verify # clear cache $/ npm install -g @angular/cli@next # latest $/ npm install # from the application dir $/ npm rebuild node-sass # from the application dir
- After installing run ^
npm rebuild node-sass
- and have a look at the
package.jso, for any issues;
OPTIONAL I THINK…
$/ gem update --system $/ gem install compass
- im not sure if installing compass is required since im using node_modules pa ckage;
$/ ng new PROJECT-NAME # NEED TO INSTALL ANGULAR CLI 6, FIRST! $/ ng g component new-cmp # new component $/ ng g module new-mod # new module $/ ng g service new-service # new service
START THE APP
$/ npm start # alternativly `ng serve` $/ npm run build:prod #production ./dist folder
- open you browser in
- sometimes node.js will lock the port, you need to kill it with
taskkill /f /im node.exeor linux
- flickr API:
https://www.flickr.com/services/developer/api/< < you need account and api_key to enable
flickr for your development purposes only, need to purchase license to use in production!
https://punkapi.com/documentation/v2<< it is free to use, but it has timeout limits, which
it will show you.
- gettyimages API:
https://api.gettyimages.com/swagger/ui/index<< you need account and Api-Key to enable gettyimages for your development purposes only, need to purchase
license to use in production!
- OMBD API Movie DB:
https://www.omdbapi.com<< you need account and apikey to enable omdbapi for your
development purposes only, im not sure about the specifics of the production license, you have to enquire about it
- Bootstrap 4
- Angular 6 CLI
- RXJS,SASS/COMPASS, Bootstrap 4, Lodash, LocalStorage (management, smart stor age), Rest API, API-MANAGER, api dynamic
integration, dynamic routes
- GettyImages, Flickr, OMBD >> Restful/API client integration, HTTP/As Observalbe,
- Model Interfaces, API/ Model decorators, data Model decorators, error mock v alidation
- Live Search, filter Search
- Services: IX/UX animation, @angular/animations, TransactionResolver (product -item data resolver), event emmiters, global
- Progresive modular integration.
- Production ready and optimized
- Tested and works on Firefox and Chrome/Safari, ( Dont care about IE, but sho uld work fine)
- Runs on all 6, ready to go.
- integrate script barrel, for easy loading!
- Integrade WebWorkers to streamline style loading,
ng ejectnot avaialbe to create webpack.config as yet.
- Let me know your professional feedback, its always welcome.
- Thank you, have fun with it.
- I have tested it with mongoose and mongoStorage with express-session on Openshift, works, but OpenShift has limited resources on free account
- I have tested it on heroku without mongoose and storage, just using express-session with JWT, works fine
Demo Site available on heroku node.js server at :
username: user1 password: user2
View Demo: Picky-Search
Session times out after few minutes, to stop abuse, you need to re-login 🙂
ps: my gettiimages dev licence expired, so the api is not working