CSCI-5709 B00901658 | Hrishita Mavani

Assignment-2
A2.1 Application Features
Travel Bae is a trip planning web application designed to help users to plan a trip efficiently. We have
decided on the following features as a part of our web application – Travel Bae:
1. User Management System
2. Destination Management System
3. Bucket-list Management System
4. Blog Management
5. Transportation Recommender System
6. Accommodation Recommender System
7. Activities to Do
8. Things to Carry
9. Map Integration
10. Dashboard
11. Trip Planner
12. Itinerary Management
Feature Selected: Blog Management
The travel blog management feature allows users to create a travel blog for a particular destination.
They can add images of that particular destination. User can delete their blog later. Other users can
add comments to the blog [3].
Following are the underlying for the Blog Management feature.
- Create Blog
- Delete Blog
- View Blog
- Add comment

A2.2 Blog Management Feature - Travel Bae

A2.2.1 Application Details
Travel Bae is a web application designed to aid users in planning their trips without any hassle. It allows
users to search for their dream travel destinations and view different activities they can do during their
trip. It acts as their local guide and can provide information about the best deals on accommodations
and transport options. It gives different itinerary options according to the duration of the trip. Users
can maintain a bucket list of destinations they dream of visiting.
CSCI-5709 B00901658 | Hrishita Mavani

No matter how much we plan ahead of time, there is always something we miss to carry. Travel Bae
can assist the user in suggesting the list of items they can take with them according to the location and
weather.

Target User Insight

Travel Bae is designed targeting different categories of travelers. The target user-base for the
application includes solo travelers or group travelers who travels with their friends or family. The
application may be used by people who are planning to go for a vacation and are looking for places
they can visit there or activities they can perform there. Other set of users could be the ones who do
not have any travel plans in their mind and our website could spark their interest. In addition to this,
those who have already decided their travel destinations and are looking for relevant transportation
and accommodation booking options. Figure 1 and Figure 2 shows user personas of target user base.

Figure 1: User persona template for personal vacation traveler, created using xtensio [4].
CSCI-5709 B00901658 | Hrishita Mavani

Figure 2: User persona template for the Business traveler, created using xtensio [4]

User-Centered Design Approach:

I have implemented the Blog Management feature as a part of our web application Travel Bae. The
feature allows registered user to create a travel blog for a specific destination where they can share
their travel experience with other users. To explore the user need regarding blog creating task, I
studied similar blog writing applications on internet for reference. As a part of this feature, I have
created a page with text editing component which will provide seamless text editing experience to the
user. Other users can read the travel blog and add comments to the blog.
Figure 3 and Figure 4 represents the wireframes and front-end design for the Blog Management
feature. The pages are designed keeping in mind the usability principles . User land on create blog page
from their dashboard and can create a blog by uploading image, title and content. If the user would not
enter title or content, the system would prompt user to insert title and content. Finally user can click
on publish button to publish the blog. On publishing blog, the system would prompt a toast message to
user acknowledging successful publishing of blog.
CSCI-5709 B00901658 | Hrishita Mavani

Figure 3: Wireframe of Create Blog Page, created by using Balsamiq [6]

Figure 4: Create Blog Computer View

CSCI-5709 B00901658 | Hrishita Mavani

Figure 5: View blog page wireframe, created using balsamiq

CSCI-5709 B00901658 | Hrishita Mavani

Figure 6: Blog page

Application Workflow
We are going to use MVC (Model-View-Controller) architectural pattern to develop our application. As shown in
Figure 7 the User would interact with the Front-End of our application using web browsers. They may access the
web application from devices of different types and dimensions such as mobile, tablet or laptops and desktop.

The Front-End web application is developed using React JS framework.

CSCI-5709 B00901658 | Hrishita Mavani

Interaction Design
I am developing Blog Management feature as a part of Travel Bae application. Following are the list of tasks
being developed as a part of this feature.

Feature: Blog Management

- Create Blog
- View Blog
- Delete Blog
- Comment

User Scenario: Create a blog

Case 1: The user is a guest user and wants to create a travel blog

1. The user clicks the Blog option from the navigation bar.
2. System opens a dropdown menu with create e blog and read blog option.
3. User clicks on create blog option.
4. System prompts the user to register into the system.
1. The User registers into the system.
2. User logs in to the system.
5. The user enters the blog title.
6. The user enters blog content.
7. The user edits the blog content with available editing tools.
8. The user enters images for the blog.
9. The user clicks the publish blog button.
10. The system prompts “blog submitted”.
CSCI-5709 B00901658 | Hrishita Mavani

Figure 65: Task Flow for creating blog task, createdi using draw.io [8]

Case 2: The user is a registered user and wants to create a travel blog.

1. The user clicks on the Dashboard option from the navigation bar.
2. The user clicks on create blog button from the dashboard.
3. The user enters the blog title.
4. The user enters blog content.
5. The user uploads images for the blog.
6. The user edits blog content with available editing tools.
7. The user clicks publish blog button.
8. The system prompts “blog submitted”

