In a past post I showed a Mobile Real Estate App that was built with Polymer. This time around I will revisit the app but instead use React.js. The Mobile Buyer's Agent application is a simple web based application used to demonstrate a basic React.js mobile web app. The goal is to allows a real estate buyer's agent to deliver a personalized mobile app experience to their clients by adding data to a Google spreadsheet. The agent updates a Google spreadsheet, and the web app loads its data from the spreadsheet.
This is a demonstration of using a shared Google Spreadsheet as the data source for a simple web based application. By using poggr.com and React.js it is extremely easy to create a web application like the Mobile Buyer's Agent.
The Real Estate Shopper List Google spreadsheet contains properties the agent wishes to present in the app. The neighborhood column is associated with the dropdown box, and allows a simple grouping/categorization of properties. The agent also provides other features and details associated with the properties.
Note: if you duplicate the example spreadsheet you must remember to publish it so it can be accessed by the Mobile Buyer's Agent app. If you get an error it is likely you forgotto publish the spreadsheet. To publish a spreadsheet while viewing it, use the file menu on Google Docs and choose "publish to the web", and follow the instructions.
Trying your own spreadsheet
If you publish your own copy of the spreadsheet you can easily substitute it in the app with a simple url parameter called sheetid.
For example if the link your are given when you plublish your spreadsheet is
https://docs.google.com/spreadsheets/d/1kv5haqhS8bUY_6IoJ6KBY5j42pN2WsY_wscDZSHb_m8/pubhtml
Then your sheetid is 1kv5haqhS8bUY\_6IoJ6KBY5j42pN2WsY\_wscDZSHb\_m8, and you can use it in this app by using a url with sheetid parameter as shown below:
https://po.gg/p-kz3NoHhgl:dZkIM34sBnlx?sheetid=1kv5haqhS8bUY\_6IoJ6KBY5j42pN2WsY\_wscDZSHb\_m8
This will substitue your spreadsheet for the default spreadsheet used in the app.
For info on the code take a look at the README document.