Name of Project/ Client Name

VR-Based Website (UniVResity.org) / KPicture Production / American University

Course Name

CST 499 Directed Group Capstone

Student Names

Josh Jones, Oscar Alba, and Vasile Danciu

Date
10/12/2018
Executive Summary

The prototype platform for UniVResity.org allows users to immerse themselves into a

virtual reality setting by either logging in on the platform's website or visiting as a guest a topic

of their choosing. Currently, most of the underdeveloped countries around the globe do not have

access to the necessary data infrastructure to access education materials through the internet.

Online learning allows students to access information that would not be readily available,

providing knowledge without any physical restrictions. Audio recordings can fall short since

many people are visual learners. While there is an abundance of resources available for most

people, most of these resources are not designed with accessibility for refugees and people living

in developing countries. The application that was created uses the most modern and latest web

technologies that allow for a great user experience due to the great design of the front-end,

back-end, and database design.The project was crucial because for the intended target audience

as there aren’t many alternatives. The application empowers underprivileged people by allowing

them to educate themselves regardless of where they might live. ​The goal will be to

offer worldwide access to live lectures.​ Users are able to call and access any lecture that is made

available publicly. The long-term goals aim to seek higher education institutions interests in

using the virtual reality technology in order to be utilized in online classrooms and revolutionize

the way we teach over the internet. The final objective of the project was a working web

infrastructure created by the team members of the project to allow future developers and students
to create new environments in virtual reality settings to engage more users and increase

popularity of the platform. The project aims to eventually change the way teaching is conducted

online in a new and innovative way

Table of Contents:

1. Introduction/Discussion 4
1.1 Project Name and Description 4
1.2 Problem and/or Issue in Technology 4
1.3 Solution to the Problem and/or Issue in Technology 5
1.4 Project Goals and Objectives 6
1.5. Community and Stakeholders 7
1.6 Evidence that the Proposed Project is Needed 8
1.7. Feasibility Discussion 9

2. Design Requirements 10
2.1 Functional decomposition of the project 10
2.2 Selection of design criterion 13
2.3 Final Deliverables 14
2.4 Approach/Methodology 14
2.5 Legal Considerations 15
2.6 Ethical Considerations 16

3. Implementation 17
3.1 Timeline and Budget 17
3.2 Usability Testing and Evaluation 19
3.3 Final Implementation 21

Conclusion 2​​6

Appendix A 2​​7
UniVResity Client Testing and Feedback 2​7

Appendix B 2​​8
Team Member Roles and the Division of Labor 2​8

References 30
1. Introduction/Discussion

1.1 Project Name and Description

The VR website is a product made to aid underprivileged people and allow them to

connect to live classrooms in a virtual reality setting. UniVResity.org is a prototype, VR-based

system allowing refugees and people living in developing countries to participate in VR events,

such as lectures, remotely with the potential to becoming a learning environment for students of

all backgrounds. The project was created for KPicture/American University and the intended

main end user for this product are refugees and underprivileged people with a goal to provide a

portal for learning in parts of the world where education is not always readily available.

Ultimately, the technology can be used by anyone who believes that they might benefit from the

experience. The public now has another alternative method to learn any subject of their choice.

1.2 Problem and/or Issue in Technology

This project aims to solve the lack of a real time setting over the internet when it comes

to providing a learning environment for people living in developing countries. Current

technology provides audio recordings and video lectures. The issue with this type of learning

style is that it may not be the most effective way of teaching for many students and people. The

issue with the current technology is that it does not not allow the users to be able to communicate

with the instructor in an effective way. An example would be a real brick and mortar school,
where an instructor will present material and ask for feedback and questions, the students may

raise their hand and communicate with the instructor. Current technology does not provide such

a feature in an efficient manner. Some alternative options are the use of email or discussion

boards that may or may not be monitored. Another issue that will help aid our main target group

of people in underdeveloped countries is even if the community has online access, it can be

outdated and slow because of the bad infrastructure. They cannot stream videos and access many

websites that may offer a similar service to them.The project allows them to use a low bandwidth

as the project is designed to have the option for users to join a live lesson and use audio through

a regular phone, and the interactive metric data of avatars does not require high bandwidth (just

x,y,z positions of avatars in the VR room). It works on Google cardboard, since high end VR

