react_admin_ui_v1

React Admin UI เป็นต้นแบบ อินเทอร์เฟซผู้ใช้แดชบอร์ดที่สวยงามและเป็นโอเพ่นซอร์ส ที่สร้างขึ้นด้วย TypeScript และ React น่าแปลกที่นี่คือครั้งแรกของฉันที่สร้างต้นแบบส่วนต่อประสานผู้ใช้ที่มีส่วนประกอบที่ซับซ้อนเล็กน้อย ดังนั้นเป้าหมายของฉันคือเอเจนซี่ด้านไอทีหรือแม้แต่นักพัฒนาแต่ละรายก็สามารถใช้ต้นแบบนี้เพื่อนำข้อมูลเชิงลึกสำหรับโครงการในอนาคตของพวกเขา

ดูตัวอย่าง React Admin UI เพื่อดูรายการฟีเจอร์ของต้นแบบ ค่านิยมหลัก และกรณีการใช้งานที่ครอบคลุม

พื้นที่เก็บข้อมูลนี้ประกอบด้วย ระบบหลักของ React Admin UI Prototype ซึ่งแบ่งออกเป็นสองไดเร็กทอรีที่แตกต่างกัน แบ็กเอนด์มีไว้สำหรับ JSON API (ได้รับการกำหนดค่าไว้แล้วสำหรับการปรับใช้ Vercel) และฟรอนต์เอนด์มีไว้สำหรับต้นแบบอินเทอร์เฟซผู้ใช้ทั้งหมด

- คุณสมบัติและประกอบด้วย

• ⚡️ โต้ตอบ 18 TypeScript ด้วย Vite
• การกำหนดเส้นทางที่ประกาศด้วย React Router v6.1
• - การดึงข้อมูลที่ราบรื่นด้วย React Query v5
• ไอคอนที่ปรับให้เหมาะสมด้วยไอคอน React v5
• - Tailwind CSS v3 เป็นพื้นฐานการออกแบบสไตล์
• - Daisy UI v4 เป็นระบบการออกแบบฐาน
• - Material UI v5 สำหรับ Data Grid ที่ปรับให้เหมาะสม
• แผนภูมิที่สวยงามพร้อม Recharts v2
• - และอีกมากมาย...

การติดตั้งและวิธีใช้งาน

ดูด้านล่างสำหรับตัวอย่างการติดตั้งและการใช้งานอย่างรวดเร็ว

แบ็กเอนด์

ติดตั้งการอ้างอิงทั้งหมดที่แสดงอยู่ใน package.json ภายในไดเร็กทอรีแบ็กเอนด์

 cd backend

npm install

ตามค่าเริ่มต้น ฉันปรับใช้ API เพื่อทำงานในสภาพแวดล้อม Vercel แล้ว สามารถเข้าถึง API แบบสดได้จาก https://react-admin-ui-v1-api.vercel.app/ อย่างไรก็ตาม ในกรณีที่คุณต้องการกำหนดค่าแบ็กเอนด์ด้วยตัวเอง คุณสามารถเรียกใช้ด้านล่างนี้

nodemon ./src/index.ts

และสามารถเข้าถึง API ได้ในเครื่องจาก http://localhost:5000

ส่วนหน้า

ติดตั้งการอ้างอิงทั้งหมดที่แสดงอยู่ใน package.json ภายในไดเร็กทอรีส่วนหน้า

 cd frontend

npm install

npm run dev

หากคุณต้องการเปลี่ยนตำแหน่งข้อมูล API เริ่มต้น คุณสามารถไปที่ ApiCollection.tsx

จากนั้นสามารถเข้าใช้งานแอปได้จาก http://localhost:5173/

- มีคำถาม? ต้องการที่จะแชท? ประสบปัญหา?

แน่นอนว่าคุณสามารถ ติดต่อเราได้โดยตรง ผ่านช่องทางที่เป็นทางการ เช่น อีเมลหรือ LinkedIn

- พบข้อผิดพลาดหรือไม่? แนะนำคุณสมบัติเฉพาะหรือไม่?

อย่าลังเลที่จะ ยื่นเรื่องใหม่ พร้อมชื่อเรื่องและคำอธิบายที่เกี่ยวข้องบนพื้นที่เก็บข้อมูล fransachmadhw/react_admin_ui_v1 หากคุณพบวิธีแก้ไขปัญหาของคุณแล้ว เรายินดีที่จะตรวจสอบคำขอดึงของคุณ !

✅ข้อกำหนด

React Admin UI ต้องการ Node เวอร์ชันที่สูงกว่าหรือเท่ากับ 20.11.0 LTS ดูส่วน dependencies และ devDependencies ใน package.json ภายในแบ็กเอนด์และฟรอนต์เอนด์เพื่อค้นหา รายการข้อกำหนดปัจจุบัน ของ React Admin UI

ใบอนุญาต

React Admin Dashboard UI Prototype ได้รับการเผยแพร่ภายใต้เงื่อนไขของ BSD-3-Clause