Figure 66: Task Flow for the alternate flow of creating blog task, created by Hrishita Mavani using draw.io [8]
 CSCI-5709 B00901658 | Hrishita Mavani

User Scenario: View blog

Case 1: The user is on the home page and wants to view travel blogs

1. User clicks on the Blogs option from the navigation bar from the page.
2. System prompts a dropdown menu from the navigation bar with create a blog and read blog
option.
3. User clicks on reading blog option.
4. System prompts a page with a list of blogs
5. User enters a destination to read a blog in the search bar.
1. System prompts “No blogs exist for the destination. Search for other destinations.”
2. User searches for other destinations.
6. System prompts result based on the given destination,
7. User clicks on a particular blog.
8. System prompts the specific blog page.

Figure 67: Task Flow for view blog task, created using draw.io [8]

Case 2: The user is on a destination page and wants to view blogs.

1. The user clicks on a specific blog card from the list of blogs on the destination page.
2. The system prompts the specific blog page.

Figure 68: Task Flow for view blog from destination page, created using draw.io [8]

Case 3: The user is on a specific blog page and wants to view the blog by a particular author.

1. The user is on a specific blog page.

 CSCI-5709 B00901658 | Hrishita Mavani

2. The user clicks on a blog from the specific author from the suggestions given on the right side of the
blog.
3. The system prompts the specific blog page.

Figure 69: Task Flow for view blog from destination page, created Mavani using draw.io [8]
 CSCI-5709 B00901658 | Hrishita Mavani

User Scenario: Comment

1. User is on a specific blog page and reads the blog and scrolls down till the end.
2. User read other comments from the blog.
3. User clicks on the add comment button.
4. System prompts a textbox to add a comment.
5. User writes the comment content.
6. User clicks submit comment button.
7. System adds the newly added comment to the list.

Figure 70: Task Flow for comment task, created using draw.io [8]

User Scenario: Delete blog

2. The user clicks on the Dashboard option from the navigation bar.
3. User clicks on the blog he/she wants to delete.
4. User scrolls to the bottom of the blog and clicks on the delete button.
5. System prompts confirmation message for deletion operation.
6. User clicks on the delete option.
7. System prompts “Blog deleted”.

Figure 71: Task Flow for delete blog, created by Hrishita Mavani using draw.io [8]
CSCI-5709 B00901658 | Hrishita Mavani

Process and Service Workflow

The process workflow diagram for our application Travel Bae is displayed in Figure []. We are using
MERN stack to develop our application. The frontend of the application is developed using React JS and
the backend is developed using Node.js and Express framework. We are using MongoDB database for
our application. The process flow for the blog management feature starts when user visits our
application. When user would click on view blog link from the navigation bar, all the blogs would be
rendered on the page. When user would click a particular post, the react component would make a
GET API request and sends the request to back-end router. The router would place the request in the
Node.js event queue. The Thread pool then picks up the request from event queue and created
connection with MongoDB. The controller would receive request result and prepare response and send
it to React component. React component would display the result.
CSCI-5709 B00901658 | Hrishita Mavani

Folder Structure
The project structure for Travel Bae is divided based on Front-End (client application) and Back-End
(server application). We are using React JS to develop the Front-End of our application and Node.js and
Express framework to develop the backend of our application. We would be using Mongo DB to store
the data.
The following figure[] depicts the folder structure for the fronted application developed using React JS.
We are using Material UI library for styling our components.
The package.json file consists of the project information, dependencies and run scripts. The package-
lock.json is the autogenerated file which consists of all the information related to external dependency
and their version information.
CSCI-5709 B00901658 | Hrishita Mavani

The .gitignore file will consist list of files that we don’t want to upload to the remote repository.
The asset folder consists of all the images used in the application. We are using container component
pattern to separate the data fetching logic and presentation logic.
The Figure[] shows the folder structure of the backend application developed using Node JS. It
comprises of api directory consisting of routes, model and controller folders, a server.js file and a
package.json file.
The server.js file will be the entry point of the application and would be executed first in the project. It
would handle the app startup, routing and other function
The .env file is the environment file consisting of all the environment variables like database
credentials and api keys for the project
The routes folder would contain all the routes and the controller folder would contain logic for the
APIs. The model folder would contain all the schema files. The middleware folder would contain all the
middleware for the application such as user authentication and security files.
The Utils folder contains the code that is used repeatedly throughout the application.

References
[1] Project proposal

[2] Assignment -1 group

[3] Assignment -1 individual

[4] Xtensio

[5] Draw.io

[6] Balsamiq

[7] Usability PPT

[8] https://www.mongodb.com/blog/post/the-modern-application-stack-part-5-using-reactjs-es6-and-jsx-to-
build-a-ui-the-rise-of-mern diagram architecture

[10] Requirement Document

[11] Medium