Free Admin Dashboard

使用 React.js、Tailwind CSS 和 TypeScript 開發的免費管理儀表板

免費管理儀表板是用 Figma 設計並用 React.js、Tailwind CSS 和 TypeScript 開發的開源管理範本。我在這個專案中的目標是透過遵循最佳 React.js 實踐來提供高品質和優質的設計儀表板模板。這個React 管理儀表板是使用高級React.js 設計模式創建的，例如受控和非受控組件設計模式、自定義鉤子模式、佈局組件模式、組件組合模式、複合組件設計模式等等……這主要是一個電子商務儀表板模板，但是將來，如果儲存庫變得流行，我會將其擴展到更多領域。此儀表板完全響應式，並且可以免費下載。

管理儀表板設計

管理儀表板設計是在 Figma 中按照電子商務儀表板 UI 設計的基礎和最佳實踐進行設計的。我的目標是創建盡可能簡單並具有優質的使用者介面。完整的設計是在考慮最終用戶的情況下創建的。您可以將管理面板範本用於任何類型的電子商務網站，您只需將其與後端連接，一切都會順利進行。電子商務網站的管理面板是完全開源的，這意味著您可以根據需要輕鬆添加更多功能。管理儀表板範本原始程式碼是按照最佳實踐編寫的，因此您不會遇到任何問題。 React 儀表板是完全可自訂且靈活的，因此您可以輕鬆地將其變成您的儀表板。管理面板設計遵循最佳設計實踐，如視覺層次、鄰近度、空白、一致性、對比等等…

特徵

• 高品質設計：以最終使用者為中心的高品質設計。
• 響應式設計：完全響應式佈局，可在桌上型電腦、平板電腦和行動裝置上無縫運作。
• 動態圖表和圖形：使用 Chart.js 函式庫的互動式資料視覺化
• 模組化組件：適用於儀表板不同部分的可重複使用和可自訂的組件。
• 主題客製化：淺色和深色模式支援可自訂的主題。
• 資料表：具有排序、篩選和分頁功能的進階資料表。

使用的技術

• React.js：用於建立使用者介面的 JavaScript 函式庫。
• Redux Toolkit：React 應用程式的狀態管理程式庫。
• React Router：用於在 React 應用程式中進行路由的程式庫。
• Chart.js：簡單且靈活的 JavaScript 圖表庫。
• Tailwind CSS：實用程式優先的 CSS 框架，用於快速建立自訂使用者介面。
• TypeScript：一種用於應用程式規模的 JavaScript 語言。
• Nanoid：一個小型、安全、URL 友善、唯一的字串 ID 產生器
• React Icons：包含大量圖示的圖示庫
• Figma：強大的網頁設計工具。

如果您喜歡免費的管理儀表板項目，請在 GitHub 上給它一顆星以支持該項目，並給予我添加更多出色功能的動力。

運行應用程式的視訊說明

以下是運行該應用程式的影片說明的 YouTube 連結：https://www.youtube.com/watch?v=cydXOmMhbtQ

指示

1. 要執行該應用程序，您首先需要在電腦上下載並安裝 Node.js 和 npm。以下是解釋如何安裝它們的教學連結：https://www.youtube.com/watch?v=4FAtFwKVhn0。這裡還有下載它們的連結：https://nodejs.org/en

2. 當您在電腦上安裝所需的所有程式時，您需要下載該項目。下載項目後，需要將其解壓縮。

3. 解壓縮項目後，您需要在選擇的終端機中開啟項目資料夾並寫入：

 npm install

4. 要運行項目，請寫入：

 npm run dev

5. 要查看您的應用程序，請前往您選擇的瀏覽器並在 URL 中寫入：http://localhost:5173