My 100 Days : Build websites using spreadsheets

Houssem Masri
2 min readJul 4, 2020

--

SiteFromSheet my third side project , and part of my 100 days journey toward getting a job . check out live version and source code .

Screenshot of the project

The idea :

You can try it yourself with this spreadsheet paste the link in my website.

Got inspired by Andrey Azimov’s sheet2site , and tried to build my own version . The idea basically is a no code tool which use google’s spreadsheets for building websites .

The stack :

Used express js and react js , and used tableTop to retrieve data from the spreadsheet .

How does it work :

1- The spreadsheet’s link gets sent to the backend .

2- Getting the data out of the spreadsheet using tableTop.

[ { tag: 'title',
value: 'Home Page'} ]

3- Mapping the Data and returning elements e.g :

if(ele.tag==='image'){elements= [...elements,`<img class='row' src=${ele.value} />`]}if(ele.tag==='title'){elements= [...elements,`<h1 class='row' >${ele.value}</h1>`]}

Previewing :

The elements array get sent to the front end , where is dangerouslySetInnerHTML to show the elements .

Previewing this spreadsheet

Downloading :

Creates an html file that includes html boilerplate + The elements , and sends the html file using res.sendFile .

How can you use it ?

You paste the link to your spreadsheet and choose between previewing and downloading . Check out The guide for more explanation .

What did i learn ?

For the last two months , I’ve been writing code every single day for like 12 hrs or probably more . This period teached me some lessons :

1- You won’t succeed in programming if you don’t enjoy programming .

2- You never stop learning .

3- You never know enough .

4- The best way of learning is doing .

5- Daily process even if not significant , makes significant impact .

--

--