DEV Community: Cristina Rodriguez

Have you used GitHub Actions as a cron job yet? I didn’t need AI for this project—I needed something that runs without me remembering. One YAML file, one cron line, and my weekly “2-minute task” disappeared.

Cristina Rodriguez — Tue, 03 Feb 2026 20:20:46 +0000

Cristina Rodriguez

Feb 3

I Didn’t Need AI for This Project. I Needed a Cron Job (So I Used GitHub Actions)

#automation #devops #github #tutorial

Comments

3 min read

I Didn’t Need AI for This Project. I Needed a Cron Job (So I Used GitHub Actions)

Cristina Rodriguez — Tue, 03 Feb 2026 20:19:29 +0000

If you need something to run every week and you’re tired of being the scheduler…

Use GitHub Actions.

You’ll create one YAML file. Add a cron line. Push. Done.

No server. No “remember to run it.” Just automation.

✅ The Fix: a scheduled workflow (copy/paste)

Create this file in your repo:

.github/workflows/cron.yml

Paste this:

name: Weekly automation

on:
  schedule:
    # Every Monday at 09:00 UTC (cron runs in UTC)
    - cron: "0 9 * * 1"

  # Bonus: run it manually from the Actions tab
  workflow_dispatch:

jobs:
  run-task:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v4

      - name: Run a command
        run: |
          echo "Hello from a scheduled workflow 👋"
          # Replace this with your real script/command

That’s the core idea: cron triggers a workflow, the workflow runs your steps.

Apply it: run a real script (Node example)

I like keeping the logic outside YAML, so my workflow stays tiny.

Repo layout:

scripts/
  weekly-task.js
.github/
  workflows/
    cron.yml

Update the workflow:

name: Weekly automation

on:
  schedule:
    - cron: "0 9 * * 1"
  workflow_dispatch:

jobs:
  run-task:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: "20"

      - name: Install deps
        run: npm ci

      - name: Run script
        run: node scripts/weekly-task.js

Why this works

schedule runs on a timer (cron).
workflow_dispatch gives you a “Run workflow” button for testing.
The runner checks out your code and executes your commands in a clean environment.

Cron in 20 seconds (so you don’t surprise yourself)

Cron format:

minute hour day-of-month month day-of-week

Examples:

Daily at 09:00 UTC → 0 9 * * *
Mondays at 09:00 UTC → 0 9 * * 1
Every 15 minutes → */15 * * * *

One important detail: cron is UTC in GitHub Actions.

So if you care about “9am my time,” you’ll need to convert it (and DST will mess with you a little). My solution: choose a time where an hour shift won’t ruin your life.

Tiny but important: secrets don’t go in YAML

Even if your script is simple today, it’ll eventually call something.

Don’t hardcode tokens. Use repo secrets:

Repo → Settings → Secrets and variables → Actions
Add API_TOKEN

Then:

      - name: Run script
        env:
          API_TOKEN: ${{ secrets.API_TOKEN }}
        run: node scripts/weekly-task.js

Make failures obvious (future-you will thank you)

Silent failures are the worst kind of “automation.”

This tiny pattern helps:

      - name: Run and fail loudly
        run: |
          set -e
          node scripts/weekly-task.js
          echo "✅ Job finished"

If it errors, the workflow run turns red and you’ll see it in the Actions tab.

Now the story (because yes, this is why I did it)

I love AI tools.

I really do.

But this time the project didn’t need intelligence. It needed consistency.

I had this tiny task that took maybe 2–5 minutes. Nothing dramatic. Just repetitive. The kind of thing you can totally do manually…

…until you forget once.

Then twice.

Then it becomes that background guilt you carry around like a cursed keychain.

I almost did the classic moves:

“I’ll set a reminder” (lol)
“I’ll run cron locally” (also valid, but now my laptop is part of production?)

What I wanted was: no server, no extra service, no babysitting.

So I did the boring thing that works: a scheduled GitHub Action.

And it’s honestly the best kind of automation: the kind you forget exists because it just keeps showing up on time.

Wrap-up

If you only take a few things from this:

Create .github/workflows/cron.yml
Use on.schedule.cron for the timer
Add workflow_dispatch so you can test manually
Keep logic in a script, keep YAML simple
Put tokens in secrets, not in the file

