danieloh91 / choose-your-own-angular-api-mashup

Choose your own api mashup [angular]

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Choose Your Own API Integration

Your goal is to build an API "Mashup", or "rapid prototype", using Angular and your choice of public APIs.

Setup

Please fork and clone this repo, and run the budo local server:

budo  -P --host=localhost --open

Suggested API Endpoints

Do Not Use endpoints that require AUTH or SECRET TOKENs.

Keep in mind that most API endpoints are NOT meant to be consumed directly by the client/front-end/browser. There is nowhere to hide a "secret" api token in a front end application(!), so APIs like instagram, facebook, twitter, etc. are not suitable for this kind of project.

Rapid Prototype

Angular is the perfect tool for building quick front-end prototypes so that you can get feedback.

You have the next hour to build a rapid prototype to show to your client (Make a plan and Keep it Simple!):

  1. First, come up with a "proof of concept".
  • Do you have the data you need?
  • Do you have the tools you need?
  1. Next, create a quick mock-up so you can get client feedback (it can be a single HTML file!):
  • Your client should be able to navigate, and click/toggle UI elements.
  • But everything should be hard coded.
  1. Get client feedback.
  • If the client likes it, build it out, and plug in your API.
  • Otherwise, incorporate their feedback and iterate again.

Once you have client-approval, bring it to life.

Keep in mind: Developer time is expensive. Iterate quickly and get client feedback before investing too much time into a single idea or approach! You won't get it right the first time!

Killer Feature

Your app should do one thing, and do it well. Here are some ideas:

  • Like it / Love it -- toggle UI elements like buttons and icons
  • Sort it / Search it -- make it easy to search your content
  • Bookmark it / Share it -- use query parameters or hash state to create shareable links
  • Gameify it -- make a quiz, flash cards, guessing game, or typeracer clone

Highly Polished

Focus your attention on creating a seamless, highly polished, front-end user experience.

  • Does the layout make sense?
  • Is it "mobile first"? (Does content "reflow" correcty when the window resizes?)
  • Do elements toggle correctly / intuitively?
  • Could you incorporate icons/colors into your buttons?
  • Did you use load-spinners so I know what's happening?
  • Did you consider edge cases?
    • Did you handle empty or incomplete API responses?
    • Did you handle bad user input into forms?
    • Did you handle API errors, not just success?

About

Choose your own api mashup [angular]


Languages

Language:HTML 56.8%Language:JavaScript 34.0%Language:CSS 9.3%