headsets are not affordable. This project is important because for many of the intended target

audience as there aren’t many alternatives. The application empowers underprivileged people by

allowing them to educate themselves regardless of where they might live. ​The goal is to

offer worldwide access to live lectures.

1.3 Solution to the Problem and/or Issue in Technology

The UniVResity.org project solves this issue because it allows users to either create

accounts and join lectures or join as a guests, but it is also allowing them to engage with the

instructor of the lecture by using virtual reality technology and interact in a VR environment,

which was not done before. The user is able to look through the website and choose a specific

topic. Users are able to call and access any lecture that is made available publicly. There will not

be a charge for this service. The application integrates a virtual reality setting where instructors
can lead a room using customized avatars, providing the feel of a real classroom. Students are

able to interact with both the instructors, as well as other students in a live setting. As a result,

the experience is interactive, rather than just listening to audio or just watching videos. An

interactive learning experience is far more effective than the alternative.

1.4 Project Goals and Objectives

The goals of the project were to focus on increasing the accessibility of learning materials

to people who many have difficulty obtaining it or do not have access to it at all, and creating a

user friendly environment that is revolutionary and new which provides the user with a different

approach at learning. Instructors and lecturers now have a new way of reaching their audience

and express their teachings in a different way that can be seen as more effective. With the

internet providing an abundance of resources to potential users to learn and be exposed to

learning material, the project’s aim was to create a more effective learning method for the

students to interact with. People living in developing countries now have access to the necessary

data infrastructure to access education materials through the internet. The long-term goals aim to

seek higher education institutions interests in using the virtual reality technology in order to be

utilized in online classrooms and revolutionize the way we teach over the internet. The project

will pave the way we learn and teach online. Ultimately, the technology can be used by anyone

who believes that they might benefit by the experience. The public now has another alternative

method to learning any subject of their choice by immersing themselves in a different

environment.

The completion of this project was important because for many of the intended target
audience, there aren’t many alternatives. The application empowers underprivileged people by

allowing them to educate themselves regardless of where they might live. ​The goal was to

offer worldwide access to live lectures.​ Users are able to call and access any lecture that is made

available publicly. The application will pave for future developers to integrate a virtual reality

setting where instructors can lead a room using customized avatars, providing the feel of a real

classroom. Students are able to interact with both the instructors, as well as other students in a

live setting. As a result, the experience is interactive rather than just listening to audio or just

watching videos. An interactive learning experience is far more effective than the alternative.

Each room has a custom live URL that can be shared and accessed amongst students. Once the

lecture is concluded, users are able to save the session and watch as needed. Other students may

also search, save and watch concluded sessions. Users may both teach or learn on any subject of

their expertise. Users can create a room with an automatically generated custom URL that can be

shared to give access to anyone who wishes to watch the session even if they are not registered

users but they can register an account to be granted further privileges.

1.5. Community and Stakeholders

The Stakeholders in the project are companies and organizations that would like to use

the service to make a topic public. This is not limited to organizations only, individual users are

able to take the opportunity and share content online themselves. Users whom are part of the

learning process and enter the virtual classrooms as students are both stakeholders and part of the

community. They are stakeholders because they are investing time in taking the lectures online

and money because they will need to invest in VR hardware to attend the meetings. The future
goals of the project is to add education organizations such as high schools, universities, etc to

join as stakeholders and use the virtual reality technology and UniVResitys’ website to reach

their audience in a new and immersive way. The investment of time is of most value to the users

who will create the material as well as the viewers. Because of the limited history of virtual

reality success in a teaching setting, there is a risk for the public to become stakeholders. The

platform will continue to evolve with new implementations guided from the feedback that will be

received from users.

1.6 Evidence that the Proposed Project is Needed

It has been shown that many people in developing countries do not finish school for

many reasons that may not allow them. There are numerous reasons, including the difficulty of

getting to school and the cost of schooling. Even when tuition is free, there are often expenses

for lunch, uniforms, and examination fees. And because the quality of education is often poor,

parents are forced to pay for additional tutoring to enable their children to pass tests. (Mark J.

Epstein & Kristi Yuthas) The VR technology will aim to help all those that have difficulty

accessing learning materials.

The virtual reality technology is a new concept that will be applied to the learning field.

Currently no other company or organization has been able to successfully create a product to

