jolaro / react-marzipano-firebase

This web application is an interactive, gamified virtual tour made with Node.js, React and Marzipano. It features different types of interactive spots.

Interactive Virtual Tour [scrubbed version]

Internal internship project for Accenture (Heerlen, NL) by Polished Studios (@polishedstudios).

This web application is an interactive, gamified virtual tour made with Node.js, React and Marzipano. It was made to be used as an educational tool within Accenture.

The general idea is for user to be curious and interact with various interactions, so that they learn information about different topics, and can answer questions with this new knowledge. The user has the freedom to view and switch between any interaction at any time they want. By doing certain actions the user can unlock new interactions and rooms.

Deployed on https://polishedstudios-virtualtour.herokuapp.com/

Please wait a moment after clicking the link. The app may take up to 1 minute to start up from sleep mode.

About the virtual tour

The user can interact with different types of spots throughout the room, these are:

• Link spots (navigate between rooms).
• Information spots (opens a box with information).
• Video spots (opens a box with short information wherein you can open a video).
• Question spots (opens a dialog window wherein you can answer a question).
• Item spots (each item will have its own spot).

Information boxes for information and videos are fully customizable with html code.

This virtual tour also has gamification elements.

Actions the user can take to trigger events:

• Clicking on a specific interactive spot (e.g. pickup item).
• Answering a specific question correct.
• Achieving a certain score (per room or total).
• Closing a video.

These actions can unlock new interactive spots, rooms and items.

Remarks

• Desktop responsiveness only.
• LocalStorage is used to remember the user. Secure sessions were not in the scope.

Setup for self-use

1. Add .env file to root directory with the following variables from your Firebase config:

   • REACT_APP_FIREBASE_API_KEY
   • REACT_APP_FIREBASE_AUTH_DOMAIN
   • REACT_APP_FIREBASE_PROJECT_ID
   • REACT_APP_FIREBASE_STORAGE_BUCKET
   • REACT_APP_FIREBASE_MESSAGE_SENDER_ID
   • REACT_APP_FIREBASE_APP_ID

2. Add example firebase data:

   Table header is document id.

   collection: scenes

   OS
   name	string	Outside
   initialViewParameters	array (numbers)	0.25
   		0
   		10

   LR
   name	string	Living Room
   initialViewParameters	array (numbers)	-0.4
   		0.25
   		0

   BR
   name	string	Bathroom
   initialViewParameters	array (numbers)	-0.31
   		0.13
   		10

   collection: hotspots

   OS-ITEM-1
   scene	string	Outside
   type	string	item
   yaw	number	0.92
   pitch	number	-0.045
   tooltip	string	Pickup key
   unlockedby	string	canPickupKey

   OS-L-1
   scene	string	Outside
   type	string	link
   yaw	number	-0.08
   pitch	number	-0.16
   tooltip	string	Go inside
   target	string	Living Room
   unlockedby	string	key

   LR-L-1
   scene	string	Living Room
   type	string	link
   yaw	number	0.54
   pitch	number	0.06
   tooltip	string	Go outside
   target	string	Outside

   LR-L-2
   scene	string	Living Room
   type	string	link
   yaw	number	-2.435
   pitch	number	0.2
   tooltip	string	Go to bathroom
   target	string	Bathroom
   unlockedby	string	bathroom

   LR-I-1
   scene	string	Living Room
   type	string	info
   yaw	number	-0.44
   pitch	number	0.21
   title	string	Apple
   info	array (strings)	<p>This is an apple. There are various apples...</p>
   		<img class="image" alt="Info" link="https://i.imgur.com/2qJ91K5.png"/>
   		<i class="centered">Click the image to view it in a bigger window.</i>

   LR-I-2
   scene	string	Living Room
   type	string	info
   yaw	number	0.172
   pitch	number	0.02
   title	string	Fridge
   info	array (strings)	<p>This is a fridge.</p>
   		<p>You can learn more about fridges.</p>
   		<i>More information about fridges</i><img class="one-link" alt="Info" link="https://i.imgur.com/5hejNL8.png"/>
   unlockedby	string	fridge
   size	string	sm

   LR-V-1
   scene	string	Living Room
   type	string	video
   yaw	number	-0.78
   pitch	number	0.6
   title	string	Apples: History & Nutrition
   info	array (strings)	<p>This is a video about the history and nutrition of apples.</p>
   		<i>Watch video</i><img class="one-link" alt="Video" link="https://www.youtube.com/embed/HD4o26HcHi0"/>
   size	string	sm

   LR-Q-1
   scene	string	Living Room
   type	string	question
   yaw	number	-0.17
   pitch	number	0.04
   question	string	What fruit is present in this room?
   answers	array (strings)	Banana
   		Lemon
   		Apple
   correctAnswer	number	2

   BR-L-1
   scene	string	Bathroom
   type	string	link
   yaw	number	1.76
   pitch	number	-0.08
   tooltip	string	Go back
   target	string	Living Room

3. To run the web application locally: npm install & npm start