Have you used GitHub Actions for cron stuff yet—and what’s the first “2-minute task” you’d love to delete from your life?

I always thought making videos meant fighting a timeline UI. Turns out you can build an MP4 with React components using Remotion — scenes are components, timing is , and animations are just useCurrentFrame() + math.

Cristina Rodriguez — Thu, 22 Jan 2026 06:09:03 +0000

Cristina Rodriguez

Jan 22

Videos in React?! Yep. Each scene is a component (and it costs $0)

#webdev #react #programming #ai

Comments

5 min read

Videos in React?! Yep. Each scene is a component (and it costs $0)

Cristina Rodriguez — Thu, 22 Jan 2026 06:07:57 +0000

I used to think “making a video” meant one of two things:

Open a heavyweight editor
Drag tiny clips around a timeline until your soul leaves your body

I’m a developer. I like code. I like components. I like being able to undo mistakes without having to negotiate with a mysterious UI panel from 2002.

So when I heard there’s a tool called Remotion that lets you create videos using React components, my first thought was:

“Sure. And my CSS is also perfectly centered.”

Then I tried it.

And the moment it really clicked wasn’t even the rendering part…

It was running the project like a normal React app.

The idea that makes it click

Remotion works because a video is just:

A bunch of frames
Rendered in sequence
At a fixed fps (frames per second)

If your video is 30fps, then:

frame 30 = 1 second
frame 900 = 30 seconds

And here’s the fun part:

Every frame is just React rendering your component (with a different “current frame” number).

So animation becomes… math.

No timeline. No keyframes. Just interpolate() and spring().

“NO COST!!!” (but let’s be precise)

This post is about building and rendering locally on your machine — no SaaS subscriptions, no hosted rendering costs, no paid editor required.

(If you’re using Remotion in a larger company context, double-check licensing. For a personal project / small setup like this, you can build and render locally for free.)

Create the project

Remotion has a starter generator:

npx create-video@latest

It creates a project that looks suspiciously like any other React project.

Like:

picasyfijas-video/
├── public/
│   └── icon-512.png          ← Your logo
├── src/
│   ├── Root.tsx              ← Registers the composition (dimensions, fps, duration)
│   ├── PicasFijasVideo.tsx   ← Main video with all scenes
│   ├── Composition.tsx       ← Original template (unused)
│   ├── index.ts              ← Entry point
│   └── index.css             ← Styles
└── out/
    └── picasyfijas.mp4       ← Rendered video

At this point, you’re thinking: “Okay. Cute structure. But where’s the ‘video’ part?”

This is where the brain-melt happens.

The moment it clicked: `npm run dev` 🤯

I did the most “React developer” thing possible:

npm run dev

And… it just ran like any React project.

The dev server started, I opened the URL, and suddenly I’m staring at a video timeline in my browser.

Scrub the playhead → frames update.

Components appear and disappear.

Animations play.

It’s all live.

And my brain goes:

“Hold up. I’m not editing a video… I’m rendering React.”

That’s the “ohhhhhh” moment.

Because once you realize the preview is just your components rendering over time, everything becomes familiar:

Want a new “scene”? Make a component.
Want it to appear later? Wrap it in a <Sequence from={...} />.
Want animation? Use useCurrentFrame() + math.

Same workflow. Same comfort.

But the output is a legit MP4.

Your “video settings” live in one place

Inside src/Root.tsx, you register a Composition.

This defines:

width / height
fps
durationInFrames

Here’s the vertical setup I used for a short social video:

<Composition
  id="PicasFijasVideo"
  component={PicasFijasVideo}
  durationInFrames={300}
  fps={30}
  width={1080}
  height={1920}
/>

That’s 10 seconds (300 frames at 30fps).

Want 30 seconds?

Same idea:

30 seconds * 30 fps = 900 frames

So:

durationInFrames={900}

That’s it. Your video is now 30 seconds long.

Scenes = components, and timing = `<Sequence />`

Your main video component (mine is PicasFijasVideo.tsx) is basically a timeline built with <Sequence />.

Each scene is a component. Each component gets a start frame and duration.

Example:

<Sequence from={0} durationInFrames={90}>
  <IntroScene />
</Sequence>

