Vitant App: Explorando React y Ant Design

Este proyecto es una aplicación web construida con React, Vite y TypeScript, diseñada con la intención principal de dominar la configuración y el uso de Ant Design. Sirve como un entorno de aprendizaje y experimentación para implementar un sistema de diseño utilizando los componentes y las directrices de Ant Design.

Características Principales

• Configuración de Ant Design: Explora cómo integrar y personalizar Ant Design en un proyecto React.
• Sistema de Diseño: Incluye una sección dedicada al Design System con ejemplos de componentes de Ant Design.
• Componentes Reutilizables: Demuestra la creación de componentes UI siguiendo las mejores prácticas.
• Enrutamiento: Utiliza react-router-dom para la navegación entre diferentes secciones de la aplicación.
• Tipado Fuerte: Desarrollado con TypeScript para mejorar la robustez y el mantenimiento del código.

Tecnologías Utilizadas

DeployVercel Deployment Status

¡Explora el proyecto desplegado aquí: Vitant App en Vercel

• React v19.1.0: Una biblioteca de JavaScript para construir interfaces de usuario.
• Vite v7.0.4: Una herramienta de construcción frontend de próxima generación que proporciona una experiencia de desarrollo extremadamente rápida.
• TypeScript v5.8.3: Un superconjunto de JavaScript que añade tipado estático.
• Ant Design v5.26.4: Un sistema de diseño y biblioteca de componentes UI para React de alta calidad.
• React Router DOM v7.6.3: Biblioteca para el enrutamiento declarativo en aplicaciones React.
• React Syntax Highlighter v15.6.1: Componente para resaltar sintaxis en el código.
• ESLint v9.30.1: Herramienta de linting para identificar y reportar patrones problemáticos encontrados en el código JavaScript/TypeScript.
• npm: Gestor de paquetes utilizado para instalar y administrar las dependencias del proyecto.

Cómo Ejecutar el Proyecto

Para poner en marcha este proyecto en tu máquina local, sigue los siguientes pasos:

1. Clona el Repositorio

git clone https://github.com/criworks/vitant-app.git
cd vitant-app

2. Instala las Dependencias

Este proyecto utiliza npm como gestor de paquetes. Asegúrate de tener Node.js (versión 20.x recomendada) y npm instalados en tu sistema.

npm install

3. Inicia la Aplicación en Modo de Desarrollo

npm run dev

Esto iniciará el servidor de desarrollo y podrás acceder a la aplicación en http://localhost:5173 (o un puerto similar, que se mostrará en tu terminal).

4. Compila la Aplicación para Producción

Para compilar la aplicación para despliegue en producción:

npm run build

Esto generará los archivos optimizados en la carpeta dist/.

5. Previsualiza la Compilación de Producción

Para previsualizar la compilación de producción localmente:

npm run preview

6. Ejecuta el Linter

Para verificar problemas de linting en el código:

npm run lint

Despliegue en Vercel

Este proyecto puede ser desplegado fácilmente en Vercel. Asegúrate de que la configuración de Node.js en tu package.json esté establecida y que el package-lock.json esté sincronizado. Si encuentras errores de módulos en Vercel, intenta una implementación con caché limpia desde el panel de control de Vercel.

// En package.json
"engines": {
  "node": "20.x"
}

---

¡Esperamos que este proyecto te sea útil para dominar Ant Design con React!