Picky Search App, Angular 6 | Search API

  • EagleX | Elegant and Smart! | Picky Search App, Angular 6 | Search API | Angular 6, Angular 6 CLI, angular.js, Bootstrap 4, css flex box, ES6, git (version control), javascript, jshint, LocalStorage, lodash.js, MVC, nodejs, npm, OOP, OpenShift, punkapi.com, RESTful API, RX.JS, sass, sass compass, typescript, webpack, ,
  • EagleX | Elegant and Smart! | Picky Search App, Angular 6 | Search API | Angular 6, Angular 6 CLI, angular.js, Bootstrap 4, css flex box, ES6, git (version control), javascript, jshint, LocalStorage, lodash.js, MVC, nodejs, npm, OOP, OpenShift, punkapi.com, RESTful API, RX.JS, sass, sass compass, typescript, webpack, ,
  • EagleX | Elegant and Smart! | Picky Search App, Angular 6 | Search API | Angular 6, Angular 6 CLI, angular.js, Bootstrap 4, css flex box, ES6, git (version control), javascript, jshint, LocalStorage, lodash.js, MVC, nodejs, npm, OOP, OpenShift, punkapi.com, RESTful API, RX.JS, sass, sass compass, typescript, webpack, ,
  • EagleX | Elegant and Smart! | Picky Search App, Angular 6 | Search API | Angular 6, Angular 6 CLI, angular.js, Bootstrap 4, css flex box, ES6, git (version control), javascript, jshint, LocalStorage, lodash.js, MVC, nodejs, npm, OOP, OpenShift, punkapi.com, RESTful API, RX.JS, sass, sass compass, typescript, webpack, ,
  • EagleX | Elegant and Smart! | Picky Search App, Angular 6 | Search API | Angular 6, Angular 6 CLI, angular.js, Bootstrap 4, css flex box, ES6, git (version control), javascript, jshint, LocalStorage, lodash.js, MVC, nodejs, npm, OOP, OpenShift, punkapi.com, RESTful API, RX.JS, sass, sass compass, typescript, webpack, ,
  • EagleX | Elegant and Smart! | Picky Search App, Angular 6 | Search API | Angular 6, Angular 6 CLI, angular.js, Bootstrap 4, css flex box, ES6, git (version control), javascript, jshint, LocalStorage, lodash.js, MVC, nodejs, npm, OOP, OpenShift, punkapi.com, RESTful API, RX.JS, sass, sass compass, typescript, webpack, ,
  • EagleX | Elegant and Smart! | Picky Search App, Angular 6 | Search API | Angular 6, Angular 6 CLI, angular.js, Bootstrap 4, css flex box, ES6, git (version control), javascript, jshint, LocalStorage, lodash.js, MVC, nodejs, npm, OOP, OpenShift, punkapi.com, RESTful API, RX.JS, sass, sass compass, typescript, webpack, ,
  • EagleX | Elegant and Smart! | Picky Search App, Angular 6 | Search API | Angular 6, Angular 6 CLI, angular.js, Bootstrap 4, css flex box, ES6, git (version control), javascript, jshint, LocalStorage, lodash.js, MVC, nodejs, npm, OOP, OpenShift, punkapi.com, RESTful API, RX.JS, sass, sass compass, typescript, webpack, ,
Skills: Responsive, Mobile, SPA

Picky ( BigTime Search API )

Developed by Eaglex

  • This is a premium product, under license, and not for distribution.

DESCRIPTION

An advanced API Search application which allows to integrate dynamic Restful/API using only client with Angular 6 and (Angular CLI 6). Currently supports PunkAPI, 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

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

Getty Images is a well known payed service for buying best images you can fin d, search for all size/type/shape with custom
filters.

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 imdbID <<
from imDB database.

PunkAPI

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 engine requirements in package.jso
    n
    , 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 CODE

$/ 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 http://localhost:4200
  • sometimes node.js will lock the port, you need to kill it with taskkill /f /im node.exe or linux killall node

API DOCUMENTATION

  • 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!
  • punkapi: 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 and 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
    your self

TECHNOLOGY/STACK

  • Bootstrap 4 https://getbootstrap.com/
  • Angular 6 CLI https://github.com/angular/angular-cli
  • Compass/Sass http://compass-style.org/reference/compass/
  • 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
    services
  • @pipe’s/filters
  • Progresive modular integration.
  • Production ready and optimized

APP HIERARCHY

 <<<< declaration of services at [AppModule] level; [AppComponent] >> < SearchInputDirective > < EventEmitService > < MyGlobals > [ProductComponent] >> < ApiManagerService >< DataService > < LocalStorageService > < EventEmitService > < MyGlobals > [ProductItemComponent] >> < TransactionResolver > < MyGlobals > SASS > all styles live in scss dir.

TESTED 🙂

  • Tested and works on Firefox and Chrome/Safari, ( Dont care about IE, but sho uld work fine)
  • Runs on all 6, ready to go.

TODOS

  • integrate script barrel, for easy loading!
  • Integrade WebWorkers to streamline style loading, ng eject not avaialbe to create webpack.config as yet.

FINAL THOUGHTS

  • Let me know your professional feedback, its always welcome.
  • Thank you, have fun with it.

Demo Site available on 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 🙂

Go to Project
eaglex specializes in building websites and applications specific to your needs. Some of the services include: logos, adverts, landing pages, emails, small to medium size websites driven by WordPress CMS, Angular JS/SPA website/applications, Heroku mean stack applications. We offer best possible deals to our clients, so if you are looking for a personalized and dedicated service get in touch today!