README.md

ReactJS: SimpleBackend

"SimpleBackend" is sample code of a Google Sheet connected to a Firebase Database.

The business use case is to manage spreadsheet data independently, and when ready for
public use, transfer to the database. Once transferred, the data is available to all web
& mobile clients; there is no need to redeploy. With modifications, any product or
service list would be example webapps ; i.e. BuzzFeed News, etc.

This repo is for Web built using create-react-app (see docs). It can be used as
starter-kit or combined with a monorepo, like SimpleLanding or SimpleApp
for Mobile use on iOS & Android.

Installation

Webapp

• Get the repo
• From root directory, do yarn
• Add Firebase per this guide: Firebase JS SDK for Webapps
  Required Basic ReactJS knowledge. If repo user needs review, please read this

Data (Flat JSON)

• Pre made data from Typicode
• Custom data you create from Mockaroo
  Note If repo data (xls | csv) will be different, update sheet.js & ListView.js as needed.

Database

• Create Firebase Realtime Database
• Configure 3rd party access to database, per this guide
  Note Remember to update Firebase security rules as needed

Spreadsheet

• Create Google Spreadsheet per this guide
• Install GAS code from this repo (modify as needed)
• Install External Library for use by Google Apps Script (GAS)

Run

For web, from the root directory, do

• node_modules/.bin/webpack -p --progress
• node_modules/.bin/webpack-dev-server --content-base public/ --config ./webpack.config.js --inline --hot --colors
• Manually open a browser to localhost:8080 to see webapp

Demo & Animated GIFs

• Google Spreadsheet
• Live Demo at Firebase Hosting
• Google PageSpeed Analysis (desktop | mobile)
  Note The spreadsheet & demo are primarily for desktop use.
• SimpleBackend on iOS
• SimpleBackend on Android
• SimpleBackend Webapp

Notes - Development

• CSS is mix of custom code and MUI
• If Dynamic Footer needed, please see Oreni for inspiration
• Data flow is one-way, from spreadsheet to database (to webapp).
• Data is flat json. The code grabs all data (in this repo: 100 records).
• Code in sheet.js & ListView.js can be refactored for nested / complex json.
• Axios function in ListView.js can be used if data will be obtained from external API.
• Custom components for Card & Loader used. Can be removed or refactored, as needed.
• GAS code transfers the entire sheet to database. Can be refactored to update 1 or N records.
  Note Update is done manually. Can be refactored for staff use by adding spreadsheet button.
• Data table sorting is 3rd party external plain JavaScript code added to webapp. If a complex
  table is needed, consider building a custom component or using react-table.

Inspiration

• Read and write data in Firebase from Apps Script (missing ReactJS webapp code)
• 1 location (the spreadsheet) to update data by any staff member using Google Sheets