reach out to people in developing countries in an effective way using VR. The only alternative at

the moment is the Open Learning Campus that provides access to a few courses and podcasts to

supplement teaching in many countries.

1.7. Feasibility Discussion

Currently, there is an organization called the Open Learning Campus that has a similar

way of presenting material to students.(OLC WBG 2016) Open Learning Campus allows users to

be non-registered and access lectures and courses in a similar fashion that UniVResity does.

OLC allows users to look through different sections and topics and select ways to view the

material such as webcasts, podcasts, videos, reading material etc. UniVResity aims to give users

and the public an alternate method of viewing the same material with the integration and

utilization of virtual reality technology. Many private companies also offer MOOCs (Massive

Open Online Course) to the public as an alternate way of teaching subjects but no company

offers a way of doing it in an immersive virtual reality classroom setting. Zoom is a web

conferencing applications that some teaching institutions use in order to reach their students by

the way of voice, audio, and screen sharing features.The UniVResity prototype application

handles the same features with the added virtual reality classroom and meeting room setting.

Currently in developing countries, the resources needed to access the materials available online

are scarce or often seen as not a priority, because of the price of some of the equipment and the

lack of an internet infrastructure for it to be a necessity. With virtual reality equipment

technology growing, we are seeing a decrease in price and a great area of opportunity for the

development field to create world changing concepts.

2. Design Requirements

2.1 Functional decomposition of the project

The goal of the UniVResity project is to create an interactive Virtual Reality educational

platform, particularly for the underprivileged people in developing countries. The application for

the UniVResity project is a website that will integrate a virtual reality setting, and provide the

necessary web infrastructure that allows users to participate as instructors or students. The major

functions required by the design of the UniVResity website for a user are to register an account

using name, email address and password, sign in, search available VR events (live or recorded),

and join them. Besides this, authenticated users can also start live streaming lectures that can be

either public or private, save the audio recording, or add lectures to a favorite personal list,

manage their account profile and their saved streams.

Figure 1.​ Use Case Diagram

For an unauthenticated user the website must display the homepage with a navigation bar,

and a searchable card list of available VR events. The user can join any of the available VR

events in the public list, or search a specific event/lecture by typing in the search bar the

available events/lectures which are filtered in real time. The Navigation bar includes the

following options: Register, and Sign in. The sign in form requires a valid email and password

entry of a registered user to log in. The register form allows a user to sign up using full name,

email address, an optional short bio, and a password. The form validates the input before it

allows the user to click the submit button. When a user clicks 'Join' the website submits the

information to the Node.js server. The back-end server encrypts the password and submits the

data using the knex query builder to the PostgreSQL database. If the email doesn't exist already

in the database, the new user is registered in the 'users' table.

Once a user has signed in, the Navigation bar must also display a button to create a new

VR stream, and a dropdown menu with the following options: Dashboard, Settings and Sign out.

The 'Create Stream' page allows an authenticated user to create a new VR stream and it requires

a title, a subject, a brief overview, a description of the VR event, and an image. The user can

create a private stream or a public stream. The stream data is saved in the 'streams' table. All

streams have an unique URL address composed of 10 characters: numbers, uppercase and

lowercase letters. This allows for 62^10 (839 quadrillion) unique URLs. The private streams can

only be accessed by users that have the unique URL, while the public URL's can be found on the

homepage and viewed by any users. The Dashboard page allows a user to manage his Favorite
streams, and Created Streams allows to launch, delete, or edit the stream information. The

Settings page allows a user to change their personal information.

Figure 2.​ Domain Class Diagram

2.2 Selection of design criterion

In order to create an efficient and fast website, the amount of backend requests needs to

be minimized, as well as the size of the files, the amount of events, and DOM (Document Object

Model) manipulation. Based on the performance goals, the React JavaScript library was chosen

to develop The UniVResity front-end application, because it creates a Virtual DOM that

re-renders only the changed components of a page, rather than the whole document. React is

reliable, was developed by Facebook, and it is the most popular library in 2018 used to build user

interfaces. It is declarative, reusable, and it has stateful components. The UniVResity website is

built on components with a tree like structure in which the data flows from top to bottom, which

helps to create reliable bug free code. The back-end server which communicates with the

