Beri.Media

It’s Monday and I cannot decide where to put the login and register button on my landing page. Top right you’d say? Yes that’s the obvious choice and spoiler alert I will go for this. But I wanted to create a special menu. I took shadcns menubar and originally wanted it to be sticky at the top on desktop and sticky on the bottom on mobile to create an app-like feeling. But on mobile having this bar at the bottom and the other buttons at the top is super unintuitive. But I also did not want to add sign in and register to the bar at the bottom where the user might not find them. After my coding session in the morning, on the bike to the SBahn I decided to move the menubar to the top for all devices in line with Login & Register. the rest of the hero will stay ugly and I’ll focus on functionality first.

The rest of the week

Placing a login button on my landing page was the first task of throwing a frontend on top of the register, login, sign out, and account page functionality, which I all tick one by one this week. For the login I simply use the shadcn login building block. The account page is polished relatively easily by adding two shadcn input forms, an update button and a sign out button in the variant “outlined”.

And the week has a holiday

Which boosts my app tremendously. Where should I start? Maybe with the sidebar:

I discarded the menu bar mentioned above inside my app (after login) and decided to go for a sidebar like every nice documentation or web app has. Thanks to shadcn that was more or less simple. Just install the sidebar shadcn sidebar building block with

npx shadcn@latest add sidebar-01

and create a new payload global to manage the sidebar items from my CMS. Took me about 2-3 hours to implement this.

Then I was ready to add actual features. The first one needed was, that users can add comparisons. And here for the first time you might be able to guess what I am actually building. So comparisons… Imagine you want to buy a new backpack. You search through the web and find a few pages with packs you really like. But how to decide which one to pick? You start comparing them, but just by accidentally closing your browser you lose all your tabs and research progress and need to search through your browsing history to find the pages with the information again. Others create large table sheets to compare their products or favoritize urls in browser tab groups. I would be really interested in how you make buying decisions online. Anyways. Wouldn’t it be awesome if you could just save all your comparisons at one place and add products to them as you like? I build this that week. Logged in users can now create comparisons, rename them and add product urls to those comparisons. This took me about 2 days, but I am really hyped about Supabase & GitHub Copilot. With these two tools I managed to learned creating routes in a few hours, building a database structure & making calls to it. On top implementing RLS (Row Level Security) into my database.

But I have to be careful

If it flows like this and I have that much free time like at the end of the week including two train rides I tend to code my brain out. I get hyper focused which costs a lot of energy and in the evening I cannot even look at a screen anymore. I mean, I can look at it but I cannot read anything nor process what is written on it. Finding balance on days like this is hard to me.

Creating a webscraper:

Did I find the balance in the next days? 50:50. I was at the east sea of germany in a lovely house. Every family member just chilled and did their thing wiht occasional coffees, going outside and good dinners. Doing my own thing for me means coding. So I wanted to implement the webscraper functionality triggered by a user adding a product via submitting an url. I dove really deep into it, coded my brain out again and I learned a lot across these three days. BUT I did not manage to run the webscraper in production. I tried for 3 days to make puppeteer & chromium work. Trying with firefox, installing browsers on my server. older versions. everything. Which meant more training the patience muscle, balancing deep focus & family time and trusting the process. Spoiler alert! Next week I'll make it work and tell you how.

See you next week! ✌🏽

Disclaimer: This blog is not AI polished. Not even corrected with ChatGPT. Raw from my techie brain trying to be artsy.