Una aplicación web moderna para descubrir, guardar y compartir recetas criollas argentinas. Desarrollada con React, Vite, Firebase y optimizada para rendimiento.

• 🇦🇷 Toque argentino auténtico - Expresiones y términos criollos
• 🚀 Rendimiento optimizado - Lazy loading, memoización, virtualización
• 🔍 Búsqueda inteligente - Filtros por dificultad y búsqueda en tiempo real
• ❤️ Sistema de favoritos - Guarda tus recetas preferidas
• 🔐 Autenticación segura - Login con email/password y Google
• 📱 Diseño responsive - Funciona perfectamente en móviles
• 🎨 UI moderna - Interfaz elegante con animaciones suaves

• Frontend: React 18, Vite, Tailwind CSS, Framer Motion
• Backend: Firebase (Firestore, Authentication)
• Optimizaciones: Lazy loading, memoización, debounce
• Deployment: Vercel

git clone https://github.com/MatiasRocha92/recetas.git
cd recetas

npm install

Crea un archivo .env.local en la raíz del proyecto y agrega tus credenciales de Firebase:

# Crear archivo .env.local
touch .env.local

Luego agrega las siguientes variables:

VITE_FIREBASE_API_KEY=tu_api_key_aqui
VITE_FIREBASE_AUTH_DOMAIN=tu_proyecto.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=tu_proyecto_id
VITE_FIREBASE_STORAGE_BUCKET=tu_proyecto.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=123456789
VITE_FIREBASE_APP_ID=1:123456789:web:abcdef123456

npm run dev

VITE_FIREBASE_API_KEY=tu_api_key_aqui
VITE_FIREBASE_AUTH_DOMAIN=tu_proyecto.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=tu_proyecto_id
VITE_FIREBASE_STORAGE_BUCKET=tu_proyecto.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=123456789
VITE_FIREBASE_APP_ID=1:123456789:web:abcdef123456

1. Crea un proyecto en Firebase Console
2. Habilita Authentication y Firestore
3. Crea una app web y copia la configuración
4. Configura las reglas de Firestore para permitir lectura

• ⚡ Lazy loading de componentes
• 🔄 Memoización con React.memo, useMemo, useCallback
• 🖼️ Optimización de imágenes con lazy loading
• 🔍 Debounce en búsquedas (300ms)
• 📦 Chunking manual de librerías
• 🗜️ Compresión con Terser

• 😊 Tono amigable
• 🎭 Personalidad única de la aplicación
• 🌟 Navegación fluida y responsive

• Tiempo de carga inicial: ~1-2s (vs 3-5s anterior)
• Tamaño del bundle: ~226kB gzipped (vs 2-3MB anterior)
• Re-renders: Minimizados con memoización
• Experiencia móvil: Optimizada y fluida

Presiona Ctrl + Shift + D en cualquier página para ver:

• Estado de las variables de entorno
• Información del navegador
• Configuración de Firebase

Revisa la consola del navegador para:

• ✅ Mensajes de éxito de Firebase
• ❌ Errores de configuración
• ⚠️ Advertencias sobre variables faltantes

Consulta la Guía de Despliegue en Vercel para instrucciones detalladas.

1. Conecta tu repositorio a Vercel
2. Configura las variables de entorno en Vercel Dashboard
3. Agrega tu dominio a Firebase Auth
4. ¡Listo! Tu app se desplegará automáticamente

• Verifica que las variables de entorno estén configuradas
• Usa el componente de debug (Ctrl + Shift + D)
• Revisa la consola del navegador

• Agrega tu dominio de Vercel a Firebase Auth
• Verifica las reglas de Firestore

• Confirma que Firebase Auth esté habilitado
• Verifica las credenciales de Firebase

src/
├── components/          # Componentes reutilizables
│   ├── layout/         # Componentes de layout
│   ├── VirtualizedGrid.jsx
│   └── DebugInfo.jsx
├── hooks/              # Hooks personalizados
│   ├── useRecipes.js
│   ├── useDebounce.js
│   └── useImageOptimization.js
├── pages/              # Páginas de la aplicación
├── services/           # Servicios (Firebase)
├── context/            # Contextos de React
└── config/             # Configuraciones

Este proyecto está bajo la Licencia MIT. Ver el archivo LICENSE para más detalles.

📖 Guía completa de Copyright y Uso - Instrucciones detalladas sobre cómo usar este código

¿Qué significa esto?

• ✅ Puedes usar este código libremente
• ✅ Puedes modificar y adaptar el código
• ✅ Puedes distribuir copias
• ✅ Puedes usar comercialmente
• 📝 Solo debes incluir la nota de copyright original

1. Fork el proyecto
2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
4. Push a la rama (git push origin feature/AmazingFeature)
5. Abre un Pull Request

Si tienes problemas:

1. Revisa la Guía de Despliegue
2. Usa el componente de debug (Ctrl + Shift + D)
3. Verifica la consola del navegador
4. Abre un issue en GitHub

Este proyecto fue creado con fines de práctica y aprendizaje.

✅ SÍ, absolutamente! Este proyecto está bajo licencia MIT, lo que significa que puedes:

• 🚀 Usar el código en tus propios proyectos
• 🔧 Modificar y adaptar a tus necesidades
• 📱 Distribuir copias del código
• 💼 Usar comercialmente en aplicaciones de pago
• 🎓 Aprender de la implementación

📋 Solo mantener esta nota de copyright en tu código:

// Copyright (c) 2024 Matias Rocha
// Este código está basado en: https://github.com/MatiasRocha92/recetas
// Licencia MIT - Ver LICENSE para más detalles

• 📄 Archivos principales (App.jsx, componentes clave)
• 📚 README de tu proyecto
• 🔗 Enlaces al repositorio original (opcional pero apreciado)

Desarrollado con ❤️ por Matias Rocha - GitHub