First thing to do, it's include the firebase library on the site headers.

	
		<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>
	

Now, we need to initialize the SDK using the next code instructions:

	
		var config = {
			apiKey: "PUBLIC_API_KEY",
			authDomain: "DOMAIN",
			databaseURL: "DATABASE_URL",
			storageBucket: "STORAGE_BUCKED",
			messagingSenderId: "SENDER_ID"
		};
		firebase.initializeApp(config);
	

How can I quickly add a variable to firebase? What it could do? Does it worth the effort?

The answers could be "it's easy", "it depends", "maybe". For example, I've included a "Color theme selector" on the footer of this page. The beautiful of this? When any visitor changes the value, everyone else would see it at same color at same time! �real time!. Maybe its not quite amazing, but it's a first approach to many interactions that visitors could do between themselves

Once firebase it's properly installed, the first thing that I did was append a "select" control in the HTML

	
		<div class="input-field col s12">	
		    <select id="colorThemeSelector">	
		      <option value="" disabled selected>Theme</option>	
		      <option value="indigo">	Indigo</option>	
		      <option value="red">Red</option>	
		      <option value="pink">Pink</option>	
		      <option value="purple">Purple</option>	
		      <option value="blue">Blue</option>	
		      <option value="teal">Teal</option>
		      <option value="green">Green</option>	
		      <option value="lime">Lime</option>	
		      <option value="amber">Amber</option>	
		      <option value="grey">Grey</option>	
		    </select>	
		    <label class="white-text">RT Theme Color Selector</label>	
		</div>
		

In order of evade future work (if I wish to change the colors or append new ones), I've created two control variables to help me at the replace classes process

	
		var colorThemeClasses = "",
			colorThemeTextClasses  = "";
		...
		$("#colorThemeSelector option").each(function(i, item){
			var val = $(item).val();
			if (val) {
				colorThemeClasses += val + " ";
				colorThemeTextClasses += val + "-text ";
			}
		});	
		

Next, I need a function in charge of the site color change. For example, this receives as a parameter the new color that I want to display. I only search for any object in the page with the classes "themeColorText" and "themeColor" and made the replace.

	
		function changeTheme(colorTheme) {
			$(".themeColorText").removeClass(colorThemeTextClasses).addClass(colorTheme + "-text");
			$(".themeColor").removeClass(colorThemeClasses).addClass(colorTheme);
		}	
	

From firebase, I get the database handler and create a reference to "colorTheme" (if it doesnt exists, it would be created at the moment I assign a new value), and I declare a new handler so, at the time the DB changes it's value, this handler calls the changeTheme function of the previous step

	
		var databaseColorRef = firebase.database().ref("colorTheme");
		databaseColorRef.on("value", function(snap){
			color = snap.val();
			changeTheme(color);
		});
		

Finally, we only need to assign the change event to a new function in charge of save the new value in the DB. This, will call in an automatic way my handler in every active site visitor (including me) and for each one it will change the selected color.

	
		$("#colorThemeSelector").change(function(){
			databaseColorRef.set($(this).val());
		});