10 web dev projects you can build with spreadsheets
Take a look at your files. How many side projects do you have stacked up right now?
We know that as a developer you have so many cool ideas of projects you want to build.
You start building them, get stuck or realize how long something actually takes, stop, and start a new project.
Don’t worry, we have all been there.
So, we have come up with 10 projects you can build using spreadsheets as a data source!
Checkout these ideas and tutorials on how you can get started:
1. Login or sign up form using Google Sheets
A sign up and login page often require an external service such as Firebase, or need a database to be able to be successfully used.
Instead, you can use a spreadsheet that will store the sign up information and verify it when someone is logging in.
Adding a login/sign up feature will allow you to create personalized projects that change for any account or person using it.
Here you can see that the login information used to create an account is saved in this Google Sheet. It has the username, password, email and phone number they entered.
Using JavaScript and the Google Sheets App Script, the data in the spreadsheet will be checked to verify if the user has an account.
If they do, they will be able to login to their personalized account!
Note: this is meant to be a fun learning project. However, do not use this in production since plain-text passwords are a huge security risk
Tools or languages used: Google Sheets App Script, HTML, JavaScript
Follow the full tutorial here:
https://www.youtube.com/watch?v=Ce_uMrSNg9E
2. Survey or registration form
You can build a form for conducting surveys of something you are curious about or a registration form to collect information for an event.
In this tutorial, we create a form for setting up an appointment.
The column names of this spreadsheet are what will be recorded when someone submits the form. The names you give your column will be the id we use to connect the columns in your form’s HTML code.
First, you will upload a spreadsheet or connect a Google Sheet on API Spreadsheets.
After getting a REST API from the spreadsheet’s data, you will implement that in your form’s HTML code to save the data from the form to the spreadsheet..
Tools or languages used: API Spreadsheets, JavaScript, HTML, Google Sheets or Excel Spreadsheet
Follow the full tutorial here:
https://apispreadsheets.com/tutorials/ultimate-guide-to-html-forms.html
3. Song request form for DJ
With this tutorial you can create a song request form to use at your next party or event!
Users can fill out a form with what song they want to be played and the DJ will see a queue being formed.
The spreadsheet has a column for the song’s name, artist and a link. Using API Spreadsheets you can get a REST API for the spreadsheet the form data will be saved.
Then you can instantly use the spreadsheet data to display on the frontend of your website!
Attendees will be able to get a live link of the next songs on queue right after they fill out a form.
Tools or languages used: API Spreadsheets, Google Sheets, HTML, JavaScript
Follow the full tutorial here:
4. Deleting or updating option for the user
Continuing on with the DJ Song request app, you can create an option for users to delete or save notes.
This can be implemented into any project that you want to provide this option for.
Each song that has been input from the form is given an ID as we can see on the spreadsheet.
While this is not an option in the form, it will allow you to set up a delete or update option easily in the code.
Using API Spreadsheets to get a REST API from this Google Sheet, you can use code samples to update or delete data from the spreadsheets.
When you delete it from the frontend, it will automatically be deleted on the Google Sheet! Same with adding notes or updating the input.
Tools or languages used: API Spreadsheets, Google Sheets, JavaScript
Follow the full tutorial here:
5. Website that shows how to pronounce names
By the end of this tutorial you will be able to create a website that shows you how to pronounce names. This can be used for anything that you would like to provide audio clips for.
The spreadsheet includes the name, how it is written and an audio clip of it.
The audio clip should be in .mp3 format and saved somewhere (like Google drive or S3) where you can get a direct link to the file.
We are going to be using API Spreadsheets to convert the Google Sheet to a REST API. From there we can use JavaScript to display each element onto the website.
Tools or languages used: API Spreadsheets, Google Sheets, JavaScript, HTML
Follow the full tutorial here: https://lovespreadsheets.medium.com/make-a-custom-website-using-data-from-google-sheets-c1bf0ed9da8f
6. Personal blog that is constantly changed or needs to be updated
Having a blog is a great way to write something personal or go in depth on a topic you enjoy.
The annoying part becomes finding a way to update and keep the data current without having to always go into the code.
On one part of my blog I want to keep an about me section that I can update weekly to keep my readers informed about me.
On the Google Sheet, I have listed the week, show I am watching, artist I’m listening to, language I am studying and a quote that I liked.
Now, when I want to update this section I can do so from this Google Sheet!
Tools or languages used: API Spreadsheets, JavaScript, HTML, Google Sheets
Follow the full tutorial here:
https://apispreadsheets.com/tutorials/dynamic-html-text.html
7. Website to display movie cards and information
This tutorial takes the data from the top movies of 2019 and can create cards to display it nicely.
In the Google Sheet we added the name, link etc. You can choose to use an excel spreadsheet as well but we did Google Sheet in case we ever want to change the info or add something new and see it instantly.
You connect the Google Sheet to API Spreadsheets to use as a REST API.
Adding some CSS to the code, we are able to nicely display the data so it is easy to view. This opens up many options for you to be able to display data from a spreadsheet.
Tools or languages used: HTML, JavaScript, Google Sheets, React, API Spreadsheets
Follow the full tutorial here:
https://apispreadsheets.com/tutorials/react-site-with-no-backend.html
8. Importer where users can upload, clean, parse spreadsheet data.
This button can be used to collect spreadsheet data that can automatically be used as an API.
You can customize the design and use a URL to share the importer on your website or with your users.
The imported spreadsheet can be saved in multiple destinations such as your Google Drive or Dropbox account.
Read more about what an importer is and how you can use it: https://lovespreadsheets.medium.com/what-is-a-no-code-spreadsheet-importer-ccd35741e751
Tools or languages used: API Spreadsheets
Follow the full tutorial here: https://apispreadsheets.com/tutorials/collect-client-spreadsheets-no-code.html
9. Dashboard to display live football stats
This tutorial shows you how to implement a live bar graph onto your project or website.
We are using data from Super Bowl wins.
On the Google sheet we have included the name of the team and the wins they received.
Using a bar graph library/service and API Spreadsheets we will first get a REST API of the data. Then the Google Sheet will be able to display and update the data live.
Tools or languages used: AnyChart, API Spreadsheets, JavaScript, HTML
Follow the full tutorial here:
https://apispreadsheets.com/tutorials/dashboard-with-google-sheets.html
10. Automate emails using a spreadsheet and python
There are often times you want to send a notification or a recurring email to a group of people.
You can use the data in the spreadsheet to get the receipt, their email address, and what the email will say to send mass emails at once.
Connecting the spreadsheet to API Spreadsheets you will get a rest API that you can code with in Python to set up auto emailing.
Just don’t use this to send out spam emails!
Tools or languages used: Python, API Spreadsheets
Follow the full tutorial here:
Closing Remarks
We hope these tutorials show you how easy it is to build web dev features using spreadsheets!
If you want a custom app or project built using spreadsheets, you can check out our consulting service here: https://www.lovespreadsheets.com!
