Meme Generator es una aplicación web de una sola página (SPA) desarrollada en React que permite a los usuarios crear memes personalizados de manera sencilla e interactiva. La aplicación extrae imágenes de memes de la API de Imgflip, permitiendo a los usuarios seleccionar una imagen aleatoria y agregar texto superior e inferior para generar su propio meme.
- 🎲 Selección Aleatoria de Imágenes: Accede a una amplia biblioteca de memes desde la API de Imgflip.
- ✏️ Edición de Texto: Agrega texto superior e inferior con estilos impactantes (fuente Impact, sombras, mayúsculas).
- 🔄 Interfaz Reactiva: Actualización en tiempo real del meme a medida que editas el texto.
- 📱 Responsive Design: Optimizado para dispositivos móviles y de escritorio.
- ⚡ Rendimiento Rápido: Construido con Vite para un desarrollo y carga eficientes.
- 🎨 Estilos Personalizados: Diseño moderno con gradientes y efectos visuales atractivos.
Vista previa de la aplicación en funcionamiento, mostrando un meme generado con texto personalizado.
Para una demo en vivo, ejecuta la aplicación localmente o visita la demo en vivo.
| Tecnología | Versión | Propósito |
|---|---|---|
 |
19.1.1 | Biblioteca para construir interfaces de usuario |
 |
19.1.1 | Renderizado de React en el DOM |
 |
7.1.7 | Herramienta de construcción rápida para desarrollo web |
 |
9.36.0 | Linting para mantener código limpio |
 |
