Render data from Google Spreadsheets with React and Tabletop.js

Table of Contents

• About the Project
• Motivation
• Functionalities
• Snapshot
• Live Link
• Technologies Used
• Installation
• Contributors
• Bug / Feature Request
• References

About the Project

Demonstration of how to pull data from google spreadsheets using React and Tabletop.js.

Motivation

The purpose of this project was to get familiar with React and Tabletop.js.

Functionalities

• You can modify (add , delete or update) the spreadsheets and the data will automatically reflect in front end which is built using React .

Snapshot

1. Spreadsheets's snapshot :

2. React App :

Live Link

• React App : Link
• Google Spreadsheet:Link

Technologies Used :

• React , Tabletop.js , Github Page and Git

Installation

To get this project set up on your local machine, follow these simple steps:

Step 1
Navigate through the local folder where you want to clone the repository and run
git clone https://github.com/ditikrushna/event-app.git. It will clone the repo to your local folder.
Step 2
Run cd event-app
Step 3
Run npm install to install the npm packages from the package.json file.
Step 4
Run npm start to start the webpack server, you can now navigate to http://localhost:3000 to view the app. The server refreshes the app every time you make a change to a file used by it.

Contributors

​Ditikrushna Giri

• Github: Ditikrushna Giri
• Linkedin: Ditikrushna Giri
• E-mail: ditikrushna.nit@gmail.com

Bug / Feature Request

If you find a bug (the website couldn't handle the query and / or gave undesired results), kindly open an issue here by including your search query and the expected result.

If you'd like to request a new function, feel free to do so by opening an issue here. Please include sample queries and their corresponding results.

References

• Indrek 's Blog
• Blog2
• Official Repo of Tabletop.js