<Sequence from={90} durationInFrames={240}>
  <MainScene />
</Sequence>

One very nice detail:

Inside a <Sequence>, useCurrentFrame() starts at 0 again.

So each scene feels self-contained and easy to reason about.

The 10-second timeline I built (as a reference)

I created a 10-second vertical video (1080×1920, 9:16) for social media using Remotion.

Here’s the timeline:

Frames	Seconds	Scene	What Happens
0–30	0–1s	Logo	Logo springs in, title fades in
30–90	1–3s	GuessScene	Shows "????" and types guess "1456"
90–150	3–5s	BullExplanation	Highlights matching "1", shows "🐂 Bull/Fija"
150–210	5–7s	CowExplanation	Highlights "4" in wrong position, shows "🐄 Cow/Pica"
210–300	7–10s	CTA	Logo + "Play now!" + URL

For a 30-second video, you simply add more “beats” (more scenes) or stretch durations.

A simple 30-second structure that works for any topic:

Intro (2–3s)
5–7 beats (3–5s each)
CTA (3–5s)

Animation is just math (and two hooks)

Most scenes start like this:

const frame = useCurrentFrame();  // Current frame number (0, 1, 2... )
const { fps } = useVideoConfig(); // Frames per second (30)

useCurrentFrame() → tells you which frame is being rendered
useVideoConfig() → gives you fps, dimensions, etc.

Now you can animate anything.

Fade in with `interpolate()`

const contentOpacity = interpolate(frame, [0, 15], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

What it does:

Input: frames [0..15]
Output: opacity [0..1]
Result: fade in over 0.5 seconds (at 30fps)
clamp: prevents values below 0 or above 1

Bounce with `spring()`

const highlightScale = spring({
  frame: frame - 15,    // Start at frame 15
  fps,
  config: {
    damping: 12,        // Higher = less bounce
    stiffness: 100,     // Higher = snappier
  },
});

What it does:

Creates a natural bounce from 0 → 1
frame - 15 delays the animation start

Deep Dive: BullExplanation scene (a “real” example)

This scene highlights the matching digit and shows the “🐂 Bull / Fija” explanation.

1) Bilingual text toggle

const showSpanish = Math.floor(frame / 15) % 2 === 1 && frame > 45;

What it does:

Switches language every 15 frames (0.5 seconds)
Starts toggling after frame 45 (so the content is already visible)

2) Conditional styling for highlights

{secret.split("").map((digit, i) => (
  <span
    key={i}
    style={{
      color: i === 0 ? "#EBEBD3" : "#38618C",
      backgroundColor: i === 0 ? "#38618C" : "transparent",
      transform: i === 0 ? `scale(${highlightScale})` : "scale(1)",
      display: "inline-block",
      padding: "0 6px",
      borderRadius: 8,
    }}
  >
    {digit}
  </span>
))}

i === 0 highlights the first digit (the “bull”)
Highlighted digit gets inverted colors + bounce scale
Others stay normal

Key Remotion concepts (the cheat sheet)

Concept	What it does
`Composition`	Defines video dimensions, fps, duration
`Sequence`	Controls when a component appears/disappears on the timeline
`AbsoluteFill`	Full-screen container that fills the canvas
`useCurrentFrame()`	Gets current frame number
`interpolate()`	Maps frame numbers to any value (opacity, position, etc.)
`spring()`	Creates natural bounce animations
`Img` + `staticFile()`	Loads images from `public/`

Render to MP4

You can render from the UI… but the CLI is the “ship it” button.

Example:

npx remotion render src/index.ts PicasFijasVideo out/video.mp4

That command turns your React composition into a real MP4 file.

Demo + repo

Wrap-up

Let’s recap:

Videos are just React renders — one frame at a time.
Time = frames (30fps → 900 frames = 30 seconds).
Scenes = components, and <Sequence /> is your timeline.
Animations are mostly useCurrentFrame() + math (interpolate(), spring()).
Rendering is one command: npx remotion render … → MP4.
And the wildest part? You can literally start with npm run dev and preview it like… a normal React app. Still feels illegal.

Now I’m curious: what would you make first if “a video” was just a folder of components? A tutorial? A product promo? A meme? A “how to center a div” documentary?