PostgreSQL database is also developed with JavaScript using Node.js (an open-source,

cross-platform JavaScript run-time environment that executes JavaScript code outside of a

browser) and Express (a minimal and flexible Node.js web application framework) .This allows

to unify a web application using a single programming language, rather than using different

languages for each side of the web application. In order to save, favorite, create content, and

enforce accountability, users need to register a user account. The users and streams data it is

stored in a PostgreSQL database, the passwords are encrypted using the ' bcrypt-nodejs' library.

The parameters and query strings are passed separately to database, using the 'knex.js library to

protecting the query from SQL injection attacks. The private routes of the website are protected

using React Router authentication that redirects unauthenticated users to the login page if they
try to access any pages that are private. The unique URL's for the VR events are randomly

generated because incremental counters are a big security flaw.

2.3 Final Deliverables

The final deliverables are the website infrastructure (the actual code for front-end and

back-end website components) which KPicture/American University will be able to use to

integrate the VR component using the Amazon Sumerian Software Platform, and a functional

website deployed on the Heroku Cloud Application Platform.

2.4 Approach/Methodology

An Agile software development approach was used for the creation of the UniVResity

website application. Before beginning any programming work on the project, the team met with

the product owner, professor Krzysztof Pietroszek on Google Hangouts to receive additional

details, discuss the specific requirements, tools and technologies required for the project. The

team setup a slack channel for communicating with the professor, and used open communication

using Google Hangouts, three scrum meetings a week to talk about progress or issues,

implementation requirements, delegate responsibilities, kept track of the progress and monitored

iterations using Google docs.

The capstone team used the latest and most modern cutting-edge technologies and utilize

them to create the full-stack website and application. For the front-end design, the team used

React to manage the state and view of front-end components including HTML5, CSS3, and JS6

by using the JSX syntax. The back-end was developed with Node.js, Express.js, and Redux to
communicate with the server that was hosted on the Heroku Cloud Application Platform.

Database design was made with PostgreSQL. Version control was practiced with services and

technologies such as Git and Github. A Bootstrap theme was used to keep the backend work

productive as visual design components were created beforehand, and the team manipulated

them with React. The approach for design included creating rooms with auto-generated URLs to

be shared to give access to users who wish to join sessions that can be made public or private.

Users are able to create an account for added functionality and privileges. A login system was

created in the database with tables added to save streams and lectures which is a feature that

allows users to view and listen the content at a later time. Each student was involved in the full

life cycle of software development. This included gathering requirements, design, testing and

implementation. Tests were done using unit testing software for JSX testing, and requirement

gathering took into consideration the hardware that is easily accessible to the potential

community of users to ensure compatibility.

2.5 Legal Considerations

The software and tools that were used to create the UniVResity.org web infrastructure are

open source, therefore no special licensing was required. Before using the UniVResity.org the

VR experience, users have to read and agree to a list of "terms and conditions" of the website and

they are responsible for the content they create and share without infringing on the copyright of

other creators.
2.6 Ethical Considerations

The virtual reality technology has many advantages, as it offers a better immersion than

any other medium. Virtual classrooms have the potential to be the very next best thing where

brick and mortar classrooms are not available. However, as it is often the case with new products

and technologies, there are unidentified issues that are likely to raise ethical concerns. Since the

long term effects on using VR headsets are still unknown, creating an educational software

platform that requires the use of VR devices might have negative effects on user's health. The

major ethical concerns of this project world rise from the actual usage of a VR headset,

especially by teenagers. VR headsets are not suitable for children under thirteen because it might

affect their visual development, and because they are more prone to virtual reality sickness, also

known as cyber sickness. It is similar to motion sickness, and it is caused by a sensory input

conflict perceived by the brain, that can cause nausea, disorientation, headaches, or vomiting.

However, recent improvements in screen resolution and faster refresh rates had a positive impact

on reducing these side effects, and will continue to do so as technology improves. More studies

need to be done on the psychological effects, visual and brain development of teenagers that use

VR headsets, but even conducting these studies raises ethical concerns. According to a group of

neuroscientists researchers at the UCLA led by Mayank Mehta that studied the VR effects on rat

brains, "the neural pattern in virtual reality is substantially different from the activity pattern in

the real world," about half the neurons that are firing in a real environment shut down when the

rat is experiencing a similar VR environment (Wolpert 2014). The studies are ongoing and more
information will be available as they develop, but at least we know that researchers and the

