Angular 4 App that uses the Pixabay API to search for public Domain images, using Material Design principals.
Branch: master
Clone or download
jbuzzanco Style card for text in center, not in center of container
want to have the text in the center of a container
Latest commit 7a5396f Sep 18, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e chore: initial commit from @angular/cli Sep 2, 2017
src Style card for text in center, not in center of container Sep 18, 2017
.angular-cli.json
.editorconfig
.gitignore
README.md
karma.conf.js
package-lock.json
package.json
protractor.conf.js
tsconfig.json
tslint.json

README.md

Public Domain Image Search App

Search images within the public domain using Pixabay API

example screenshot

Technologies that made this:

  • Angular 4
  • TypeScript
  • Angular CLI
  • Angular-cli-ghpages
  • Angular Material
  • Bootstrap
  • Pixabay API

What it does?

This is an application that allows a user or visitor of the site to search for something that they would like to see. Say, waffles, and it would return 10 photos with tags (say breakfast), the number of comment and likes, and the user who posted waffles from the Pixabay API. Upon hitting the image the user wants, it takes them to the view within Pixabay to download or view.

This is hosted live on a production server, view application here 😁.

What I learned?

Although this is a fairly small application, I loved working with Angular as a framework. It was most fun working with Angular Material, using Google's Material design to create a visually appealing application. The documentation was small but straightforward for Angular Material and gave you plenty of feedback in the console when you needed to complete the next step for implementing it, while being clearly written in the documentaion, for dependencies. Perhaps what I most learned is dependencies and how the template depends on the model and the app module is mainly global within the app directory. Happy to have this built and look forward to working more with Angular.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.