NewPost.fyi

Main section
After details are added
Link has been generated
NewPost.fyi in action

Inspiration

Alotta times, friends or clients would love to update the link preview of their portfolios sites, blogs etc temporarily in response to a specific trend or in support of a cause. This usually involves updating the meta tags in the source code which can lead to some down time while the site gets rebuilt and deployed.

What it does

NewPost.fyi makes it super easy to generate a promo link for your portfolio with unique link preview text and imagery.

How we built it

To start off, I used Next.js for the frontend & backend along with a self hosted deployment of MinIO to store uploaded images.

I used the dynamic route feature of Next.js to automatically create and populate meta tags for each new link.

All of the data was stored in MinIO. I wanted to have as few dependencies as possible so I stored all relevant information required for the meta tags in the metadata of the uploaded image. That way I could pretty much use the object storage solution (MinIO) as a data store with the unique links as keys.

Challenges we ran into 😮‍💨😮‍💨

Sooooo many! I used this hackathon to learn about the new App Router Next.js updates and woooo, that was a task! It almost felt as if I was learning React all over again 😥 There were multiple bugs that lead me deeeeep into the depths of the Vercel issues page for workarounds. All of this was compounded by the fact that some features (Server Actions) were still experimental. There was a weird issue that kept randomly popping but I managed to push through it all.

I also experienced numerous challenges deploying MinIO and configuring it to work with NGINX. In no particular order:

NGINX server blocks for MinIO to allow generation of pre-authenticated download URLS
Setting the base url for MinIO
Using Server Actions to upload files.
Understanding the boundaries between Next.js' "use server" & "use client"
Misconfigured .env files
Understanding how to turn off body parser in Server Actions (turns out I couldn't 🤷‍♂️)
Handling all the changes to routing in App router vs Page router (what I'm used to)
Missing semi colons 🤯🤯🤯

Accomplishments that we're proud of

I'm super proud of pushing through and learning about App Router & MinIO. I've come to appreciate the new way of working with Next.js.

What we learned

I learned more about Routing in Next.js, specifically App routing vs Page routing. This lead me on a journey of discovering how things that seemed pretty perfect at first can change & improve based on the routing approach used.

I also learned about self hosting object storage and configuring it with a reverse proxy (MinIO)

Finally I learned more about debugging and how sometimes, you just have to persevere to the 127th link to get the answer you need 🤣