Tutorial to launch it

[julian-passebecq]

Hi Pablo

Thanks for sharing your nice project !

Short version of my request

Could you do a quick tutorial to reproduce/do a similar visual interface ? ie icon drawer + connect each icon to a list
Did you use a tutorial for the visual interface ? inspired yourself by a vue project ?

If you have ideas of similar visual interface i could use, not necessarily exactly the same; but an interface i could easily reproduce on my website. I tried to build my own website on react but it s too complicated, couldnt get a smooth interface like you even after a full weekend working on it.

usually i do data & business intelligence, not use to web dev sorry. thanks :)

Long version of my request :

For sure i need my own website/cloud fare, I am looking to launch the visual interface in vue, not the part where you gather data from Github, by visual interface i mean the system of the moving icon, each of them correspond to a list.

My idea is to link the icons to a small database with newspaper articles, youtube videos etc, to organize the useful content i find online. It s more for my personal usage than sharing it with people, i cant find a useful system to for example gather all interesting articles/documentary about Technology in China.

Every week i read newspaper, if i find something interesting about the topics i follow (china would be 1 icon on the visual interface, football another one etc), i would write the article name/date/newspaper in a google sheet database, connecting the visual interface to the database would allow me to easily track the articles i liked, organized by themes.

I wanna connect the visual interface to my small database & icon to use it as a small tool to visualize some info , with the principle of the vue interface
If its too complicated to explain, any advice to use the same interface with icon ? Should i just take the vue folder in your project ? Did you take the visual interface from another project or you built it yourself ?

EDIT : i am currently learning the basic of Kotlin, since i couldnt get a productive result with javascript to build a convenient website, from what i understand you use vue js for your interface , so i guess i could get a similiar interface working with either kotlin or js, am i right ?

[PabloLec]

Hi,

You could run the frontend easily, but I don't think that would be any help for you. Modifying my repo for your use would need a full rewrite.

If no existing solution fits your needs, you could indeed try to do something similar to StarryLines.
What might be relevant:

• The data table populates itself by querying my API with the current language to be shown:
  

  StarryLines/src/main/vue/src/components/DataTable.vue

  Lines 157 to 162 in 7bd20b3

  	async fetchData() {
  	this.loading = true;
  	const res = await fetch(
  	`https://starrylines.pablolec.dev/api/${this.language}_top`
  	);
  	const data = await res.json();

• This API is ran using Cloudflare edge functions. This is also in this repo, basically it matches any call to my Cloudflare subdomain with path starting with /api/ and query my MongoDB API to get results. See this file. Most of the code here is only for cache purpose, the logic can fit in a few LoC.

So, I guess you could run a Cloudflare edge function to query Google Sheet API if it exists, or similar.

Regarding the vue app, it's quite simple I didn't want to reinvent the wheel for my simple needs. So I used ready-to-use components, Swiper for the language slider and Vue3EasyDataTable for the table. I just had to add some tweaks to make it work as I wanted to, but mostly I just used basic config and Vue to glue it together.

[julian-passebecq]

Thanks so much for your answer Pablo, it helps a lot ! I ll do my best now to build my small app :) Regards