Objective

The objective of the group project is to implement a fully-functional Travel Ideas website by using the technologies and the development methodologies introduced in this course.   The project will constitute 40% ofthe course assessment.

Technologies and standards involved

Classmates might use any one of the following to implement the website.

       Laravel + jQuery + MySQL; or

       Any other popular client-side and server-side (MVC) frameworks, and DBMS

The first option (Laravel + jQuery + MySQL) is recommended.   Other standards involved include HTML5, CSS, JavaScript, etc.

Background

This  website  is  designed  for  a  group  of friends  to  share  travel  ideas,  their  past  travel experiences and comments/thoughts within their circle. A user can post a new travel idea with the planned destination and schedule.  S/he can attach tags to his/her idea and others can search the ideas by using those tags as keywords. The tags are also the keywords that can be used for interacting with other web APIs through service mash-ups in the website. The mash- ups can help provide further information about the user’s planned trips; examples of such information  include but  are not  limited to hotel/flight information, weather, local  special events or festivals, catering services, etc. For simplicity, we assume that all registered users belong to the same group of friends, and this website supports a single group of friends only.

Specifications

A user has to log on (with his/her email address and password) in order to use the website’s functions. A user who has not logged on should be prompted to sign in. An option should also be available for new users to create an account. Upon successful login, the user should see a welcome message with his or her name. The website should include the following functions.

1. USER ACCOUNT CREATION

     Email address, password, and name are required.

2. MANAGE (ADD/DELETE/MODIFY) TRAVEL IDEAS

     The user can add a new travel idea with title, destination, start date, end date, and tags.

     A user can edit all information about all travel ideas he/she has created.

3. SEARCHING OF TRAVEL IDEAS

     Searching by destinations or tags.

     For destination, users have an option to do a partial search.  For example, if

"Hong" is used as the search keyword, "Hong Kong" should be part ofthe matched results (if such entry is present in the database).

     Search results should have the following information for each entry returned: title of the planned trip, destination, date (MM/YYYY), and number of comments.

     For all queries, display a total count of matched records.