industry are taking the issue of VR side effects on health seriously.

A potential social injustice effect is that users from low income families could not benefit

from the use of the VR educational software as they could not afford them. VR headsets could be

made more accessible by having them available at libraries, or be offered for free with the

support of various educational programs and foundations.

To eliminate or mitigate the negative effects of using a VR headset for too long, such as

addiction or health issues, the software limits the duration of use, displays a warning message

that the user has been using the VR headset for too long, and recommend the user to take a

break. The VR educational software also asks the user to select their age before starting the

application, and display a warning message to make sure they understand the risk of using it.

3. Implementation

3.1 Timeline and Budget

The project did not require any significant budget. The technologies that were utilized

were open source resources. The timeline had a few tweaks but all required and assigned tasks

were completed in a timely manner. Initially, there were three major milestones established for

the project:

1. Front-end components completion:

 The front end portion of the project consisted of the general layout of the site.

The goal was to complete this section as quickly as possible since frequent changes were

expected based on client feedback and functionality. The first phase was completed as

planned. All essential components and subcomponents of the site were designed and

implemented within the first two weeks. Changes were necessary throughout the

implementation phase, but having the general layout provided a blueprint for the team.

Completing the first phase quickly allowed additional time for the other, more

complicated phases.

2. Back-end server completion:

During this phase, the functionality of the site began taking shape. The team was

able to ensure that the site performed as planned by building a back-end server. All

endpoints were successfully connected to the front-end components. Routing to both

authorized and non-authorized users was established. By doing so, the site was properly

secured from accessing information to the proper user.

The second phase was completed on time and as planned. There were no setbacks

as all planned features were implemented correctly with full functionality. This allowed

time for quality control as the team noticed a few routing issues that were fixed quickly.

3. Database completion:
 In this phase, the website received final touches as so much of the site’s

functionality required data retrieval and data edits. The initial plan was to use

PostgreSQL but a shift to MongoDB seemed like a better fit for the project. The team

was not familiar with the new technology. Therefore, implementation was jeopardized.

After experiencing several issues, it was decided to shift back to PostgreSQL. All lost

time was quickly made up since the team was knowledgeable with relational databases.

The issues did not create delays since the project was ahead of schedule after phases 1

and 2.

3.2 Usability Testing and Evaluation

Initially, the project’s target audience was geared towards people who reside in

developing countries. In particular, refugees was seen as a group of people who would benefit

the most from this application. While this group is still seen as a target audience, after testing the

client proposed that in its current state, the application should focus on students K6-12. After

conducting client testing on October 10, 2018 (see Appendix A), it was concluded that the

infrastructure of areas where refugees would use web platform will not be able to support the VR

components at the moment. It is now deemed a long-term goal for the organization. Teachers

and instructors will be welcomed to showcase any educational format and subject. Long-term

goals of the web platform would be to integrate a similar format that Udemy and Coursera offer

with large recorded courses with the ability to enter lectures/seminars through a VR experience.
 The testing focused on the functionality of the website. In particular, several tasks were

measured. These tasks included:

● Testing of Logging in, signing up, and logging out with evaluation of the

functional database.

● Navigating through pages from home screen “/”, dashboard, settings, creating a

stream page, and stream room.

● Testing of working deployment fetch code.

● Creating a new stream and verifying random URL generation functionality when

navigating the website’s front-end and database entry.

● CRUD functionality of user settings page.

● Testing Anonymous user functionality.

The results were as follows:

● C​lient successfully created a user through the registration process.

● Client successfully logged in and logged out of the application.

● Client was unaware that an anonymous user was able to join streams but

functionality was already present.

● Public vs Private streams functionality was present and successful.

● Random URL was generated for every created stream. This URL gives a unique

and shareable URL access to streams.

● Deployment server code was functional.

● Navigation of every page was successful.

 The client gave feedback to make course description optional during the “create stream”

experience. Additionally, the client requested to add a demo of the long-term goal of VR

functionality in the streaming pages.

3.3 Final Implementation

One of the main goals was to make the user interface of the website to be very friendly.

Easy to use and easy to navigate. Based on the initial target audience, it was unclear how

technically advance the users would be. So, the intent was to make the user experience as simple

as possible.

The homepage can be accessed without registering or logging in. Anonymous users can

