Coder Social home page Coder Social logo

choose-your-own-angular-api-mashup's Introduction

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.