SiteFromSheet my third side project , and part of my 100 days journey toward getting a job . check out live version and source code .
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 .
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)