env-explorer-showcase-video.mp4

Env Explorer

Note: The application code, architecture, and design were built entirely by a human. This README document was generated by ChatGPT.

Overview

Env Explorer is a desktop application designed to find, manage, and analyze local environment variables (.env files) across your system. It provides a visual dashboard to track configurations, view analytical data on environment variable distribution, and launch specific environments directly into an isolated terminal.

![Screenshot Placeholder]

Architecture and Design

The application follows a standard desktop-client architecture utilizing Tauri to bridge system-level operations with a modern web frontend.

The backend is written in Rust, which is responsible for heavy I/O tasks. This includes recursively crawling the filesystem for .env files, parsing their contents securely, and exposing this aggregated data to the frontend via IPC commands.

The frontend is built with Svelte and styled using Tailwind CSS alongside Flowbite components. The visual design language follows the Catppuccin Mocha color palette, specifically mirroring the soft geometry, subtle shadows, and pastel aesthetics common in Linux Hyprland environments.

File Breakdown

• src-tauri/src/main.rs: The Rust backend entry point. Handles OS-level file crawling, reading .env configurations, and launching terminal instances.
• src/routes/+layout.svelte: The root layout wrapper for the Svelte frontend.
• src/routes/home/applicationWindow.svelte: The main shell interface, containing the sidebar navigation and managing the state between different sub-windows.
• src/routes/home/windows/projectWindow.svelte: The component responsible for listing discovered .env files and providing the launch-to-terminal functionality.
• src/routes/home/windows/analyticWindow.svelte: Aggregates and displays statistics, such as top variable occurrences, unique names, and total scanned files.
• src/routes/home/windows/bulkWindow.svelte: A placeholder view for the upcoming bulk edit functionality.
• src/routes/component/sidebar.css: Styling for the application navigation sidebar.
• src/routes/component/titlebar.svelte & titlebar.css: Custom window controls and drag regions for the borderless desktop window.
• src/app2.css: Global CSS defining the Catppuccin Mocha theme variables.

Tools Used

• Tauri (Desktop Application Framework)
• Rust (Backend language for system I/O)
• Svelte (Frontend framework)
• Tailwind CSS & Flowbite (Utility styling and component structures)

How to Start

Ensure you have Rust, Node.js, and the necessary Tauri build dependencies installed on your system.

1. Clone the repository to your local machine.
2. Install frontend dependencies: npm install
3. Run the application in development mode: npm run tauri dev
4. To build the final executable for deployment: npm run tauri build

Project Status and Learnings

This project is currently in an experimental state. Throughout the development process, I learned a significant amount regarding cross-language IPC communication, optimizing Rust file I/O for large directory trees, and applying complex, decoupled CSS architectures in Svelte.

At the moment, I am somewhat bored of this project and taking a break. The next planned feature is the "Bulk Edit" window, which will allow users to apply actions across multiple environments simultaneously. This feature will be added whenever I feel like returning to active development.