DEV Community: Adriana

Educational Development Program: Build Apps with Google AI Studio

Adriana — Wed, 04 Mar 2026 21:53:14 +0000

This post is my entry for the Educational Development Program: Build Apps with Google AI Studio.

What I Developed

I developed MockupGen, an app that transforms amateur product photos into professional-looking mockups for e-commerce. For Shopify store managers or casual sellers looking to sell a product, it's difficult to achieve professional-looking photos without a photo studio.
MockupGen solves this problem: you upload a product photo taken with your phone, select a background style (white studio, lifestyle scene, outdoor, desktop, or gradient), and the app takes care of the rest. I used Gemini to analyze the uploaded image and generate an optimized product description. Then, Image's background swap editing tool replaced it with a professional background, keeping the product intact and transforming everything around it.

Key Instructions for Creating the Application:


Create an application called MockupGen that transforms amateur product photos into professional e-commerce mockups. The user uploads a product photo and selects a background style from options such as: pristine white studio, lifestyle kitchen scene, outdoor natural environment, minimalist desktop, or gradient background. Use Gemini to analyze the uploaded image and generate an optimized product description. Then, use the background swap feature to replace the product photo's background with the selected professional setting. Display the original and transformed images side-by-side, with a download button for the result and a "Try Another Style" button to regenerate with a different background. The user interface should be clean, modern, and in dark mode.

Relevant Aspects

After the initial generation, I iterated on the interface to add more background styles. During iteration, I realized that it didn't accurately reflect the product's proportions.

To correct this, I applied this solution:


I need to correct the product fidelity in the mockup results. Please make these changes:

1. Automatically detect and preserve the aspect ratio of the original image for the output.

2. When calling the Image API to swap the background, add explicit instructions to the message to preserve the exact colors, proportions, shape, and details of the original product. The product should look identical to the original; only the background should change.

3. Add a note to the message sent to Image: "Do not modify, recolor, reshape, or alter the product in any way. Only replace the surrounding background."

4. Before generating, use Gemini to describe the product in detail (exact colors, materials, dimensions, and distinctive features) and include that description in the Image message as a constraint to maintain product accuracy.

But it didn't work; the result remained the same. The solution was to switch to native Gemini for image generation. Gemini 3 Flash has image editing capabilities (Nano Banana) that accepts reference images and tends to better preserve the original.


Switch from Imagen background swap to using Gemini's native image 
editing. Send the uploaded product photo as a reference image to 
Gemini with a prompt like: "Take this exact product [1] and place 
it in a [selected background style]. Keep the product exactly as 
it appears in the reference image — same colors, same proportions, 
same details. Only change the background environment. The product 
should look photorealistic and properly scaled in the new setting."

It´s a huge difference:

Demo

👉 Live MockupGen Test

My Experience

The most valuable aspect of this program was understanding how to easily chain multiple AI models together. Getting them to work together taught me a lot about instruction engineering at every stage of the creation process.
What surprised me most was the importance of the initial instruction when using the creation function and how to address functions that don't return a good result. By specifying the user flow (load, select style, transform, compare in parallel), the result was much better. This reinforced something we see everywhere and that is very important to understand: the quality of the instructions directly determines the quality of the results.
An interesting challenge I encountered was product fidelity. My first version used Image background swapping, but it constantly altered the product's colors and proportions. After iterating, I switched to Gemini's native image editing (Nano Banana) with reference images, which preserved the original product much more faithfully. This taught me that choosing the right model for each task is just as important as writing good prompts. Sometimes, the solution isn't better instructions, but a better tool.
A few months ago, I collaborated on the development of an e-commerce store, and I see great potential in tools like this. Product photography is one of the biggest hurdles for small retailers, and being able to prototype a solution like MockupGen in minutes with AI Studio is a glimpse into how we'll develop software in the future.

Thanks for the feedback! 🚀

Spinner con React + Typescript que cambia de tamaño al presionar un botón 🤓

Adriana — Tue, 08 Apr 2025 06:06:25 +0000