PWAs are underrated. I skipped the $99 Apple fee and the $25 Google fee by adding two files to my vanilla JS game. Now it works offline and installs like a native app. Here's the code 👇

Cristina Rodriguez — Tue, 16 Dec 2025 19:51:15 +0000

Cristina Rodriguez

Dec 16 '25

Bulls & Cows Goes Offline — How I Turned My Game Into a PWA (and Skipped the $100 App Store Fee)

#javascript #webdev #pwa #beginners

Comments

2 min read

Bulls & Cows Goes Offline — How I Turned My Game Into a PWA (and Skipped the $100 App Store Fee)

Cristina Rodriguez — Tue, 16 Dec 2025 19:50:09 +0000

Remember my Bulls & Cows game? The one with no frameworks, no AI, just vanilla JS? Well, I made it installable. Like, "put it on your home screen and play offline" installable.

No App Store. No Google Play. No $99/year Apple Developer fee. No $25 Google registration. Just... a web app that acts like a native app.

And apparently, people like it? 1.3K unique players, 1.4K sessions, and 1.8K pageviews — with people spending almost 2 minutes per visit just thinking through a logic puzzle. That's enough traction that I gave it its own home.

🎮 Play it: picasyfijas.com

✨ What's a PWA, Really?

A Progressive Web App is just a regular website with two extra files that tell the browser: "Hey, I can work offline. Let me live on the home screen."

That's it. Two files. Let me show you.

1️⃣ The Manifest (Your App's ID Card)

{
  "name": "Bulls & Cows - Picas y Fijas",
  "short_name": "Bulls & Cows",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#EBEBD3",
  "theme_color": "#4281A4",
  "icons": [
    { "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

This tells the browser what to call your app, what icon to use, and that standalone means "hide the browser chrome and look like a real app."

Link it in your HTML:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

2️⃣ The Service Worker (Your Offline Brain)

const CACHE_NAME = 'Bulls-and-Cows-v4';
const FILES_TO_CACHE = [
  '/', '/index.html', '/styles.css', '/script.js',
  '/manifest.json', '/icon-192.png', '/icon-512.png'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(FILES_TO_CACHE))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => response || fetch(event.request))
  );
});

That's the entire service worker. It caches your files on install, then serves them from cache when offline. No npm packages. No build step.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js');
}

3️⃣ The Install Prompt

Browsers show an install button automatically, but I added my own banner because I wanted control over the UX:

let deferredPrompt = null;

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  deferredPrompt = e;
  document.getElementById('install-banner').style.display = 'flex';
});

document.getElementById('install-btn').addEventListener('click', () => {
  deferredPrompt.prompt();
});

💰 Why Not the App Stores?

Apple charges $99/year. Google charges $25 once. Both require review processes, screenshots, privacy policies, and jumping through hoops.

My game collects zero data. No accounts. No ads. Just privacy-friendly Plausible for basic stats. It's literally just a logic puzzle.

PWAs let me skip all of that. Users get an installable app. I keep my $124. Everyone wins.

🎯 The Result

✅ Works offline
✅ Installable on Android, iOS, and desktop
✅ No app store fees
✅ Updates instantly (no waiting for review)
✅ Still just HTML, CSS, and vanilla JS

Total new code: ~50 lines.

👉 Play it: picasyfijas.com

👉 Source: github.com/Yosolita1978/bullsandcows

Have you turned a side project into a PWA? I'd love to hear about it 👇

Ever had your API calls fire way too often in a Next.js app? 😅 I wrote about how a simple useDebounce hook can smooth things out, boost performance, and keep your UI calm. Read more 👇

Cristina Rodriguez — Tue, 25 Nov 2025 20:01:43 +0000

Cristina Rodriguez

Nov 25 '25

Why I Built a useDebounce Custom Hook in Next.js (and Why You Should Too)

#reactjsdevelopment #webdev #react #programming

Comments 1

3 min read

Why I Built a useDebounce Custom Hook in Next.js (and Why You Should Too)

Cristina Rodriguez — Tue, 25 Nov 2025 19:59:13 +0000

If you've ever wired up a search bar in Next.js, you’ve probably hit this problem: every keystroke fires a new API call, triggers a re-render, or runs an expensive calculation. As your app grows, those “harmless little updates” start stacking up—fast.

