I’ve been learning frontend on and off for a few years and I keep trying to find a good project to help further my knowledge. My amazing wife created a Google Sheets database of cocktails we learnt to make over the pandemic. Columns are ingredients and rows are measurements in ounces.

I’d love to create and self-host a frontend for this data. Trying to use the Sheets app on our phones has driven us to drink (😉).

I have a server running OMV and Docker, I’d like to host a searchable webpage on my network (maybe one day host it externally) and utilize the data in this Sheets doc.

My Google-Fu is failing me, I don’t know what to search to make a start. Someone on Reddit suggested just using the Sheets doc and doing an API call to that file. I’m not opposed, I’m also happy to look into some sort of database software to broaden my skills (MongoDB etc).

Any suggestions or tutorial recommendations to help me create a searchable frontend using the data in my Sheets doc?

  • robalees@lemmy.worldOPEnglish
    2·
    1 year ago

    Thank you for the reply!

    Great call regarding a JSON, I’ll probably look at the API call to Sheets API. Already exists in that platform and I’ll still learn JS.

    I’d like to stick with Vanilla JS for right now. Eventually I’ll learn React, but I need a better understanding of JS first. I’m really interested in three.js and playing with animation, but for this project the focus is getting the front end to search the cocktails. Once that works, I’ll make it more dynamic!

    Any search suggestions for vanilla JS to make the required API calls?

    As for the front end, I’ll probably start with something very basic, search bar, results and then the recipe. Try to keep it responsive and easier than browsing the Sheets app!

    Thanks again!