WFI – Windows For Installation

Version: 0.1.0
Tech Stack: React 19, TypeScript, Vite, TailwindCSS, Radix UI, Tauri

WFI is a modern desktop application built with Tauri and React, designed to manage, install, import/export, and interact with applications seamlessly. Optimized for Windows but extendable cross-platform thanks to Tauri.

---

📦 Key Features

• File & Application Management: Easily upload, import, export, and install files and apps.
• Intuitive UI: Built with Radix UI + TailwindCSS, fully responsive with dark/light mode.
• Animations & Lottie: Support for JSON Lottie files to create dynamic loading and UI effects.
• Advanced Search & Filtering: Powered by Fuse.js & MiniSearch for large dataset search.
• State Management: Efficient global state handling with Zustand.
• Notifications & Feedback: Interactive toast notifications using Sonner.
• Multi-select & Resizable Panels: Flexible UI components for better interaction.
• Clipboard, Dialogs & File System: Seamless desktop integrations via Tauri plugins.

---

⚡ Tech Stack

• Frontend: React 19, TypeScript, Vite, TailwindCSS
• UI Components: Radix UI, clsx, class-variance-authority
• State Management: Zustand, React Hook Form + Zod validation
• Animations: Framer Motion, Lottie-react, Tailwind Animate
• Charts & Data: Recharts, react-window, embla-carousel
• Desktop API: Tauri + Plugins (FS, Dialog, Clipboard, Opener, Store API)

---

🏗️ Project Structure

wfi/
├── public/ # Public assets (SVG, images)
├── src/
│ ├── assets/ # Logos, wallpapers, Lottie files
│ ├── components/ # UI & custom components
│ ├── configs/ # Shared configuration
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utilities, toast, settings
│ ├── providers/ # Theme & Context providers
│ ├── store/ # Zustand stores
│ ├── types/ # TypeScript types
│ ├── views/ # App entry views
│ ├── App.tsx
│ ├── main.tsx
│ └── vite-env.d.ts
├── src-tauri/ # Tauri backend (Rust)
│ ├── src/ # Commands & main entry
│ ├── icons/
│ └── tauri.conf.json
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

---

🚀 Installation & Running

1. Install dependencies

    yarn install

2. Run in development mode

    yarn dev

    ### Open the browser at http://localhost:5173.

3. Run Tauri desktop app

    yarn tauri dev

4. Build production version

 yarn build
 yarn tauri build

🎨 Styling & UI

• TailwindCSS 4 + Tailwind-merge + tailwind-scrollbar + tailwindcss-animated

• ShadCN file upload & UI components

🔧 Tauri Plugins

• [@tauri-apps/plugin-dialog] – System dialogs & alerts

• [@tauri-apps/plugin-fs] – File system management

• [@tauri-apps/plugin-clipboard-manager] – Clipboard operations

• [@tauri-apps/plugin-opener] – Open files/URLs externally

• [@tauri-plugin-store-api] – Settings & persistent storage

🛠️ Developer Notes

• Keep component logic and UI separate for maintainability
• Use Zustand for global state management, avoiding prop drilling
• Lazy-load Lottie animations to reduce memory usage
• Multi-select & Popover components are portal-free for proper Tauri behavior

📚 References & Documentation

• Tauri
• Radix UI
• TailwindCSS
• Zustand
• React Hook Form

❤️ Acknowledgements

Thank you for using WFI! For feedback, bug reports, or feature requests, please open an issue on GitHub.