DevHub · Running and terminal

Open. Run.Follow along.

Project actions and a built-in terminal in the same place.

One hub to open, run and look after every project.

Desktop appCatalogPersonal

Tauri 2
Rust
React 18
TypeScript

DevHub · Running and terminalLocal
runningBuilt-in
terminalProject
tools

Open. Run.Follow along.

Project actions and a built-in terminal in the same place.

Tauri 2
Rust
React 18
TypeScript

One hub to open, run and look after every project.

Desktop appCatalogPersonal

Tauri 2
Rust
React 18
TypeScript

PortfolioDevHub Central de Projetos

The catalog

Dozens of projects, a single window.

Working across many projects, you lose time just looking for the right folder. The hub lists them all, with search by name or technology, filters by category and platform, favourites and two ways of looking. Try it here.

Next.jsGalorysWebsites · WebRunning · :3000
Next.jsBabyShoesE-commerce · WebStopped
TauriDayForgeDev Tools · DesktopStopped
TauriProjectZipperDev Tools · DesktopRunning · Tauri
Next.jsRecóleoWebsites · WebStopped
TauriMarkViewDev Tools · DesktopStopped
TauriCredHubFinance · DesktopStopped
TauriImageForgeImage and video · DesktopStopped
Next.jsPraia JeNWebsites · WebStopped
TauriVideoForgeImage and video · DesktopStopped
TauriWorkbenchDev Tools · DesktopStopped
Next.jsTicTurE-commerce · WebStopped

The search, the filters, the favourites and the grid/list switch are the program's; the covers are the projects' own catalog art. A sample of 12 is shown here.

The actions

Each project with its own buttons.

Once a project is open, the hub shows what can be done with it without opening another window. Click a button: the console beside it shows the command the program has the computer run.

React · Vite

Roblox App AssetsRunning · :4051

A 3D model platform, built with React and Three.js.

Console · Roblox App Assets

taskkill /PID 18432 /T /F

What happensEnds the project's process and every process it started, and frees the port.

The buttons are the program's card buttons and the commands are the ones the code runs (process_manager.rs, port_owner.rs). The process number and the folder are examples.

Project scene: the hosting tab open on the laptop, with a cloud and a database around it

DevHub · Tools and hosting

More control. Less scatter.

Maintenance and hosting tools brought together in my project hub.

Disk analysisFind heavy folders
and free space easily.Shared targetsFree projects without
breaking the others.Batch backupManage backups of several
projects at once.A hub built to hold up my development routine.

Once the project is up, the other half of the work starts: hosting, measuring space, keeping copies. The hub puts all of that in one tab, so there's no second panel in another window.

SitesThe published sites, with domain and state.
DatabasesEach site's databases.
DomainsDomains and subdomains attached.
DNSEach domain's DNS records.
DeploySending the files live.
FilesWhat sits in the server folder.

Disk analysis of one project

node_modules4.2 GB
.next1.2 GB
dist640 MB
target2.8 GB
public210 MB

All together: 9.0 GB, and almost all of it comes back by itself on a fresh install.

The tabs and the tools are the program's. The sizes here are a typical example; the real measuring is done folder by folder on the computer.

The start

A new project doesn't start from zero.

Opening an empty folder is the slowest part of starting. In the hub you pick the sector and the program copies a base that already works, strips the old brand and leaves the project ready for the new content.

Pick the sector

The base

Base shopCart, catalog and checkout already built.

The new project

New ProjectE-commerce

What the program does

Copy the base into the new folder
Change the name and the icon
Strip the old brand from the files
Install the dependencies
Open the project in the hub

The sectors and the idea of starting from a base come from the code (NewProjectModal). The new project's name is chosen at creation time.

The technologies

What it is made of, piece by piece

One window for every project: the screen is React inside Tauri 2, and the Rust behind it reads the folders, starts the processes, copies, zips and measures the disk. Pick a piece to see what it does here and which file it is in.

14technologies, in 3 layers

Screen

Window and files

Features

1Re18.3

Layer: Screen

React 18.3

Builds the hub: the catalog, the filters, the project panel and the terminal.

Where it is in the code

src/App.tsx

Layer: Screen

TypeScript 5.4

The screen's language, across 42 interface pieces.

Where it is in the code

src/types.ts

Layer: Screen

Tailwind CSS 3.4

The hub's dark and light themes.

Where it is in the code

tailwind.config.js

Layer: Screen

Vite 5.3

Builds the screen and serves it during development.

Where it is in the code

vite.config.ts

Layer: Screen

Framer Motion 11.0

Opens and closes the backup, branding and settings dialogs.

Where it is in the code

src/components/Modal.tsx

Layer: Screen

react-hot-toast 2.4

The corner notices when an action finishes.

Where it is in the code

src/App.tsx

Layer: Window and files

Tauri 2

The program's window and the bridge between screen and Rust.

Where it is in the code

src-tauri/tauri.conf.json

Layer: Window and files

Rust nativo

Almost 180 functions: read folders, start processes, copy, zip and measure the disk.

Where it is in the code

src-tauri/src

Layer: Window and files

Arquivos e diálogos plugins 2

Picking the project folder and opening files through the system.

Where it is in the code

src/components/ChangeFolderModal.tsx

Layer: Window and files

Store plugin 2

Keeps favourites, hidden items and settings between sessions.

Where it is in the code

src/lib/store.ts

Layer: Features

Fuse.js 7.5

The search that finds the project and the document even with half the name.

Where it is in the code

src/components/DocsExplorer.tsx

Layer: Features

react-markdown 10.1

Reads the project's .md documents inside the hub itself.

Where it is in the code

src/components/DocsExplorer.tsx

Layer: Features

Backup em lote próprio

Zips several projects at once, with a progress bar.

Where it is in the code

src/components/BatchBackupPanel.tsx

Layer: Features

Análise de disco própria

Measures each folder's weight and shows which takes the most space.

Where it is in the code

src/components/DiskAnalyzer.tsx

The screens

The hub from inside.

Real screens from the program, in the order it is used: find the project, get it running, host it and look after it. Pick a group; hover to bring a screen forward and click to see it large.

Screens with the hosting account and balance, and variations of the same filter, were left out. The projects on the cards are the author's own.

Next project42 / 51

Creative and developer toolsDevHub GitHubA desktop panel that tracks GitHub versions and builds, publishes a new version in one click and organizes clients and feedback across products.React 19.2TypeScript 5.9Tailwind CSS 3.4Vite 6.4

← PreviousDev Launcher

Home