i built a tiny mood based video picker so my lunch break doesnt disappear into scrolling

So, quick backstory.

I built this because my food kept getting cold.

Most days I’d sit down with lunch, open a video site “just to find one thing to watch”, and then somehow I’d spend 15–20 minutes just scrolling. No video, food already not warm anymore, and my break was kind of gone.

At some point I got annoyed enough that I opened my editor and started hacking.

I ended up with this:

👉 Break Picks – a tiny site with hand-picked videos for short breaks

https://break.baratheon.my.id/

No login, no feed, no “here’s 100 recommendations you didn’t ask for”.

Just:

• a small list of videos I actually watched
• grouped by mood
• meant for break time, not “it’s 2AM how did I get here” time

---

The idea

When I’m eating, I don’t really want to choose.

I just want one decent video that fits how I feel right now.

So I started tagging stuff like:

• 😌 Just want to chill
• 😂 Need a laugh
• 📚 Want to learn something
• 💭 In the mood for something deeper
• 🧭 Want to discover something new

Whenever I watched something good, I’d drop it into my list and give it a mood. Break Picks is basically just a UI on top of that habit.

Everything is curated manually. If I wouldn’t watch it during my own lunch break, I don’t add it. Simple rule.

---

How it works (from the user side)

The flow is intentionally stupidly simple:

1. You land on the site and it asks: “What’s your mood while you eat?”
2. You tap a mood chip (chill / fun / learn / deep / discovery)
3. It shows you a video for that mood
4. Don’t like it? Skip and see another one in the same mood

No account, no history page, no autoplay countdown that steals the rest of your evening.

Right now the list is pretty small and personal on purpose. I’d rather have ~40 decent things than 400 random links.

---

Tech stack (nothing wild)

I’m a web/mobile dev, so I just used stuff I already like.

Frontend

• React + TypeScript
• Vite
• Deployed as a static app behind Apache at break.baratheon.my.id

Backend

• Tiny Express server as an API
• Supabase (Postgres) to store:
  • videos
  • mood tags
  • some basic metadata

Rough flow for adding stuff:

• I watch something I like
• I add it into Supabase with a mood
• The frontend calls Express: GET /curated?mood=chill → returns a small list → pick one

So it’s still a “real” stack (React + Express + Supabase), but the product itself is intentionally small. No auth, no dashboard, none of that.

---

Localisation (EN + ID)

I’m from Indonesia, so I wanted the copy to feel okay in both English and Indonesian without sprinkling strings everywhere in JSX.

I ended up with a tiny translation object:

ts
type Locale = "en" | "id";

const MOOD_COPY: Record<Locale, {
  title: string;
  chill: string;
  fun: string;
  learn: string;
  deep: string;
  discovery: string;
}> = {
  en: {
    title: "What’s your mood while you eat?",
    chill: "😌 Just want to chill",
    fun: "😂 Need a laugh",
    learn: "📚 Want to learn something",
    deep: "💭 In the mood for something deeper",
    discovery: "🧭 Want to discover something new",
  },
  id: {
    title: "Lagi mood apa waktu makan?",
    chill: "😌 Lagi pengin santai",
    fun: "😂 Lagi butuh ketawa",
    learn: "📚 Lagi pengin belajar sesuatu",
    deep: "💭 Lagi pengin tontonan yang lebih dalem",
    discovery: "🧭 Jelajahi hal baru",
  },
};