I’ve been there. I remember watching my terminal fill with logs like a slot machine every time I typed a word. And because I was calling an API, sometimes I even hit rate limits just by typing too quickly.

That’s when I realized: I didn’t need results instantly. I needed results after the user paused typing.

That’s exactly what debouncing solves—and why building a small, reusable useDebounce hook changed the flow of my whole project.

🚨 The Problem: Too Many Updates

React is responsive—which is great—until it isn’t.

Common places this becomes a problem:

Search bars that fire API calls on every letter
Window resize listeners
Live form validation
Text fields tied to heavy filtering logic

The consequences:

Wasted API calls (and money)
Janky UI performance
Constant re-renders
Hitting provider rate limits
Sluggish, frustrating user experience

Here’s a simple example of the problem:

useEffect(() => {
  fetch(`/api/search?q=${query}`);
}, [query]);

If a user types “nextjs,” this runs 6 separate times:

n → ne → nex → next → nextj → nextjs

Your server cries.
Your UI stutters.
You quietly wonder if you picked the wrong career.

😅 Naive Solutions (And Why They Fail)

❌ 1. “Let me just add a timeout…”

This is the classic first attempt:

setTimeout(() => {
  fetch(...)
}, 300);

It seems fine… until you realize:

You never cancelled the previous timeout
Race conditions appear
Multiple calls still fire, just delayed
Your component becomes a messy spaghetti bowl

❌ 2. “I’ll track the last value manually”

Trust me: you can do this. You shouldn’t do this.

It leads to bugs, stale values, and callback nightmares.

Debouncing deserves its own tidy, reusable hook.

✅ Enter `useDebounce`: The Custom Hook That Fixes Everything

Debouncing means:

“Only run this action after the value has stopped changing for X milliseconds.”

That tiny delay (300ms, for example) is enough to:

Prevent API spamming
Smooth out re-renders
Improve UX
Save money and bandwidth
Make your search bar feel intentional instead of chaotic

This is exactly the kind of logic that belongs inside a Custom Hook.

🧩 How `useDebounce` Works (with Clear Code + Comments)

Here’s the entire hook, ready to drop into your project:

import { useState, useEffect } from "react";

/**
 * useDebounce — delays updating a value until
 * `delay` milliseconds have passed without changes.
 */
export function useDebounce<T>(value: T, delay = 300) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    // Start a timer that updates debouncedValue when delay elapses
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    // Cancel the timer if value changes before delay ends
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

Why this works:

The timer resets on every keystroke
The update only happens after the pause
Cleanup prevents race conditions
The hook is fully reusable across components

🔍 Using `useDebounce` in a Next.js Component

Let’s apply it to a real-world search bar.

"use client";

import { useState, useEffect } from "react";
import { useDebounce } from "@/hooks/useDebounce";

export default function SearchBar() {
  const [query, setQuery] = useState("");

  // Debounce raw user input by 300ms
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (!debouncedQuery) return;

    async function search() {
      const res = await fetch(`/api/search?q=${debouncedQuery}`);
      const data = await res.json();
      console.log("Results:", data);
    }

    search();
  }, [debouncedQuery]);

  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search..."
      className="border p-2"
    />
  );
}

What’s happening behind the scenes?

query updates instantly → keeps the UI responsive
debouncedQuery updates after 300ms → triggers one clean API call
No API spam
No jittery UI

🌟 Benefits of Using `useDebounce`

1. Better Performance

No more re-render storms.

2. Fewer API Calls

Your backend (and your wallet) will thank you.

3. Smoother UX

Search results feel stable and intentional.

4. Cleaner Code

Centralized, reusable logic.

5. Reusable Everywhere

Use it for:

Search bars
Form validation
Filtering tables
Window resize
Drag events
Autosaving

🧭 Conclusion

Debouncing is one of those small optimizations that makes a huge difference.
The moment you wrap it in a custom React hook like useDebounce, your app becomes faster, smoother, and easier to maintain.

Once you use it in one component, you’ll find yourself adding it everywhere.

If you’ve built your own version—or used useDebounce in interesting ways—I’d love to hear about it. Drop your thoughts in the comments!

Happy coding! 🚀

