Innovative Web Mashup Application Implementation
Budget: ₹1,500 – ₹12,500 INR
Create a web application that combines information or functionalities from two or more web APIs in a useful and
sensible way. This is called a Web Mashup.
You are free to decide on the purpose of your application, and which Web APIs you use. However, the Web APIs you
have selected need to work together to fulfil the purpose of your application.
An example:
An intelligent Flickr photo browser that displays photos related to user’s interest. This can be done by fetching user’s
“like” from Facebook web API, and then use this information to retrieve Flickr photos (using Flickr search) related to
user’s like. (Note: A good implementation of this application would be at a pass level)
In a more sophisticated implementation, an analysis of user’s Facebook posts could be done to determine user’s
interest. You could implement your own analysis or use text analysis web API.
You are not restricted to using Flickr and Facebook APIs. In fact, students aiming for more than just a pass grade are
expected to come up with creative/innovative and new ideas and demonstrate that they are able to learn and use
Web APIs that have not been covered in detail in this course.
Further Requirements
The following are the basic requirements that all students should be able to implement:
• There is a description of your web application. This description should include:
o A clear description of the functionality of your app, i.e. what is its purpose and/or what does it do.
o Which Web APIs it accesses, and what kind of data is retrieved, or functionality used.
o Which Web API require user authentication, and what extra permissions are required (if any).
This description should be appropriately placed within your application and users should be able to see the
description without having to perform user authentication.
• CSS animation should be used in at least one element in your web application. The amination should be
consistent with the overall theme/functionality of this web application.
• One of the Web APIs used should require user authentication (oAuth). So your application should allow user
to login and logout. The basic requirement is to use Facebook’s Login Button. But more marks will be
awarded for using SDK (basic to intermediate) or implement your own oAuth (hard).
• The main data for your application retrieved from Web API should be at least as complex as an array of
objects. E.g. An array of likes, or array of photos.
• Your code should be appropriately structured into MVC. A bundler, i.e. webpack, should be used to bundle all
the modules together.
• Templating (e.g. Handlebars.js or JSX etc) should be used to handle the display of dynamic content (and
structure your code).
The following are intermediate to hard requirements. Some of these requirements requires independent learning
and are designed to challenge high achieving students:
• Perform multiple fetches by using fetch with Promise.all(). Partial marks will be given for using fetch, without
Promise.all().
• A simple proxy should be implemented to relay data from a Web API. The proxy should be able to also obtain
input from user, and relay user input to the Web API. Partial marks will be given for using external proxy.
• Use the Javascript Framework React to implement the functionalities of your application.
UI Design
The look and feel of your web application should fit the theme of your application. You should create and implement
your design to impress your client (the marker). In addition, attention to detail is expected. In coming up with your
design, you should apply the design principles covered in the lecture.
Note: You should not use an existing CSS framework (such as Bootstrap and Foundation) to implement your layout and design
sensible way. This is called a Web Mashup.
You are free to decide on the purpose of your application, and which Web APIs you use. However, the Web APIs you
have selected need to work together to fulfil the purpose of your application.
An example:
An intelligent Flickr photo browser that displays photos related to user’s interest. This can be done by fetching user’s
“like” from Facebook web API, and then use this information to retrieve Flickr photos (using Flickr search) related to
user’s like. (Note: A good implementation of this application would be at a pass level)
In a more sophisticated implementation, an analysis of user’s Facebook posts could be done to determine user’s
interest. You could implement your own analysis or use text analysis web API.
You are not restricted to using Flickr and Facebook APIs. In fact, students aiming for more than just a pass grade are
expected to come up with creative/innovative and new ideas and demonstrate that they are able to learn and use
Web APIs that have not been covered in detail in this course.
Further Requirements
The following are the basic requirements that all students should be able to implement:
• There is a description of your web application. This description should include:
o A clear description of the functionality of your app, i.e. what is its purpose and/or what does it do.
o Which Web APIs it accesses, and what kind of data is retrieved, or functionality used.
o Which Web API require user authentication, and what extra permissions are required (if any).
This description should be appropriately placed within your application and users should be able to see the
description without having to perform user authentication.
• CSS animation should be used in at least one element in your web application. The amination should be
consistent with the overall theme/functionality of this web application.
• One of the Web APIs used should require user authentication (oAuth). So your application should allow user
to login and logout. The basic requirement is to use Facebook’s Login Button. But more marks will be
awarded for using SDK (basic to intermediate) or implement your own oAuth (hard).
• The main data for your application retrieved from Web API should be at least as complex as an array of
objects. E.g. An array of likes, or array of photos.
• Your code should be appropriately structured into MVC. A bundler, i.e. webpack, should be used to bundle all
the modules together.
• Templating (e.g. Handlebars.js or JSX etc) should be used to handle the display of dynamic content (and
structure your code).
The following are intermediate to hard requirements. Some of these requirements requires independent learning
and are designed to challenge high achieving students:
• Perform multiple fetches by using fetch with Promise.all(). Partial marks will be given for using fetch, without
Promise.all().
• A simple proxy should be implemented to relay data from a Web API. The proxy should be able to also obtain
input from user, and relay user input to the Web API. Partial marks will be given for using external proxy.
• Use the Javascript Framework React to implement the functionalities of your application.
UI Design
The look and feel of your web application should fit the theme of your application. You should create and implement
your design to impress your client (the marker). In addition, attention to detail is expected. In coming up with your
design, you should apply the design principles covered in the lecture.
Note: You should not use an existing CSS framework (such as Bootstrap and Foundation) to implement your layout and design