DEV Community

hohooio823
hohooio823

Posted on

My 100 Days : Build websites using spreadsheets

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

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 .
Alt Text

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 .
follow me on twitter

Top comments (0)