4. COMMENT ON TRAVEL IDEA

     Users can comment on their own (or others') travel ideas.

     The comment list will be like a Facebook comment section, which implies that AJAX will be used.

-   http://www.dynamicajax.com/chat.php                                                                 -    http://code.tutsplus.com/tutorials/how-to-create-a-simple-web-based-chat-

application--net-5931

     All comments should be escaped and with a maximum length of255 characters.

     A user viewing the same travel idea will receive new comment updates when someone posts any new comments.

     The comments should be shown in reverse-chronological order (i.e., latest comments first), while pagination is not necessary.

5. DATA VALIDATIONS

     Data validations are required for user account management and travel idea creation.

6. WEB API MASHUPS

     TWO modules that perform mash-up with any TWO web APIs relating to traveling or trip (seehttp://www.programmableweb.com/).**

     Hint: many web APIs relating to traveling are keyword-based. In our website, the tags, start date, end date and/or destination specified in each travel idea can           possibly form those keywords.

     Content in the comments might be useful for the mash-ups as well.

     For example (just an example - you don't have to adopt it; pleasefeelfree to        propose to use another API if you wish), you may implement a mash-up with the Hotwire Hotel Deal API (a hotel recommendation service):

http://www.programmableweb.com/api/hotwire

http://developer.hotwire.com

A sample usage scenario

     A user Ben registers a new account.

     Ben logs in with his email and password.

     He posts a new Travel Idea “I plan to visit Tokyo Disneyland with my family”      with the destination “Tokyo”, start date “April 1, 2022”, end date “April 6, 2022”.

     He applies two tags to his idea: “Tokyo”, and “Disneyland”.

     After the travel idea creation, a mash-up widget on the right is automatically           created and linked to Hotwire Hotel Deal, querying the hotel information based on the “Tokyo” tag as city name (again, you may propose to use a web API other than Hotwire Hotel Deal if you wish; but if you use the Hotwire API, please register a    new developer account and avoid to use the following API key of                            6e8zytkk8d3mdrksyqhqf3x3):

http://api.hotwire.com/v1/deal/hotel?apikey=6e8zytkk8d3mdrksyqhqf3x3&limit=

10&dest=Tokyo

Ben can read the summary in the widget and click on the provided links to get further information.

     Another mash-up widget is updated at the same time to provide some other additional information about Ben’s planned trip.

     (… to be continued in the next page …)

     He posts a new comment “Can anyone suggest where to find weather forecast?” on his travel idea to ask for help from his friends.

     His friend Karen who has already registered logs in.

     Karen searches the site by the tag “Disneyland” and finds that Ben already posted a travel idea with this tag.

     Karen clicks on Ben’s travel idea and views the comments.

     She posts a comment with a link “you can go tohttps://www.weather-                       forecast.com/locations/Tokyo-1/forecasts/latestto check the weather!”.

     Concurrently, Ben and Karen get the comments as they are viewing the same travel idea.

     They may continue “chatting” on the same travel idea page.

Figure 1: Create a travel idea “I plan to visit Tokyo Disneyland with my Family”

IMPORTANT NOTES

A project group with 3+ members:

The above specifications are designed for groups of two members. For those groups which  have  more  than  two  members,  you  will  need  to  propose  some  additional functions (e.g., more advanced features and/or additional mash-up(s) with external web APIs).

A project group with one member only (i.e., the “one-person mode”):

You may skip Item (4) (“Comment on travel ideas”) and implement only a single mash-up module (with a single web API) in Item (6) (“Web API mashups”).

Other topics and technologies:

Other than “travel ideas”, you might propose your own topic that is more familiar to your  group  members; please  discuss  with  us beforehand  and prepare  the  website background and specifications by yourselves.

If   you    decide    to    use    a    technology    (e.g.,    MVC    framework,    client-side library/framework,  DBMS,  etc.)  other  than  those  recommended  ones,  please  also discuss with us beforehand.

Roles of group members

All the group members should take part in the system design of the website. One of the members will be the project coordinator, who will send an email to the course TA with the group  members’  names  and  their  University  ID  numbers.  The  followings  are  the  main “deliverables” for the project.

     A Group Report (done by the whole group)

     Implementations and coding (done by individuals)

     A short individual report (done by individuals)

Grading criteria

The total mark (40 points) is consisted of the overall project mark (12 points) and the individual mark (28 marks).

The overall project mark (12 points) will be given based on the following criteria:

      The Group Report [8 points]

     Website topic and overview

     Details ofthe two web APIs used

     Technologies used

     Functional specifications

     System design descriptions (diagrams andfigures where helpful)

     Database design descriptions (diagrams andfigures where helpful)

     A list and brief descriptions of the modules implemented, and the responsible person for each module (i.e., the work distribution).

     Usability ofthe final website [4 points]

Features, interface design/layout, bugs (if any).

The individual mark (28 points) will be given based on the following criteria:

     The Individual Report [5 points]

     List of work done by the individual

     High-level system design of each module implemented

     Module description with relevant screenshots

     Program files developed, and a brief descriptions of their purposes

     Any other useful information

Clarity, completeness; pictures, diagrams, screenshots will be helpful.

     Implementation of modules [12 points]

       Correct use and functioning of HTML, CSS, Javascript, jQuery, etc.

       Laravel MVC / Ruby on Rails MVC

       Data validations

Feature count, ease of use, clarity of user interface.

     Quality of implementations [8 points]

       Quality of “separations” in all dimensions that have been discussed in the course.

       Standard compliance (HTML5)

       Quality ofmodule designs

Clarity, simplicity, maintainability, extensibility.

Coding style: readability/naming/program structure/comments

     Peer evaluation (details to be announced) [3 points]

The total mark for each student will be the sum ofthe group mark and his/her individual mark.

Project schedule and late penalty

1.   Names ofgroup members sent to TA: Before Feb 12, 2022

(Note: if you plan to work on your own, please also inform the TA.  If we do not hear from you by Feb 12, we will “pair-up” the remaining students and form the groups for you.)

2.   A draft of the group report for TA’s approval (please see the grading criteria for the document  structure,  you  may  skip  Functional  Specification,  System  Design  and Database Design in this draft): Before Feb 28, 2022

3.   Due date of all project deliverables: April 17, 2022 (extended)

Late penalty: 1 point (out of 40), per day. No submission would be accepted after April 30, 2022.