Aplicación React para explorar personajes de Rick and Morty que incluye:
- 🔍 Búsqueda de personajes por nombre
- ⭐ Sistema de favoritos persistente
- 📱 Diseño responsive con animaciones
- 📌 Panel lateral de favoritos interactivo
- 🔔 Notificaciones toast para feedback Visita mi aplicación
src/
│
├── components/
│ ├── Body.jsx # Componente principal del cuerpo
│ ├── Buscador.jsx # Lógica de búsqueda y formulario
│ ├── Cards.jsx # Tarjetas de personajes y favoritos
│ ├── Footer.jsx # Pie de página
│ ├── Menu.jsx # Barra de navegación responsive
│
├── context/
│ └── Funcionalidades.js # Contexto de favoritos
│
├── services/
│ └── api.js # Conexión con la API externa
│
│
├── assets/
│ └── logo.webp # Assets/imágenes
│
├── index.css # Estilos globales con Tailwind CSS y Bootstrap Icons
│
├── App.jsx # Componente raíz de la aplicación
└── main.jsx # Punto de entrada
App.jsxcarga el contexto de favoritos medianteFavProvider- Renderiza la estructura básica (
Menu + Cuerpo + Footer) - Implementa notificaciones con
react-toastify - Carga favoritos desde
localStorage
const Captura = async (e) => {
e.preventDefault();
setRespuesta([]);
setError(null);
setCarga(true);
const data = await API(parametros, resultados);
if (data) {
setRespuesta(data);
} else {
setError("No se encontraron personajes");
}
setCarga(false);
}; const toggleFavorito = (character) => {
setFavoritos((prev) => {
const existe = prev.some((personaje) => personaje.id === character.id);
if (existe) {
toast.error(`${character.name} eliminado de favoritos!`);
return prev.filter((personaje) => personaje.id !== character.id);
} else {
toast.success(`${character.name} agregado a favoritos!`);
return [...prev, character];
}
});
};- Implementa
FavProviderpara manejar el estado global de favoritos - Carga
Menu,CuerpoyFooter - Agrega
ToastContainerpara feedback visual
Muestra grid de personajes con:
- ✅ Panel lateral de favoritos
- 🎞️ Animaciones con Framer Motion
- 🖱️ Detección de clicks fuera del panel
- 📜 Lista interactiva con eliminación de personajes
- 🔄 Sincronización en tiempo real con
localStorage
Navbar responsive con:
- 🍔 Menú hamburguesa para móviles
- 🎭 Transiciones animadas
- 🏠 Logo clickeable
export const API = async (parametros, limite) => {
try {
const res = await fetch(
`https://rickandmortyapi.com/api/character/?name=${encodeURIComponent(parametros)}`
);
const result = await res.json();
return result.results.slice(0, limite);
} catch (err) {
console.error("Error en la API:", err);
return null;
}
};Los favoritos se guardan en localStorage utilizando:
useEffect(() => {
localStorage.setItem("favoritos", JSON.stringify(favoritos));
}, [favoritos]);| Sección | Características |
|---|---|
| Buscador | Campo de texto + selector de cantidad + botón con icono |
| Tarjetas | Imagen, nombre, estado, especie + botón favorito animado |
| Panel Favoritos | Despliegue lateral con lista, contador y botones de eliminación |
| Responsive | Menú colapsable, rejilla adaptable, tamaños proporcionales |
npm installnpm run devhttp://localhost:5173
| Paquete | Uso |
|---|---|
| react | Biblioteca base |
| react-dom | Renderizado de componentes |
| framer-motion | Animaciones y gestos |
| react-toastify | Notificaciones emergentes |
| bootstrap-icons | Iconos visuales |
| tailwindcss | Estilizado de la interfaz |
- 📱 Optimizado para móviles (touch events)
- 🎨 Efectos de hover/click en los elementos interactivos
- 📝 Código documentado con comentarios explicativos