view any public stream of their choice. There are no limitations on the number of streams or

number of times the streams can be viewed. On the homepage, users have access to a large

search box where they can directly search for desired streams by title. The search button does

not need to clicked as search results update in real time without having to reload the page.

Code:

const filteredStreams = this.state.streams.filter(stream => {

return stream.title.toLowerCase().includes(this.state.searchfield.toLowerCase())

})

Added functionality is granted for users who register. Authorized users have the option of

both creating streams, and saving their favorite streams in their dashboard. Doing so, avoids
having to search for the desired stream in future inquiries. By filling out a simple form, the user

can create a stream and have an unique URL automatically generated and assigned to the specific

stream.

Code:

const generateURL =() =>{

var url = ' ';

const possible = 'ABCDEFGHIJKLMNOPQRSTUVWX

YZabcdefghijklmnopqrstuvwxyz0123456789';

for (var i = 0; i < 10; i++)

url += possible.charAt(Math.floor(Math.random() * possible.length));

return url;

Similar to the saved streams, created streams can also be accessed, viewed and deleted in

the user’s dashboard. For increased accessibility, the user’s settings can be accessed both from

the navigation bar and the dashboard page. From there, users can update their passwords, change

their email addresses, add or change profile pictures, edit biographies and delete accounts.

The main challenge was that team members had not previously worked on a real-world

project with the technologies that were selected. Certain security functionalities created delays

since it was brand new material with limited resources. An issue that was present was authorized

routes. It was evident that the user can enter authorized routes in the URL and be granted access
even if the user was not logged in. Authorized routes were created but there were difficulties

with functions and properties. The team was able to work past these issues and finalized routing

on the website.

Code:

Function

const AuthRoute = ({ component: Component, user, isSignedIn, loadStream, ...rest }) =>

<Route {...rest} render={(props) => (

isSignedIn === true

? <Component {...props} user={user} isSignedIn = {isSignedIn}

loadStream={loadStream} />

: <Redirect to='/login'/>

)} />

);

Route

<AuthRoute path='/dashboard' user={user} isSignedIn={isSignedIn}

component={Dashboard} />

Another issue that arose was storing images in the database. Initially, the plan was to

store the images directly in the user table with data type “bytea”. After extensive research, it was

concluded that changing the data type to “varchar” and storing the filename would allow easier
access and retrieval of the images as needed. The VR streaming and photo images were the

reasons that the team debated using relational databases versus cloud. The database selection

was the biggest issue as it delayed correctly setting up the server back-end of the project as well

as testing some of the functionalities of our front-end components. Although a cloud database

would serve the project better in the long-term, using a relational database was sufficient for the

short-term goals. PostgreSQL allowed the team to complete registration, login, streams, user

created stream and user favorite streams functionalities. MongoDb will be used to store the VR

streaming that is scheduled to be implemented at a later date.

Tables:

CREATE TABLE users( id serial PRIMARY KEY, name varchar(100) NOT NULL, email

text UNIQUE NOT NULL, hash varchar(100), joined TIMESTAMP NOT NULL, bio

varchar(280) );

CREATE TABLE streams (urlID serial PRIMARY KEY,url varchar(10) UNIQUE NOT

NULL, title varchar(128) NOT NULL, subject varchar(32) NOT NULL, headline

varchar(250) NOT NULL, description varchar(500) NOT NULL , is_private BOOLEAN

NOT NULL, owner int, FOREIGN KEY (owner) REFERENCES users(id));

CREATE TABLE favorites (userid int NOT NULL, url varchar(10) NOT NULL, PRIMARY

KEY (userid, url), FOREIGN KEY (userid) REFERENCES users(id), FOREIGN KEY (url)

REFERENCES streams(url));
Conclusion

This project aimed to solve the lack of a real time setting over the internet when it comes

to providing a learning environment for people living in developing countries. The methods that

are currently available are audio and video recordings. These methods lack the interaction that

can be gained through a virtual interactive learning setting that serves as a real classroom.

Through careful planning, appropriate design, ethical consideration, and decisive action, the

project was delivered on schedule with client satisfaction. An Agile software development

methodology was used for the creation of the application. This method worked well in staying

focused in completing the must-have features and functionalities of the application. The team

used a slack channel for communicating with the professor to receive design requirements.

