Este es un proyecto creado con Vite y React. Vite es una herramienta de construcción que ayuda a configurar proyectos de desarrollo web de manera rápida y eficiente, mientras que React es una popular biblioteca de JavaScript para construir interfaces de usuario.
- Vite: Herramienta de construcción rápida y ligera que aprovecha el módulo ECMAScript nativo para conseguir tiempos de arranque increíblemente rápidos.
- React: Biblioteca de JavaScript para crear interfaces de usuario reactivas y reutilizables.
- Supabase: Plataforma de backend como servicio que proporciona una base de datos PostgreSQL, autenticación, almacenamiento de archivos y más.
- Tailwind CSS: Framework de estilos utilitario que permite construir diseños personalizados de manera rápida y eficiente.
- JavaScript moderno: Utiliza las últimas características de JavaScript respaldadas por navegadores modernos.
- @tabler/icons-react: Conjunto de iconos SVG listos para usar en tus componentes de React.
Este proyecto utiliza Supabase como solución de backend. Supabase proporciona una base de datos PostgreSQL, autenticación, almacenamiento de archivos y más, todo en un solo paquete. Puedes configurar y administrar tu backend a través de la interfaz web de Supabase o utilizando su API.
Los estilos de este proyecto se crean utilizando Tailwind CSS, un framework de estilos utilitario. Tailwind CSS te permite construir diseños personalizados de manera rápida y eficiente, sin necesidad de escribir CSS desde cero. Proporciona una amplia gama de clases utilitarias que puedes aplicar directamente en tus componentes de React.
- @supabase/supabase-js: Este es el cliente JavaScript oficial para Supabase, una plataforma de backend como servicio que proporciona una base de datos PostgreSQL, autenticación, almacenamiento de archivos y más. Esta biblioteca permite interactuar con los servicios de Supabase desde una aplicación web o móvil. react-router-dom: Esta es la biblioteca de enrutamiento oficial para React que permite crear rutas y manejar la navegación en una aplicación web basada en React. Proporciona componentes y hooks para definir rutas, navegar entre ellas y renderizar contenido según la ruta actual.
- @types/react y @types/react-dom: Estas son las definiciones de tipos para React y ReactDOM, que permiten obtener un mejor soporte de tipos y autocompletado en el editor de código cuando se trabaja con React y TypeScript.
- autoprefixer: Es una herramienta de PostCSS que analiza el CSS y agrega automáticamente los prefijos de proveedor necesarios para las propiedades CSS, lo que garantiza una mejor compatibilidad con navegadores antiguos.
- dotenv: Es una biblioteca que permite cargar variables de entorno desde un archivo .env en las aplicaciones Node.js. Esto es útil para almacenar configuraciones sensibles como claves de API, cadenas de conexión de base de datos, etc., y evitar que se comitan accidentalmente en el control de versiones.
- eslint y plugins relacionados: ESLint es una herramienta de linting que analiza el código JavaScript y ayuda a detectar y solucionar problemas de estilo, patrones problemáticos y errores potenciales. Los plugins adicionales proporcionan reglas de linting específicas para React y sus hooks.
- postcss: Es una herramienta de transformación de CSS que se utiliza junto con Autoprefixer y otros plugins para realizar tareas de post-procesamiento en el CSS. tailwindcss: Es un framework de estilos utilitario que proporciona clases CSS predefinidas para construir rápidamente diseños personalizados sin tener que escribir CSS desde cero.
Antes de ejecutar este proyecto, asegúrate de tener instalado Node.js en tu sistema. Puedes descargarlo desde el sitio oficial de Node.js.
- Clona este repositorio en tu máquina local:
git clone https://github.com/yosefhdev/Hero-Shop.git- Navega al directorio del proyecto:
cd Hero-Shop- Instala las dependencias del proyecto:
npm installnpm run dev