🤓 Bringing back the old pen-and-paper logic game Bulls & Cows! No AI, no frameworks — just pure HTML, CSS & vanilla JS. Can you guess the secret number? 💭 👉 https://bulls.yosola.co/ #javascript #webdev #gamedev #nostalgia

Cristina Rodriguez — Wed, 15 Oct 2025 01:15:45 +0000

Cristina Rodriguez

Oct 15 '25

Bulls & Cows — Bringing a Pen-and-Paper Classic to the Browser (No AI, No Frameworks, Just JS)

#javascript #webdev #gamedev #programming

Comments

2 min read

Picas y Fijas - Bulls & Cows | Free Online Number Guessing Game

Guess the secret 4-digit number in 10 attempts. Play free online in English or Spanish!

bulls.yosola.co

Bulls & Cows — Bringing a Pen-and-Paper Classic to the Browser (No AI, No Frameworks, Just JS)

Cristina Rodriguez — Wed, 15 Oct 2025 01:14:21 +0000

Lately, I’ve been feeling nostalgic 🤓.

When I was a kid, I used to play a pen-and-paper logic game called Picas y Fijas (also known as Bulls and Cows). So, I decided to build my own digital version — no AI, no frameworks, just pure HTML, CSS, and vanilla JavaScript.

🎮 Try it here: bulls.yosola.co
💻 Source code: github.com/Yosolita1978/bullsandcows

It’s a quick game (around 3 minutes per round), bilingual (English/Spanish), and requires no registration. Just open it and start guessing!

✨ How It Works (and Why It’s So Simple)

The entire game runs on basic JavaScript — no frameworks, no libraries, and no AI logic under the hood.
It’s the kind of code you can actually read, understand, and modify in one sitting.

Here are the main functions that power the logic 👇

1️⃣ Generating the Secret Number

function generateSecretNumber() {
  const digits = [];
  while (digits.length < 4) {
    const randomDigit = Math.floor(Math.random() * 10).toString();
    if (!digits.includes(randomDigit)) digits.push(randomDigit);
  }
  return digits.join('');
}

Creates a 4-digit number with no repeated digits.
Simple Math.random() and array checking — no fancy imports.

2️⃣ Comparing the Guess

function getBullsAndCows(secret, guess) {
  let bulls = 0, cows = 0;
  for (let i = 0; i < secret.length; i++) {
    if (guess[i] === secret[i]) bulls++;
    else if (secret.includes(guess[i])) cows++;
  }
  return { bulls, cows };
}

Checks exact matches (bulls) and misplaced matches (cows).
Uses a classic double-loop logic that every coder has probably written once in their life.

3️⃣ Updating the UI

function updateResult(guess, bulls, cows) {
  const row = document.createElement('tr');
  row.innerHTML = `
    <td>${guess}</td>
    <td>${bulls}</td>
    <td>${cows}</td>
  `;
  document.querySelector('#results tbody').appendChild(row);
}

Minimal DOM manipulation — just creating and appending rows to show your guesses.
Keeps the focus on logic, not on libraries.

🧬 Why I Built It This Way

With so many projects relying on AI and frameworks today, I wanted to build something that reminds us of the joy of pure logic and simplicity.
No dependencies, no build tools — just a small web app that works anywhere.

You can even view source, copy the code, and tweak it for your own version (like changing the number of digits or styling your own board).

🎯 Challenge for You

Try to guess the secret number in fewer than 7 attempts.
I’d love to hear how you did — comment your best score below 👇

👉 Play Bulls & Cows

🧩 Tech Summary

Feature	Details
Stack	HTML, CSS, Vanilla JS
Languages	English / Spanish toggle
Repo	Yosolita1978/bullsandcows
Gameplay	4-digit logic puzzle, “bulls” = right place, “cows” = right number wrong place

💬 Have you ever built a small nostalgic game just for fun?
I’d love to see your “no-framework” projects in the comments!

Building on LangChain, FAISS, and Next.js, I turned my mother‑in‑law’s Mexican recipes into SazónBot—a bilingual AI chef that scales dishes, offers substitutions, and even embeds cooking videos. Check out the journey!

Cristina Rodriguez — Sat, 04 Oct 2025 00:37:43 +0000

Cristina Rodriguez

Oct 4 '25

Building SazónBot: A Journey from Family Recipes to AI Chatbot