🔗(https://codesandbox.io/p/sandbox/hqj53h)

// LoaderSpinner.tsx
import "./loadingSpinner.css";
import { useState } from "react";

interface LoadingSpinnerProps {
  color?: "#380892" | "#b87106" | "green";
  size?: "small" | "medium" | "Large";
}

export default function LoadingSpinner({
  color = "#380892",
  size = "medium",
}: LoadingSpinnerProps) {
  const [currentSize, setCurrentSize] = useState<"small" | "medium" | "Large">(
    size
  );
  const [currentColor, setCurrentColor] = useState<
    "#380892" | "#b87106" | "#139b13"
  >(color);

  const toggleSizeAndColor = () => {
    setCurrentSize((prevSize) => {
      if (prevSize === "small") return "medium";
      if (prevSize === "medium") return "large";
      return "small";
    });

    setCurrentColor((prevColor) => {
      if (prevColor === "#380892") return "#b87106";
      if (prevColor === "#b87106") return "#139b13";
      return "#380892";
    });
  };

  return (
    <div className="container">
      <h1>React + Typescript</h1>
      <div className="container-spinner">
        <div
          className={`loading-spinner loading-spinner--${currentSize}`}
          style={{ borderTopColor: currentColor }}
        />
        <button onClick={toggleSizeAndColor}>scale</button>
      </div>
    </div>
  );
}

// loaderSpinner.css
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap");
.container {
  margin: 0;
  padding: 0;
  height: 100vh;
  background: rgb(52, 39, 91);
  background: radial-gradient(
    circle,
    rgba(52, 39, 91, 1) 10%,
    rgba(121, 114, 38, 1) 100%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
h1 {
  font-size: 50px;
  color: #0f0f0f;
}
.container-spinner {
  width: 200px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-top: 50px;
}
.loading-spinner {
  --loadig-spinner-size: 50px;

  width: var(--loadig-spinner-size);
  height: var(--loadig-spinner-size);
  border: calc(var(--loadig-spinner-size) / 5) solid rgb(94, 94, 94, 0.3);
  border-top-color: var(--loading-spinner-color, black);
  border-radius: 50%;
  box-sizing: border-box;
  animation: loading 0.75s ease-in-out infinite;
}
.loading-spinner--small {
  --loadig-spinner-size: 25px;
}
.loading-spinner--medium {
  --loadig-spinner-size: 50px;
}
.loading-spinner--large {
  --loadig-spinner-size: 75px;
}

@keyframes loading {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
button {
  background-color: transparent;
  border: none;
  color: #0f0f0f;
  opacity: 0.5;
  font-size: 20px;
  font-family: "Montserrat", sans-serif;
  font-weight: lighter;
  padding: 10px 50px;
  letter-spacing: 1px;
  border-radius: 14px;
  transition: all 0.2s ease;
}

button:hover {
  color: #ef77f3;
}

button:active {
  transform: scale(0.95);
}
button::after {
  content: "";
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.2s;
}

button:active::after {
  content: "👆🏻";
  opacity: 1;
  left: 60px;
}

button:focus {
  opacity: 0.5;
  outline: none;
}
footer {
  margin-top: 50px;
  font-family: "Montserrat", sans-serif;
}

🔗🔗(https://codesandbox.io/p/sandbox/hqj53h)🔗🔗

Redux vs. React Context en Vite: ¿Pizza o Tacos para tu estado global?

Adriana — Mon, 07 Apr 2025 03:05:49 +0000

¿Alguna vez has estado en un restaurante y no sabes si pedir pizza o tacos? Redux y React Context son eso mismo en el mundo de React: dos formas de manejar el estado de tu app, pero con sus propios sabores.

1. ¿Qué es React Context? (El "taco simple") 🌮

Imagina que tienes que pasar un plato de comida (tus datos) desde la cocina (componente padre) hasta el comensal (componente hijo). En lugar de gritar por toda la casa, usas React Context, que es como un mesero que lleva la información directo a donde la necesitas.

Cómo usarlo en Vite

Crea el contexto:

El contexto es un sistema para compartir datos entre componentes sin tener que pasarlos manualmente como props en cada nivel.

// ThemeContext.jsx
import { createContext, useState } from 'react';

export const TacoContext = createContext();

export function TacoProvider({ children }) {
  const [tacoType, setTacoType] = useState('pastor'); // estado inicial
  return (
    <TacoContext.Provider value={{ tacoType, setTacoType }}>
      {children}
    </TacoContext.Provider>
  );
}

Envuelve tu app (en main.jsx):

Esto sirve para que todos tus componentes puedan ver el contexto y acceder a sus datos.

import { TacoProvider } from './context/TacoContext';

ReactDOM.createRoot(document.getElementById('root')).render(
  <TacoProvider>
    <App />
  </TacoProvider>
);

Consume el contexto donde lo necesites:

import { useContext } from 'react';
import { TacoContext } from './context/TacoContext';

function Comensal() {
  const { tacoType, setTacoType } = useContext(TacoContext);
  return <h1>¡Quiero un taco de {tacoType}!</h1>;
}

Usa React Context para:

Pequeñas apps (como tu portfolio)

Implementar tema claro/oscuro

Cuando no quieres instalar dependencias adicionales

2. ¿Qué es Redux? (La "pizza familiar con 20 ingredientes") 🍕

Redux es como el sistema de pedidos de un gran restaurante: tiene cocineros (reducers), tickets de pedido (actions) y un lugar centralizado donde guardar todo (store). Es más complejo, pero escala mejor cuando tu app es enorme.

Para usarlo con Vite:

Instala Redux Toolkit:

La versión moderna y simplificada que reduce el código repetitivo de Redux puro:

npm install @reduxjs/toolkit react-redux

Crea un "slice":

Un slice es una porción del estado global + sus reglas de actualización.

// pizzaSlice.js
import { createSlice } from '@reduxjs/toolkit';

const pizzaSlice = createSlice({
  name: 'pizza',
  initialState: { flavor: 'pepperoni' },
  reducers: {
    changeFlavor: (state, action) => {
      state.flavor = action.payload;
    },
  },
});

export const { changeFlavor } = pizzaSlice.actions;
export default pizzaSlice.reducer;

Configura el store (en store.js):

import { configureStore } from '@reduxjs/toolkit';
import pizzaReducer from './pizzaSlice';

export const store = configureStore({
  reducer: {
    pizza: pizzaReducer,
  },
});

Envuelve tu app (en main.jsx):

import { Provider } from 'react-redux';
import { store } from './store';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

Usa Redux en tus componentes:

import { useSelector, useDispatch } from 'react-redux';
import { changeFlavor } from './pizzaSlice';

function Cliente() {
  const flavor = useSelector((state) => state.pizza.flavor);
  const dispatch = useDispatch();

  return (
    <button onClick={() => dispatch(changeFlavor('hawaiana'))}>
      Cambiar a pizza {flavor}
    </button>
  );
}

Conclusión: ¿Cuándo usar cada uno?

React Context es como un taco al pastor: rápido y sencillo.

Redux es la pizza familiar: más preparación, pero alimenta a todos.

¿Con cuál te quedas? ¡Déjame saber en los comentarios! 👇

From Messy Docs to Pro Documentation: How LaTeX Saved My Developer Sanity

Adriana — Wed, 02 Apr 2025 03:08:35 +0000

📝 The Documentation Wake-Up Call

Remember that moment when you realize your project's documentation has become:

A Frankenstein of Word, Google Docs, and random Markdown files?
Version-controlled through filenames like FINAL_v2_ACTUAL_FINAL.docx?
Impossible to maintain across team members?

I hit that wall hard last quarter. Here's how LaTeX became my documentation game-changer.

💻 Why LaTeX for Dev Docs?

% Example: This simple structure creates perfect code documentation
\documentclass{article}
\usepackage{listings}

\begin{document}
\section{API Endpoints}
\begin{lstlisting}[language=Python,caption={User Authentication}]
@app.route('/login', methods=['POST'])
def login():
    """Handles JWT token generation"""
    # Clean, version-controlled documentation
\end{lstlisting}
\end{document}

The Magic Happens When You...

Stop wrestling with formatting - LaTeX handles margins, numbering, and styles automatically

Version docs alongside code - .tex files live in your repo with your source code

Get automatic PDF/HTML outputs - Single source generates multiple formats

Maintain single-source truth - No more FINAL_v2_REALLY_FINAL.docx

Beginner-Friendly Starting Point

Use Overleaf (no setup needed)

💬 Discussion Time!
What's your documentation pain point?
"I hate maintaining docs across versions"
"My team won't document anything"
"I've found a better solution than LaTeX!"

👉 Drop your thoughts below! #DevDiscuss