3 | Estilos personalizados con flexbox y grid |
- Node.js (versión 16 o superior)
- npm o yarn
# Clona el repositorio
git clone https://github.com/Seb-RM/React_Side_Effects-Meme-Generator.git
cd React_Side_Effects-Meme-Generator
# Instala las dependencias
npm install
# Inicia el servidor de desarrollo
npm run devNo se requieren variables de entorno adicionales. La aplicación utiliza la API pública de Imgflip, que no necesita autenticación.
# Construye la aplicación
npm run build
# Previsualiza la build
npm run preview-
Accede a la aplicación: Abre
http://localhost:XXXXen tu navegador después de ejecutarnpm run dev. -
Edita el texto:
- Ingresa texto en los campos "Top Text" y "Bottom Text".
- El meme se actualiza automáticamente.
-
Cambia la imagen:
- Haz clic en "Get a new meme image 🖼" para seleccionar una imagen aleatoria de la API.
-
Personaliza: Experimenta con diferentes combinaciones de texto e imágenes.
// El estado del meme se maneja en Main.jsx
const [meme, setMeme] = useState({
topText: "One does not simply",
bottomText: "Walk into Mordor",
imageUrl: "http://i.imgflip.com/1bij.jpg",
});-
Propósito: Archivo HTML principal que sirve como punto de entrada para la aplicación React. Define la estructura básica del documento y carga el script de React.
-
Conceptos Clave: Estructura HTML5, meta tags para responsividad, carga de módulos ES6.
-
Fragmentos Destacados:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Meme Generator</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html>
-
Flujo de Datos: El
div#rootes el contenedor donde React monta la aplicación. El script cargamain.jsx, que inicia el renderizado. -
API/DOM: Utiliza el DOM estándar para el punto de montaje; no interactúa directamente con APIs externas.
-
Propósito: Punto de entrada de la aplicación React. Configura el renderizado raíz y importa estilos globales.
-
Conceptos Clave: React 18's createRoot API, importación de módulos ES6, integración con CSS.
-
Fragmentos Destacados:
import { createRoot } from 'react-dom/client' import './index.css' import App from './App.jsx' createRoot(document.getElementById('root')).render( <App /> )
-
Flujo de Datos: Renderiza el componente
Appen el DOM. No maneja estado; delega a componentes hijos. -
API/DOM: Utiliza
document.getElementByIdpara acceder al DOM ycreateRootpara el renderizado concurrente de React.
-
Propósito: Componente raíz de la aplicación. Estructura la disposición general importando Header y Main.
-
Conceptos Clave: Composición de componentes en React, exportación por defecto.
-
Fragmentos Destacados:
import Header from "./components/Header"; import Main from "./components/Main"; function App() { return ( <> <Header /> <Main /> </> ); } export default App;
-
Flujo de Datos: Renderiza Header y Main como hijos directos. No maneja estado propio.
-
API/DOM: No interactúa directamente; delega a componentes hijos.
-
Propósito: Componente de encabezado que muestra el logo y título de la aplicación.
-
Conceptos Clave: Importación de imágenes estáticas, JSX para renderizado.
-
Fragmentos Destacados:
import trollFace from "../assets/images/troll-face.png"; export default function Header() { return ( <header className="header"> <img src={trollFace} /> <h1>Meme Generator</h1> </header> ); }
-
Flujo de Datos: Estático; no recibe props ni maneja estado.
-
API/DOM: Renderiza elementos HTML con clases CSS para estilización.
-
Propósito: Componente principal que maneja la lógica de generación de memes, incluyendo fetch de API y manejo de estado.
-
Conceptos Clave: Hooks de React (useState, useEffect), manejo de eventos, fetch API, actualización de estado.
-
Fragmentos Destacados:
useEffect(() => { fetch("https://api.imgflip.com/get_memes") .then((res) => res.json()) .then((data) => setAllMemes(data.data.memes)); }, []); function getMemeImage() { const randomNumber = Math.floor(Math.random() * allMemes.length); const newMemeUrl = allMemes[randomNumber].url; setMeme((prevMeme) => ({ ...prevMeme, imageUrl: newMemeUrl, })); } function handleChange(event) { const { value, name } = event.currentTarget; setMeme((prevMeme) => ({ ...prevMeme, [name]: value, })); }
-
Flujo de Datos:
useEffectejecuta fetch al montar el componente, poblandoallMemes.handleChangeactualiza el estado del meme en respuesta a inputs de usuario.getMemeImageselecciona una imagen aleatoria y actualiza el estado.- El estado
memese pasa a elementos JSX para renderizado dinámico.
-
API/DOM:
- Fetch API para obtener datos de Imgflip.
- Eventos onChange en inputs y onClick en botón para actualizar estado.
- Renderiza imagen y texto posicionados absolutamente sobre ella.
-
Propósito: Estilos globales para la aplicación, definiendo layout, tipografía y efectos visuales.
-
Conceptos Clave: CSS Grid, Flexbox, posicionamiento absoluto, gradientes, sombras de texto.
-
Fragmentos Destacados:
.form { display: grid; grid-template: auto auto / 1fr 1fr; gap: 17px; margin-bottom: 17px; } .meme span { position: absolute; text-align: center; font-family: impact, sans-serif; font-size: 2rem; text-transform: uppercase; color: white; text-shadow: 2px 2px 0 #000, ...; }
-
Flujo de Datos: Aplica estilos a elementos renderizados por componentes React.
-
API/DOM: Manipula el DOM a través de clases CSS; no interactúa con APIs.
La aplicación sigue una arquitectura de componentes simple y modular:
- App.jsx: Raíz que compone Header y Main.
- Header.jsx: Componente estático para branding.
- Main.jsx: Componente funcional con estado y efectos secundarios (side effects) usando
useEffectpara fetch inicial.
Flujo de Datos General:
- Montaje:
useEffecten Main.jsx fetch memes → almacena enallMemes. - Interacción: Usuario edita texto →
handleChangeactualiza estado. - Generación: Click en botón →
getMemeImageselecciona imagen aleatoria → actualizaimageUrl. - Renderizado: Estado se refleja en DOM con estilos CSS.
Patrones Implementados: Componentes funcionales con hooks, separación de concerns (estado en Main, estilos en CSS), fetch en useEffect para efectos secundarios.