#nextjs #ai #agentai #opensource

Comments 1

3 min read

Building SazónBot: A Journey from Family Recipes to AI Chatbot

Cristina Rodriguez — Sat, 04 Oct 2025 00:35:08 +0000

I was sitting at my kitchen table, squinting at a Word document full of my mother‑in‑law’s recipes on my phone. Everything was there: pozole, chilaquiles, mole—but the file was cumbersome, the formatting inconsistent, and there was no extra context. I couldn’t ask it how to scale a recipe or swap an ingredient. That frustration sparked an idea: what if anyone could talk to this archive? What if I could share the warmth of my Mexican in‑laws’ kitchen with the world?

That spark became SazónBot, a bilingual AI chatbot I built to honor the García family heritage that welcomed me while embracing modern technology. This is the story of how I, not Mexican myself but lucky enough to marry into a family that shares its culinary wisdom, wove together memory and machine to create a chef you can talk to.

From Digital Files to Rich Data

It all began with a simple question: how could I transform a set of clunky Word documents into something living and useful without losing their soul? The answer lay in blending tradition with technology. Using Python and FastAPI, I developed a backend that can parse and host data extracted from digital recipes. I built a vector store with FAISS, enabling semantic search so you can ask “¿Cómo hago enchiladas?” and get a nuanced answer.

But feeding the bot isn’t enough—I needed it to be safe and reliable. I wrote custom tools in LangChain to handle recipe scaling, ingredient substitutions, and even web searches for cooking techniques. Along the way, I added a safety module to filter out harmful prompts and session memory to make conversations feel personal.

Teaching a Bot to Speak Two Languages

One of the biggest challenges was giving the bot a bilingual voice. In my adopted community, we often switch between English and Spanish, so SazónBot had to do the same. By integrating OpenAI GPT-4o-mini and building a multilingual vector store, I achieved fluid code‑switching. You can start in Spanish—“¿Cómo preparo tacos al pastor?”—and seamlessly transition to English. This wasn’t just a feature; it was a promise that everyone, regardless of language, could feel at home in SazónBot’s kitchen.

Bringing the Experience to Life

With the backend humming, it was time to create a beautiful front end. Using Next.js and Tailwind CSS, I built a responsive interface that feels like flipping through a recipe book. Embedded YouTube videos and images bring dishes to life, while an intelligent agent behind the scenes coordinates 11 tools—from scaling recipes to finding cooking videos.

Deploying the site on Vercel came with a trade‑off: the free tier means the first request may take a few seconds. But once the bot warms up, the experience is seamless. It even remembers your session so it can follow up on conversations: “¿Te gustó el mole? Would you like to scale it for six people?”

Overcoming Challenges and Making It Real

As with any passion project, I hit bumps along the road. Setting up the development environment required juggling multiple technologies: Node.js for the front end, Python for the back end, and environment variables for API keys. And like that tricky “Add to Calendar” button I sweated over in another project, each feature—be it recipe scaling or ingredient substitution—was its own mini‑challenge.

But with perseverance, I deployed a living, bilingual cookbook. The result? A chatbot that feels like chatting with your mother‑in‑law, powered by AI. I achieved my mission: bridging a heritage I married into with technology to bring authentic Mexican recipes to anyone with an internet connection.

So next time you’re craving chilaquiles or need a substitute for epazote, open SazónBot. You’ll find more than a recipe—you’ll find a piece of my extended family’s story.

Are you interested in the code? Visit my GitHub

DEV Community: Cristina Rodriguez

Have you used GitHub Actions as a cron job yet? I didn’t need AI for this project—I needed something that runs without me remembering. One YAML file, one cron line, and my weekly “2-minute task” disappeared.

I Didn’t Need AI for This Project. I Needed a Cron Job (So I Used GitHub Actions)

I Didn’t Need AI for This Project. I Needed a Cron Job (So I Used GitHub Actions)

✅ The Fix: a scheduled workflow (copy/paste)

Apply it: run a real script (Node example)

Why this works

Cron in 20 seconds (so you don’t surprise yourself)

Tiny but important: secrets don’t go in YAML

Make failures obvious (future-you will thank you)

Now the story (because yes, this is why I did it)

Wrap-up

