La idea principal es hacer una aplicación parecida a Codepen, obviamente no tan completa como esta, pero si con las funcionalidades básicas.
Partimos de la base de que tenemos un backend que nos proporciona los datos necesarios para poder obtener los usuarios y los componentes que estos han creado.
En un principio gestioné un diagrama de casos de usos para ver que podíamos llegar a hacer.
Nota: Estas son las funcionalidades que tiene el proyecto en la versión 0.0.1, pero se irán cumpliendo y añadiendo más funcionalidades.
- Login tradicional
- Registro tradicional
- Logout
- Editor de código
- Guardar componentes
- Editar componentes
- Ver componentes
- Publicar comentarios
- Ver comentarios
- Dar like a componentes
- Ver perfil de usuario
- Ver componentes de usuario
- Filtrar componentes
- Buscar componentes
- OAuth2
- Panel de administración
- Incluir dependencias en componentes
Para poder ejecutar el proyecto, necesitaremos tener instalado Node.js. Una vez lo tengamos instalado, tendremos que instalar las dependencias del proyecto, para ello ejecutaremos el siguiente comando:
npm installPara ejecutar el proyecto, tendremos que ejecutar el siguiente comando:
npm run devPara compilar el proyecto, tendremos que ejecutar el siguiente comando:
npm run buildPara ejecutar el proyecto compilado, tendremos que ejecutar el siguiente comando:
npm run preview- @intlify/unplugin-vue-i18n: Un plugin para Vue.js que permite utilizar i18n con Vite.
- @rushstack/eslint-patch: A patch for ESLint that improves performance with large projects.
- @vitejs/plugin-vue: A plugin for integrating Vue.js with Vite.
- @vue/eslint-config-prettier: A configuration that disables ESLint rules that conflict with Prettier.
- @vue/tsconfig: A TypeScript configuration for Vue.js projects.
- eslint: A pluggable and configurable linter for JavaScript and TypeScript.
- eslint-plugin-vue: A plugin for ESLint that provides linting rules for Vue.js.
- node-sass: A library for transpiling SASS to CSS.
- npm-run-all: A CLI tool for running multiple npm scripts in parallel or sequential order.
- prettier: An opinionated code formatter.
- sass-reset: A library for resetting browser default styles with SASS.
- vite: A fast build tool and development server for modern web projects.
- crypto-js: Librería para cifrado de datos.
- dotenv: Módulo que carga variables de entorno desde un archivo .env.
- js-base64: Codificación y decodificación de Base64.
- monaco-editor: Editor de código web.
- monaco-editor-vue3: Componente de Vue.js para el editor de código Monaco.
- pinia: Sistema de gestión del estado de la aplicación.
- sweetalert2: Biblioteca de alertas.
- toastify-js: Biblioteca para mostrar notificaciones emergentes.
- uuidv4: Generador de identificadores únicos.
- vue: Marco de trabajo de JavaScript para construir interfaces de usuario.
- vue-i18n: Soporte internacionalización para aplicaciones Vue.js.
- vue-router: Enrutador para aplicaciones Vue.js.
- vue-skeletor: Componente Vue.js para cargar contenido de esqueleto.
- vue3-split-panel: Componente Vue.js para panel de división.
