AUTH (Sistema de Autenticação - Login, Criar Conta)Auth
ZIP
Bibliotecade módulosCarpetas y ZIPDocumentación
del módulo
Módulos listos.Nuevos proyectos por delante.
Una biblioteca propia para reaprovechar módulos React y Next.js.
Biblioteca de módulos React con preview antes de instalar.
- Tauri 2
- React 18
- Rust
- Next.js
Biblioteca de módulosCarpetas y ZIPDocumentación del móduloMódulos listos.Nuevos proyectos por delante.
Una biblioteca propia para reaprovechar módulos React y Next.js.
- Tauri 2
- React 18
- Rust
- Next.js
Biblioteca de módulos React con preview antes de instalar.
- Tauri 2
- React 18
- Rust
- Next.js
La biblioteca
Cincuenta y cuatro módulos, separados por el nombre.
La biblioteca es una carpeta: cada ZIP (o carpeta con documentación) se vuelve un módulo, y la categoría sale del propio nombre, sin registro. Estos son los 54 módulos reales. Cambia de pestaña o prueba cualquier nombre.
BACKUP-CORRIGIDOOtros
ZIPCATEGORIA-PAGE - VesteForeverOtros
ZIPCHECKOUT (Página de Finalização de Compra)Checkout
ZIPDASHBOARD-CLIENTE-DASHBOARD-BASECliente
ZIPDASHBOARD-CLIENTE-FAVORITOSCliente
ZIPDASHBOARD-CLIENTE-MINHA-CONTA (10 MODULOS JUNTOS)Cliente
ZIPDASHBOARD-CLIENTE-RASTREARCliente
ZIPDASHBOARD-CLIENTE-TAB-ACCOUNTCliente
ZIPDASHBOARD-CLIENTE-TAB-CLUBCliente
ZIPDASHBOARD-CLIENTE-TAB-FAVORITESCliente
ZIPDASHBOARD-CLIENTE-TAB-ORDERSCliente
ZIPModulo - CARRINHO (cart drawer)La palabra "cart" decidió.
CheckoutLa regla es la del programa (commands.rs, detect_category), en este orden: admin; cliente o dashboard; auth o login; checkout o cart; produto/product; layout, header o footer; tema/theme; hook; api; el resto va a Otros. Por eso pestañas como Admin y API quedan vacías en este acervo, ningún nombre tiene esas palabras.
Mira antes. Elige mejor.
Vista previa local y archivos del módulo en el mismo lugar.
Preview localArchivos y códigoSandbox Next.jsAntes de llevar un módulo a un proyecto, puedes verlo funcionando: el programa levanta un Next.js de prueba y dibuja el componente en una ventana. Elige un módulo e inicia el preview.
Elige el módulo
- 1Levanta el sandbox: npm run dev, puerto 3333 (espera 3 s)
- 2Copia los .ts y .tsx a components/modules/dashboard-cliente-tab-orders
- 3Abre /preview?module=dashboard-cliente-tab-orders en una ventana
- 4La página importa el componente y lo dibuja
En el módulo
- components/TabOrders.tsx
- components/OrderCard.tsx
- lib/format.ts
- DOCUMENTACAO.md
components/modules/dashboard-cliente-tab-orders/
- …
localhost:3333/preview?module=dashboard-cliente-tab-orders
▷
Como en el programa (commands.rs y preview-sandbox): los archivos se aplanan por el nombre y el componente necesita un export default. El sandbox solo tiene react, framer-motion, lucide-react y Tailwind, un módulo que importa otra cosa no aparece. La tarjeta dibujada aquí es un ejemplo.
Del módulo al proyecto. Un flujo a medida.
Una herramienta propia para elegir módulos y llevar los archivos al proyecto de destino.
Herramienta propiaSelección de módulosProyecto de destinoCopia de archivosElegidos los módulos, el programa mira el proyecto de destino por el package.json y copia todo de una vez, anotando cada paso. Marca módulos, ajusta el proyecto e instala.
Módulos marcados
Proyecto de destino
Next.jsTailwind
En el package.json
Raíz del proyecto
- app/
- components/
- package.json
Registro
- Nada instalado aún.
Las pantallas reales
Como en el programa (commands.rs): el análisis lee solo el package.json, Next.js, React, Prisma y Tailwind; la copia lleva todo de la raíz del módulo a la raíz del proyecto y reemplaza lo que ya exista con el mismo nombre; no se instala ninguna dependencia. Los nombres de los módulos aquí están acortados.
Las tecnologías
De qué está hecho, pieza por pieza
Un programa de escritorio liviano: la pantalla es React con Tailwind dentro de Tauri 2; Rust lee la biblioteca de módulos, analiza el proyecto de destino y copia los archivos, en 12 comandos; y un Next.js de prueba al lado dibuja el módulo antes de instalar. Elige una pieza para ver qué hace aquí y en qué archivo está.
9tecnologías, en 2 capas
Pantalla
Programa
Herramientas de creación y desarrolloVideoForge