I always thought making videos meant fighting a timeline UI. Turns out you can build an MP4 with React components using Remotion — scenes are components, timing is , and animations are just useCurrentFrame() + math.

Videos in React?! Yep. Each scene is a component (and it costs $0)

Videos in React?! Yep. Each scene is a component (and it costs $0)

The idea that makes it click

“NO COST!!!” (but let’s be precise)

Create the project

The moment it clicked: npm run dev 🤯

Your “video settings” live in one place

Want 30 seconds?

Scenes = components, and timing = <Sequence />

The 10-second timeline I built (as a reference)

Animation is just math (and two hooks)

Fade in with interpolate()

Bounce with spring()

Deep Dive: BullExplanation scene (a “real” example)

1) Bilingual text toggle

2) Conditional styling for highlights

Key Remotion concepts (the cheat sheet)

Render to MP4

Demo + repo

Wrap-up

PWAs are underrated. I skipped the $99 Apple fee and the $25 Google fee by adding two files to my vanilla JS game. Now it works offline and installs like a native app. Here's the code 👇

Bulls & Cows Goes Offline — How I Turned My Game Into a PWA (and Skipped the $100 App Store Fee)

Bulls & Cows Goes Offline — How I Turned My Game Into a PWA (and Skipped the $100 App Store Fee)

✨ What's a PWA, Really?

1️⃣ The Manifest (Your App's ID Card)

2️⃣ The Service Worker (Your Offline Brain)

3️⃣ The Install Prompt

💰 Why Not the App Stores?

🎯 The Result

Ever had your API calls fire way too often in a Next.js app? 😅 I wrote about how a simple useDebounce hook can smooth things out, boost performance, and keep your UI calm. Read more 👇

Why I Built a useDebounce Custom Hook in Next.js (and Why You Should Too)

Why I Built a useDebounce Custom Hook in Next.js (and Why You Should Too)

🚨 The Problem: Too Many Updates

Common places this becomes a problem:

The consequences:

😅 Naive Solutions (And Why They Fail)

❌ 1. “Let me just add a timeout…”

❌ 2. “I’ll track the last value manually”

✅ Enter useDebounce: The Custom Hook That Fixes Everything

🧩 How useDebounce Works (with Clear Code + Comments)

Why this works:

🔍 Using useDebounce in a Next.js Component

What’s happening behind the scenes?

🌟 Benefits of Using useDebounce

1. Better Performance

2. Fewer API Calls

3. Smoother UX

4. Cleaner Code

5. Reusable Everywhere

🧭 Conclusion

🤓 Bringing back the old pen-and-paper logic game Bulls & Cows! No AI, no frameworks — just pure HTML, CSS & vanilla JS. Can you guess the secret number? 💭 👉 https://bulls.yosola.co/ #javascript #webdev #gamedev #nostalgia

Bulls & Cows — Bringing a Pen-and-Paper Classic to the Browser (No AI, No Frameworks, Just JS)

Picas y Fijas - Bulls & Cows | Free Online Number Guessing Game

Bulls & Cows — Bringing a Pen-and-Paper Classic to the Browser (No AI, No Frameworks, Just JS)

✨ How It Works (and Why It’s So Simple)

1️⃣ Generating the Secret Number

2️⃣ Comparing the Guess

3️⃣ Updating the UI

🧬 Why I Built It This Way

🎯 Challenge for You

🧩 Tech Summary

Building on LangChain, FAISS, and Next.js, I turned my mother‑in‑law’s Mexican recipes into SazónBot—a bilingual AI chef that scales dishes, offers substitutions, and even embeds cooking videos. Check out the journey!

Building SazónBot: A Journey from Family Recipes to AI Chatbot

Building SazónBot: A Journey from Family Recipes to AI Chatbot

From Digital Files to Rich Data

Teaching a Bot to Speak Two Languages

Bringing the Experience to Life

The moment it clicked: `npm run dev` 🤯

Scenes = components, and timing = `<Sequence />`

Fade in with `interpolate()`

Bounce with `spring()`

✅ Enter `useDebounce`: The Custom Hook That Fixes Everything

🧩 How `useDebounce` Works (with Clear Code + Comments)

🔍 Using `useDebounce` in a Next.js Component

🌟 Benefits of Using `useDebounce`