Amongst the team, three scrum meetings were held every week to discuss progress, issues, and

implementation requirements. Doing so, allowed the team to take a proactive approach in

solving issues and bugs. With the anticipated growth of the website, it was crucial to select

technologies that were both efficient and fast. The React Javascript library served the project

well based on its structure and performance abilities. The back-end server which communicates

with the PostgreSQL database was also developed with JavaScript using Node.js and Express.js.

Using JavaScript technologies on both the front and back-ends created an ideal solution to the

project’s needs.

Collaboration amongst team members was well executed. Clear roles were defined and

each team member was accountable for delivering quality and timely work. The team learned
the effectiveness of an agile development in delivering client satisfaction. Communication

played a big role in both delivering the project on time and with completing all the discussed

deliverables.

In the future, the possibilities of the project are endless. With the growing popularity of

virtual reality, the application can be used in a variety of ways. The long-term goals of the web

platform would be to integrate a similar format that Udemy and Coursera with the added

functionality to enter lectures/seminars through a VR experience. The technology can also be

granted to other institutions that conduct learning online. The platform can be specific to the

original intended target audience, the short-term target audience or even a combination of both.

Appendix A

UniVResity Client Testing and Feedback

Target Audience has shifted to students in K6-12 school. Client believes internet infrastructure of

areas where refugees would use web platform will not be able to support the VR components at

the moment and is now deemed a long-term goal for the organization. Teachers and instructors

are welcome to showcase any educational format and subject. Long-term goals of the web

platform would be to integrate a similar format that Udemy and Coursera offer in the future with

large recorded courses with the ability to enter lectures/seminars through a VR experience.
 The testing session included logging in, signing up, and logging out. Navigating through

pages from home screen “/”, dashboard, settings, create a stream page, and Stream room.

Testing of working deployment fetch code. Creating a new stream and verifying random URL

generation is done when navigating its front-end and database entry. CRUD functionality of user

settings page. Testing Anonymous user functionality.

Results were positive. Client successfully created a user and was able to login and

logout. Client gave feedback to make Course Description optional. Client was unaware that an

anonymous user was able to join streams but functionality was already active. Public vs Private

streams functionality was tested. Random URL was generated when creating stream.

Deployment server code was functional. Navigation of every page was successful. Client gave

feedback to add demo of long-term VR option in a streaming page.

Appendix B

Team Member Roles and the Division of Labor

The team decided it would serve us best if each team member was involved in every portion of

creating the website (front-end, back-end and database design). We decided to divide the work

based on React.js components. The team took on specific roles but helped in all areas when

necessary.
Josh Jones - ​Josh created the login, registration and dashboard portion of the website. Doing so

meant creating and designing the look and the experience of the forms, creating the back-end

dependencies, and creating the necessary database tables to retrieve and authenticate user

information.​ ​Additionally, Josh was responsible for the displaying and searching functionalities

of the streams that are displayed on the homepage.​ ​Josh created the overall style of the website

along with authorized and unauthorized functionality with routing.

Oscar Alba​​ - Oscar was responsible for all components dealing with user settings, user details

and user information. This included all front-end, back-end and database requirements to allow

the user to enter and edit their information on the website. Oscar dealt with deployment and

client communication/feedback.

Vasile Danciu​​ - Vasile was responsible for creating the individual room page for the virtual

reality interaction amongst users and instructors. This page creates a unique URL to allow users

to join and share the room. Vasile created the majority of the server endpoints to connect the

back-end to the front-end of the website. He created the “save” functionality of the streams and

the functions that were necessary to display them in the dashboard page.
References

Mark J. Epstein & Kristi Yuthas(2012), Redefining Education in the Developing World,

Retrieved from

https://ssir.org/articles/entry/redefining_education_in_the_developing_world​.

OLC WBG. Youtube. “Introduction to the Open Learning Campus” Online Video Clip.​ Youtube,

22, February 2016. Web. 10 August 2018.

https://www.youtube.com/watch?v=WNB89zcgguA

Wolpert S.2014, (November 24). ​Brain’s reaction to virtual reality should prompt further study.

Retrieved from:

http://newsroom.ucla.edu/releases/brains-reaction-to-virtual-reality-should-prompt-furthe

r-study-suggests-new-research-by-ucla-neuroscientists