diff --git a/farmdata2/farmdata2_modules/fd2_school/api1/api1.html b/farmdata2/farmdata2_modules/fd2_school/api1/api1.html
new file mode 100644
index 0000000000..9632e7bebb
--- /dev/null
+++ b/farmdata2/farmdata2_modules/fd2_school/api1/api1.html
@@ -0,0 +1,152 @@
+<html>
+	<head>
+		<title>Vue Data Binding Spike</title>
+	</head>
+	
+	<body>
+
+		<div id="sample-report" v-cloak>		
+
+		<h1>Harvest Report</h1>
+	 		<p>This page is a <i>mockup</i> of a simplified harvest report.</p>
+
+			<label for=”title”>Title:</label>
+			<input type="text" id="title" name="title" value="My Sample Harvest Report" v-model="harvestTitle">
+
+			<br>
+			
+			<label for=”start”>Start:</label>
+			<input type="date" id="start" name="start" v-model="startDate"
+	       	min="2014-01-01" :max="endDate">
+
+			<label for=”end”>End:</label>
+			<input type="date" id="end" name="end" v-model="endDate"
+	       	:min="startDate" max="2022-01-01">
+
+			<br>
+			
+			<label for=”crop”>Crop:</label>
+			<select id="crop" name="crop" v-model="selectedCrop">
+	  			<option v-for="crop in cropMaptoArray">{{ crop }}</option>
+            </select>
+            
+            <label for=”field”>Field:</label>
+			<select id="field" name="field" v-model="selectedField">
+	  			<option v-for="area in areaMaptoArray">{{ area }}</option>
+			</select>
+            
+			<br>
+			<button class="btn btn-primary" @click="addReport() ; addLoginData()">Generate Report</button>
+
+		<hr>
+		
+		<h1>{{ harvestTitle == '' ? 'Mock Harvest Report' : harvestTitle }}</h1>
+		
+			<p>Details:</p>
+			<ul>
+					<li><b>Farm</b>: {{ farm }}</li>
+					<li><b>User</b>: {{ user }}</li>
+					<li><b>Language</b>: {{ language }}</li>
+					<br>
+					<li><b>Start</b>:{{ startDate }}</li>
+					<li><b>End</b>:{{ endDate }}</li>
+					<li><b>Crop</b>:{{ selectedCrop }}</li>
+				</ul>
+
+        <p v-if="harvestLogs.length === 0">There are no Harvest Logs to be displayed.</p>
+
+		<table border=1>
+			<tr v-if="harvestLogs.length > 0">
+                <th>Row</th>
+				<th>Date</th>
+				<th>Area</th>
+				<th>Crop</th>
+				<th>Yield</th>
+				<th>Units</th>
+			</tr>
+			<tr v-for="(harvestLog,index) in harvestLogs">
+                <td>{{ index }}</td>
+                <td>{{ harvestLog.date }}</td>
+                <td>{{ harvestLog.area }}</td>
+                <td>{{ harvestLog.crop }}</td>
+                <td>{{ harvestLog.yield }}</td>
+                <td>{{ harvestLog.units }}</td>
+            </tr>
+		</table>
+
+		</div>
+
+		<script src="https://unpkg.com/vue@2"></script>
+		<script>
+		var harvestReport = new Vue({
+			el: '#sample-report',
+			data: {
+				harvestTitle: 'My Sample Harvest Report',
+				startDate: '2020-05-05',
+				endDate: '2020-05-15',
+				selectedCrop: 'Kale',
+                cropOptions: [ 'Broccoli', 'Kale', 'Peas' ],
+                selectedField: 'All',
+                fieldOptions: [ 'All', 'Chuau-1', 'SQ7' ],
+                harvestLogs: [],
+                farm: '',
+                user: '',
+                language: '',
+                idToCropMap: [],
+                idToAreaMap: [],
+            },
+            methods: {
+                addReport: function() {
+                    this.harvestLogs.push( {date: "2018-05-02", area: "Chuau-1", crop: "Kale", yield: 10, units: "Bunches"} )
+                },
+                addLoginData: function() {
+                    axios
+                    .get('/farm.json') 
+                    .then((response) => {
+                        console.log("Got Response")
+                        console.log(response)
+                        this.farm = response.data.name;
+                        this.user = response.data.user.name;
+                        this.language = response.data.languages.en.name;
+                    })
+                    .catch((error) => {
+                        console.log("Error Occurred")
+                        console.log(error)
+
+                })
+                }
+            },
+            computed:{
+                cropMaptoArray() {
+                    return Array.from(this.idToCropMap.values())
+                },
+                areaMaptoArray() {
+                    return Array.from(this.idToAreaMap.values())
+                }
+            },
+            created() {
+                getIDToCropMap()
+                    .then((response) => {
+                        this.idToCropMap = new Map(response)
+                    })
+                    .catch((err) => {
+                        console.log("Error Occurred")
+                        console.log(err)
+                    })
+                getIDToAreaMap()
+                    .then((response) => {
+                        this.idToAreaMap = new Map(response)
+                    })
+                    .catch((err) => {
+                        console.log("Error Occurred")
+                        console.log(err)
+                    })
+            },
+        });
+        
+        Vue.config.devtools = true;
+
+		</script>		
+
+	</body>
+</html>
diff --git a/farmdata2/farmdata2_modules/fd2_school/api2/api2.html b/farmdata2/farmdata2_modules/fd2_school/api2/api2.html
new file mode 100644
index 0000000000..abd3ac0f97
--- /dev/null
+++ b/farmdata2/farmdata2_modules/fd2_school/api2/api2.html
@@ -0,0 +1,169 @@
+<html>
+	<head>
+		<title>Vue Data Binding Spike</title>
+	</head>
+	
+	<body>
+
+		<div id="sample-report" v-cloak>		
+
+		<h1>Harvest Report</h1>
+	 		<p>This page is a <i>mockup</i> of a simplified harvest report.</p>
+
+			<label for=”title”>Title:</label>
+			<input type="text" id="title" name="title" value="My Sample Harvest Report" v-model="harvestTitle">
+
+			<br>
+			
+			<label for=”start”>Start:</label>
+			<input type="date" id="start" name="start" v-model="startDate"
+	       	min="2014-01-01" :max="endDate">
+
+			<label for=”end”>End:</label>
+			<input type="date" id="end" name="end" v-model="endDate"
+	       	:min="startDate" max="2022-01-01">
+
+			<br>
+			
+			<label for=”crop”>Crop:</label>
+			<select id="crop" name="crop" v-model="selectedCrop">
+	  			<option v-for="crop in cropMaptoArray">{{ crop }}</option>
+            </select>
+            
+            <label for=”field”>Field:</label>
+			<select id="field" name="field" v-model="selectedField">
+	  			<option v-for="area in areaMaptoArray">{{ area }}</option>
+			</select>
+            
+			<br>
+			<button class="btn btn-primary" @click="reqDates()">Generate Report</button>
+
+		<hr>
+		
+		<h1>{{ harvestTitle == '' ? 'Mock Harvest Report' : harvestTitle }}</h1>
+		
+			<p>Details:</p>
+			<ul>
+					<li><b>Farm</b>: {{ farm }}</li>
+					<li><b>User</b>: {{ user }}</li>
+					<li><b>Language</b>: {{ language }}</li>
+					<br>
+					<li><b>Start</b>:{{ startDate }}</li>
+					<li><b>End</b>:{{ endDate }}</li>
+					<li><b>Crop</b>:{{ selectedCrop }}</li>
+				</ul>
+
+        <p v-if="harvestLogs.length === 0">There are no Harvest Logs to be displayed.</p>
+
+		<table border=1>
+			<tr v-if="harvestReportRows.length > 0">
+                <th>Row</th>
+				<th>Date</th>
+				<th>Area</th>
+				<th>Crop</th>
+				<th>Yield</th>
+				<th>Units</th>
+			</tr>
+			<tr v-for="(harvestLog,index) in harvestReportRows">
+                <td>{{ index }}</td>
+                <td>{{ harvestLog.date }}</td>
+                <td>{{ harvestLog.area }}</td>
+                <td>{{ harvestLog.crop }}</td>
+                <td>{{ harvestLog.yield }}</td>
+                <td>{{ harvestLog.units }}</td>
+            </tr>
+		</table>
+
+		</div>
+
+		<script src="https://unpkg.com/vue@2"></script>
+		<script>
+		var harvestReport = new Vue({
+			el: '#sample-report',
+			data: {
+				harvestTitle: 'My Sample Harvest Report',
+				startDate: '2020-05-05',
+				endDate: '2020-05-15',
+				selectedCrop: 'Kale',
+                cropOptions: [ 'Broccoli', 'Kale', 'Peas' ],
+                selectedField: 'All',
+                fieldOptions: [ 'All', 'Chuau-1', 'SQ7' ],
+                harvestLogs: [],
+                farm: '',
+                user: '',
+                language: '',
+                idToCropMap: [],
+                idToAreaMap: [],
+            },
+            methods: {
+                addLoginData: function() {
+                    axios
+                    .get('/farm.json') 
+                    .then((response) => {
+                        console.log("Got Response")
+                        console.log(response)
+                        this.farm = response.data.name;
+                        this.user = response.data.user.name;
+                        this.language = response.data.languages.en.name;
+                    })
+                    .catch((error) => {
+                        console.log("Error Occurred")
+                        console.log(error)
+
+                })
+                },
+                reqDates: function() {
+                    let link = '/log.json?type=farm_harvest&timestamp[ge]=' + dayjs(this.startDate).unix() + '&timestamp[le]=' + dayjs(this.endDate).unix()
+                    getAllPages(link,this.harvestLogs)
+                }
+            },
+            computed:{
+                cropMaptoArray() {
+                    return Array.from(this.idToCropMap.values())
+                },
+                areaMaptoArray() {
+                    return Array.from(this.idToAreaMap.values())
+                },
+                harvestReportRows() {
+                    let tableRows = []
+                    for(let log of this.harvestLogs) {
+                        crop = this.idToCropMap.get(log.data.crop_tid)
+                        let tableRow = {
+                            date: log.timestamp,
+                            area: log.area[0].name,
+                            crop: crop,
+                            yield: log.quantity[0].value,
+                            units: log.quantity[0].unit.name,
+
+                        }
+                        tableRows.push(tableRow)
+                    }
+                    return tableRows
+                }
+            },
+            created() {
+                getIDToCropMap()
+                    .then((response) => {
+                        this.idToCropMap = new Map(response)
+                    })
+                    .catch((err) => {
+                        console.log("Error Occurred")
+                        console.log(err)
+                    })
+                getIDToAreaMap()
+                    .then((response) => {
+                        this.idToAreaMap = new Map(response)
+                    })
+                    .catch((err) => {
+                        console.log("Error Occurred")
+                        console.log(err)
+                    })
+            },
+        });
+        
+        Vue.config.devtools = true;
+
+		</script>		
+
+	</body>
+</html>
\ No newline at end of file
diff --git a/farmdata2/farmdata2_modules/fd2_school/html/html.html b/farmdata2/farmdata2_modules/fd2_school/html/html.html
new file mode 100644
index 0000000000..d2d7f99894
--- /dev/null
+++ b/farmdata2/farmdata2_modules/fd2_school/html/html.html
@@ -0,0 +1,69 @@
+<html>
+	<h1>Harvest Report</h1>
+ 		<p>This page is a <i>mockup</i> of a simplified harvest report.</p>
+	
+		<label for=”title”>Title:</label>
+		<input type="text" id="title" name="title" value="My Sample Harvest Report">
+		
+		<br>
+		
+		<label for=”start”>Start:</label>
+		<input type="date" id="start" name="start"
+       	value="2020-05-05"
+       	min="2014-01-01" max="2022-01-01">
+
+		<label for=”end”>Start:</label>
+		<input type="date" id="end" name="end"
+       	value="2020-05-15"
+       	min="2020-05-05" max="2022-01-01">
+
+		<br>
+		
+		<label for=”crop”>Crop:</label>
+		<select id="crop" name="crop">
+  			<option>Broccoli</option>
+  			<option selected>Kale</option>
+  			<option>Peas</option>
+		</select>
+		<br>
+		<input type="button" value="Generate Report">
+
+	<hr>
+
+	<h1>My Sample Harvest Report</h1>
+		<p>Details:</p>
+			<ul>
+				<li><b>Farm</b>:Sample Farm</li>
+				<li><b>User</b>:manager1</li>
+				<li><b>Language</b>:English</li>
+				<br>
+				<li><b>Start</b>:05/01/2018</li>
+				<li><b>End</b>:05/15/2018</li>
+				<li><b>Crop</b>:Kale</li>
+			</ul>
+
+	<table border=1>
+		<tr>
+			<th>Date</th>
+			<th>Area</th>
+			<th>Crop</th>
+			<th>Yield</th>
+			<th>Units</th>
+		</tr>
+		<tr>
+			<td>05/02/2018</td>
+			<td>Chuau-1</td>
+			<td>Kale</td>
+			<td>10</td>
+			<td>Bunches</td>
+		</tr>
+		<tr>
+			<td>05/052018</td>
+			<td>SQ7</td>
+			<td>Kale</td>
+			<td>7</td>
+			<td>Bunches</td>
+		</tr>
+	</table>
+
+</html>
\ No newline at end of file
diff --git a/farmdata2/farmdata2_modules/fd2_school/vue1/vue1.html b/farmdata2/farmdata2_modules/fd2_school/vue1/vue1.html
new file mode 100644
index 0000000000..449b01e592
--- /dev/null
+++ b/farmdata2/farmdata2_modules/fd2_school/vue1/vue1.html
@@ -0,0 +1,98 @@
+<html>
+	<head>
+		<title>Vue Data Binding Spike</title>
+	</head>
+	
+	<body>
+
+		<div id="sample-report" v-cloak>		
+
+		<h1>Harvest Report</h1>
+	 		<p>This page is a <i>mockup</i> of a simplified harvest report.</p>
+
+			<label for=”title”>Title:</label>
+			<input type="text" id="title" name="title" value="My Sample Harvest Report" v-model="harvestTitle">
+
+			<br>
+			
+			<label for=”start”>Start:</label>
+			<input type="date" id="start" name="start" v-model="startDate"
+	       	min="2014-01-01" max="2022-01-01">
+
+			<label for=”end”>Start:</label>
+			<input type="date" id="end" name="end" v-model="endDate"
+	       	min="2020-05-05" max="2022-01-01">
+
+			<br>
+			
+			<label for=”crop”>Crop:</label>
+			<select id="crop" name="crop" v-model="selectedCrop">
+	  			<option v-for="cropOption in cropOptions">{{ cropOption }}</option>
+            </select>
+            
+            <label for=”field”>Field:</label>
+			<select id="field" name="field" v-model="selectedField">
+	  			<option v-for="fieldOption in fieldOptions">{{ fieldOption }}</option>
+			</select>
+            
+			<br>
+			<input type="button" value="Generate Report">
+
+		<hr>
+		
+		<h1>{{ harvestTitle == '' ? 'Mock Harvest Report' : harvestTitle }}</h1>
+		
+			<p>Details:</p>
+			<ul>
+					<li><b>Farm</b>:Sample Farm</li>
+					<li><b>User</b>:manager1</li>
+					<li><b>Language</b>:English</li>
+					<br>
+					<li><b>Start</b>:{{ startDate }}</li>
+					<li><b>End</b>:{{ endDate }}</li>
+					<li><b>Crop</b>:{{ selectedCrop }}</li>
+				</ul>
+
+		<table border=1>
+			<tr>
+				<th>Date</th>
+				<th>Area</th>
+				<th>Crop</th>
+				<th>Yield</th>
+				<th>Units</th>
+			</tr>
+			<tr v-for="harvestLog in harvestLogs">
+                <td>{{ harvestLog.date }}</td>
+                <td>{{ harvestLog.area }}</td>
+                <td>{{ harvestLog.crop }}</td>
+                <td>{{ harvestLog.yield }}</td>
+                <td>{{ harvestLog.units }}</td>
+            </tr>
+		</table>
+
+		</div>
+
+		<script src="https://unpkg.com/vue@2"></script>
+		<script>
+		var harvestReport = new Vue({
+			el: '#sample-report',
+			data: {
+				harvestTitle: 'My Sample Harvest Report',
+				startDate: '2020-05-05',
+				endDate: '2020-05-15',
+				selectedCrop: 'Kale',
+                cropOptions: [ 'Broccoli', 'Kale', 'Peas' ],
+                selectedField: 'All',
+                fieldOptions: [ 'All', 'Chuau-1', 'SQ7' ],
+                harvestLogs: [
+                    {date: '2018-05-02', area: 'Chuau-1', crop: 'Kale', yield: 10, units: 'Bunches'}, 
+                    {date: '2018-05-05', area: 'SQ7', crop: 'Kale', yield: 7, units: 'Bunches'} ],
+			}
+        });
+        
+        Vue.config.devtools = true;
+
+		</script>		
+
+	</body>
+</html>
\ No newline at end of file
diff --git a/farmdata2/farmdata2_modules/fd2_school/vue2/vue2.html b/farmdata2/farmdata2_modules/fd2_school/vue2/vue2.html
new file mode 100644
index 0000000000..1f31c152e1
--- /dev/null
+++ b/farmdata2/farmdata2_modules/fd2_school/vue2/vue2.html
@@ -0,0 +1,108 @@
+<html>
+	<head>
+		<title>Vue Data Binding Spike</title>
+	</head>
+	
+	<body>
+
+		<div id="sample-report" v-cloak>		
+
+		<h1>Harvest Report</h1>
+	 		<p>This page is a <i>mockup</i> of a simplified harvest report.</p>
+
+			<label for=”title”>Title:</label>
+			<input type="text" id="title" name="title" value="My Sample Harvest Report" v-model="harvestTitle">
+
+			<br>
+			
+			<label for=”start”>Start:</label>
+			<input type="date" id="start" name="start" v-model="startDate"
+	       	min="2014-01-01" :max="endDate">
+
+			<label for=”end”>End:</label>
+			<input type="date" id="end" name="end" v-model="endDate"
+	       	:min="startDate" max="2022-01-01">
+
+			<br>
+			
+			<label for=”crop”>Crop:</label>
+			<select id="crop" name="crop" v-model="selectedCrop">
+	  			<option v-for="cropOption in cropOptions">{{ cropOption }}</option>
+            </select>
+            
+            <label for=”field”>Field:</label>
+			<select id="field" name="field" v-model="selectedField">
+	  			<option v-for="fieldOption in fieldOptions">{{ fieldOption }}</option>
+			</select>
+            
+			<br>
+			<button class="btn btn-primary" @click='harvestLogs.push( {date: "2018-05-02", area: "Chuau-1", crop: "Kale", yield: 10, units: "Bunches"} )'>Generate Report</button>
+
+		<hr>
+		
+		<h1>{{ harvestTitle == '' ? 'Mock Harvest Report' : harvestTitle }}</h1>
+		
+			<p>Details:</p>
+			<ul>
+					<li><b>Farm</b>:Sample Farm</li>
+					<li><b>User</b>:manager1</li>
+					<li><b>Language</b>:English</li>
+					<br>
+					<li><b>Start</b>:{{ startDate }}</li>
+					<li><b>End</b>:{{ endDate }}</li>
+					<li><b>Crop</b>:{{ selectedCrop }}</li>
+				</ul>
+
+        <p v-if="harvestLogs.length === 0">There are no Harvest Logs to be displayed.</p>
+
+		<table border=1>
+			<tr v-if="harvestLogs.length > 0">
+                <th>Row</th>
+				<th>Date</th>
+				<th>Area</th>
+				<th>Crop</th>
+				<th>Yield</th>
+				<th>Units</th>
+			</tr>
+			<tr v-for="(harvestLog,index) in harvestLogs">
+                <td>{{ index }}</td>
+                <td>{{ harvestLog.date }}</td>
+                <td>{{ harvestLog.area }}</td>
+                <td>{{ harvestLog.crop }}</td>
+                <td>{{ harvestLog.yield }}</td>
+                <td>{{ harvestLog.units }}</td>
+            </tr>
+		</table>
+
+		</div>
+
+		<script src="https://unpkg.com/vue@2"></script>
+		<script>
+		var harvestReport = new Vue({
+			el: '#sample-report',
+			data: {
+				harvestTitle: 'My Sample Harvest Report',
+				startDate: '2020-05-05',
+				endDate: '2020-05-15',
+				selectedCrop: 'Kale',
+                cropOptions: [ 'Broccoli', 'Kale', 'Peas' ],
+                selectedField: 'All',
+                fieldOptions: [ 'All', 'Chuau-1', 'SQ7' ],
+                harvestLogs: [],
+            },
+            methods: {
+                saveName: function() {
+                    harvestLogs.push( {date: "2018-05-02", area: "Chuau-1", crop: "Kale", yield: 10, units: "Bunches"} )
+                    },
+                restrictDate: function() {
+                    harvestLogs.push( {date: "2018-05-02", area: "Chuau-1", crop: "Kale", yield: 10, units: "Bunches"} )
+                    }
+            }
+        });
+        
+        Vue.config.devtools = true;
+
+		</script>		
+
+	</body>
+</html>
\ No newline at end of file
