AUTH (Sistema de Autenticação - Login, Criar Conta)Auth
ZIP
ModulelibraryFolders and ZIPsModule
documentation
Ready modules.New projects ahead.
An in-house library to reuse React and Next.js modules.
A React module library with a preview before installing.
- Tauri 2
- React 18
- Rust
- Next.js
Module libraryFolders and ZIPsModule documentationReady modules.New projects ahead.
An in-house library to reuse React and Next.js modules.
- Tauri 2
- React 18
- Rust
- Next.js
A React module library with a preview before installing.
- Tauri 2
- React 18
- Rust
- Next.js
The library
Fifty-four modules, sorted by their names.
The library is a folder: each ZIP (or folder with docs) becomes a module, and the category comes from its own name, no sign-up. These are the 54 real modules. Switch tabs or test any name.
BACKUP-CORRIGIDOOthers
ZIPCATEGORIA-PAGE - VesteForeverOthers
ZIPCHECKOUT (Página de Finalização de Compra)Checkout
ZIPDASHBOARD-CLIENTE-DASHBOARD-BASECustomer
ZIPDASHBOARD-CLIENTE-FAVORITOSCustomer
ZIPDASHBOARD-CLIENTE-MINHA-CONTA (10 MODULOS JUNTOS)Customer
ZIPDASHBOARD-CLIENTE-RASTREARCustomer
ZIPDASHBOARD-CLIENTE-TAB-ACCOUNTCustomer
ZIPDASHBOARD-CLIENTE-TAB-CLUBCustomer
ZIPDASHBOARD-CLIENTE-TAB-FAVORITESCustomer
ZIPDASHBOARD-CLIENTE-TAB-ORDERSCustomer
ZIPModulo - CARRINHO (cart drawer)The word "cart" decided it.
CheckoutThe rule is the program's (commands.rs, detect_category), in this order: admin; cliente or dashboard; auth or login; checkout or cart; produto/product; layout, header or footer; tema/theme; hook; api; the rest goes to Others. That's why tabs like Admin and API are empty in this collection, no name has those words.
See first. Choose better.
Local preview and the module's files in the same place.
Local previewFiles and codeNext.js sandboxBefore taking a module into a project, you can see it working: the program starts a test Next.js and draws the component in a window. Pick a module and start the preview.
Pick the module
- 1Starts the sandbox: npm run dev, port 3333 (waits 3 s)
- 2Copies the .ts and .tsx files to components/modules/dashboard-cliente-tab-orders
- 3Opens /preview?module=dashboard-cliente-tab-orders in a window
- 4The page imports the component and draws it
In the module
- 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
▷
As in the program (commands.rs and preview-sandbox): files are flattened by name and the component needs a default export. The sandbox only has react, framer-motion, lucide-react and Tailwind, a module that imports anything else won't show. The card drawn here is an example.
From module to project. A made-to-measure flow.
An in-house tool to pick modules and take the files to the target project.
Original toolModule selectionTarget projectFile copyWith the modules chosen, the program reads the target project through package.json and copies everything at once, logging each step. Tick modules, adjust the project and install.
Ticked modules
Target project
Next.jsTailwind
In package.json
Project root
- app/
- components/
- package.json
Log
- Nothing installed yet.
The real screens
As in the program (commands.rs): the analysis reads only package.json, Next.js, React, Prisma and Tailwind; the copy takes everything from the module's root to the project's root and replaces anything with the same name; no dependency is installed. Module names here are shortened.
The technologies
What it is made of, piece by piece
A lightweight desktop program: the screen is React with Tailwind inside Tauri 2; Rust reads the module library, analyzes the target project and copies the files, in 12 commands; and a test Next.js on the side draws the module before installing. Pick a piece to see what it does here and which file it is in.
9technologies, in 2 layers
Screen
Program
Creative and developer toolsVideoForge