A modern, responsive web interface to browse a curated list of WinUI 3 applications, Fluent System Icons, and Fluent Emojis.
Fluent Deck serves as a comprehensive showcase of Microsoft's modern Fluent Design language. The platform provides a fast, dynamic way to explore a curated list of WinUI 3 applications and a complete library of Fluent design assets.
Fluent Deck is structured into three primary content sections:
- Curated Collection: Browse a hand-picked list of applications built using the WinUI 3 framework.
- Categorization: Easily navigate and discover apps organized by category.
- Dynamic Filtering: Search and filter the collection to find specific applications quickly.
- Style Switcher: View and copy Fluent System Icons in different visual styles, including Filled, Outlined, and Color.
- Search Functionality: Quickly find any icon by name.
- Download & Copy: Modal view for easy inspection, copying code snippets, and downloading icon assets.
- Multi-Style View: Explore the popular Microsoft Fluent Emojis across various renderings, such as 3D, Modern, Flat, Mono, and Animated.
- Category Tabs: Filter emojis by standard Unicode categories (e.g., Smileys, Food & Drink, Travel & Places).
- Direct Access: Copy the Unicode symbol or URL, and download the emoji asset directly.
This project is built using modern web technologies to ensure a fast, responsive, and maintainable application:
- Frontend Framework: React
- Build Tool: Vite
- Language: TypeScript
- Styling: Tailwind CSS
Follow these steps to set up the project locally for development.
- Node.js (v18+)
- npm
-
Clone the repository:
git clone [https://github.com/DesignLipsx/fluentdeck.git](https://github.com/DesignLipsx/fluentdeck.git) cd fluentdeck -
Install dependencies:
npm install
-
Run the development server:
npm run dev
-
Open your browser and navigate to
http://localhost:5173.
To create a production-ready build:
npm run build