Unduh Mantine Admin - Unduh Kode Sumber Mantine Admin

Mantine Admin

Kode Sumber AI

1.0.0

Unduh

Admin Mantine

Demo →

Menyebarkan salinan templat Anda sendiri hanya dalam beberapa klik!

Perkenalan

Template ini memiliki banyak folder, contoh kode dan konfigurasi. Jangan ragu untuk mengedit atau menghapusnya, termasuk readme ini!

Sesuaikan dan nikmati!

? Fitur

Proyek ini menampilkan semua alat terbaru dan praktik yang baik dalam pengembangan web!

Kerangka

⚛️ Next.js - Kerangka kerja bereaksi lengkap untuk rendering hybrid dan server

Pengambilan data

? KY - Klien HTTP yang kecil dan elegan berdasarkan API Fetch Browser
✳️ React Query - kait untuk mengambil, caching, dan memperbarui data asinkron di React

Manajemen Negara Bagian dan Kait

? Zustand -Solusi manajemen negara bearbones yang kecil, cepat dan terukur menggunakan prinsip fluks yang disederhanakan
? react-use -kumpulan kait reaksi esensial

Sistem Desain dan Animasi

? Mantine-UI -Perpustakaan komponen yang sederhana, modular dan dapat diakses yang memberi Anda blok bangunan untuk membangun aplikasi React Anda
Ikon Tabler - Kumpulan Ikon Populer untuk Bereaksi Proyek

Validasi formulir

? Bentuk react hook -bentuk performant, fleksibel, dan dapat diperluas dengan validasi yang mudah digunakan
Zod -Validasi Skema First TypeScript dengan Inferensi Jenis Statis

Tes

? Jest - Kerangka Pengujian JavaScript yang menyenangkan dengan fokus pada kesederhanaan
? Perpustakaan Pengujian - Utilitas Pengujian Sederhana dan Lengkap Yang Mendorong Praktik Pengujian yang Baik

Pola desain

⛔ Eslint - Temukan dan perbaiki masalah dalam kode JavaScript Anda
? Prettier - Formatter Kode yang Dipendek, Mendukung Berbagai Bahasa dan Editor Kode
? Husky - kait git asli modern menjadi mudah
? Lint-Staged -Jalankan Linters melawan file git yang dipentaskan dan jangan biarkan? masuk ke basis kode Anda
? Commitlint - membantu tim Anda berpegang pada konvensi komit
? ️ Versi Standar - Utilitas untuk Versi Menggunakan SEMVER dan GENERASI CHANGELOG Didukung oleh Komit Konvensional

Analisa

?? ‍♂ogry mengapa-Anda-render (opsional)-memberi tahu Anda tentang render ulang yang berpotensi dihindari

▶ ️ Memulai

? Membuat repositori baru di github

Klik tombol " Gunakan Template Ini "
Konfigurasikan repositori baru Anda dan klik tombol " Buat repositori dari template "
Sekarang Anda dapat mengkloning repositori yang dihasilkan ke mesin lokal Anda:

 $ git clone https://github.com/ < YOUR-GITHUB-LOGIN > / < NAME-OF-YOUR-GENERATED-REPOSITORY > .git

Instalasi

Sebelum Anda dapat mulai mengembangkan aplikasi super Anda, Anda perlu menginstal dependensi proyek.

Pindahkan diri Anda ke akar proyek:

$ cd < NAME-OF-YOUR-GENERATED-REPOSITORY >

Untuk langkah selanjutnya, pilih manajer paket pilihan Anda dan ubah perintah yang terkandung dalam skrip package.json . Lihat dokumentasi mereka untuk informasi lebih lanjut:
PNPM (Rekomendasi)
NPM

Instal semua dependensi proyek:

 # PNPM
$ pnpm install
# NPM
$ npm install

⌨️ Pembangunan

Setelah semua dependensi telah diinstal, Anda dapat menjalankan server pengembangan lokal:

 # PNPM
$ pnpm dev
# NPM
$ npm run dev

Sekarang hanya kode!

Produksi

Setelah menerapkan perubahan, Anda dapat menghasilkan build untuk menguji dan/atau menggunakan lingkungan produksi Anda.

Buat Build Produksi:

 # PNPM
$ pnpm build
# NPM
$ npm run build

Dan kemudian jalankan build:

 # PNPM
$ pnpm start
# NPM
$ npm start

Lihat lebih banyak perintah yang dapat Anda gunakan

Serat

 # PNPM
$ pnpm run lint
# NPM
$ npm run lint

Serat dan perbaiki

 # PNPM
$ pnpm run lint:fix
# NPM
$ npm run lint:fix

Tes

 # PNPM
$ pnpm run test # or pnpm run test:watch
# NPM
$ npm run test # or npm run test:watch

Ketik Pemeriksaan

 # PNPM
$ pnpm run type-check
# NPM
$ npm run type-check

Format

 # PNPM
$ pnpm run format
# NPM
$ npm run format

Alat Pembaruan Interaktif

 # PNPM
$ pnpm run up
# NPM
$ npm run up

Perbarui semua dependensi

 # PNPM
$ pnpm run up-latest
# NPM
$ npm run up-latest

Rilis sebagai versi utama

 # PNPM
$ pnpm run release-as-major
# NPM
$ npm run release-as-major

Rilis sebagai versi minor

 # PNPM
$ pnpm run release-as-minor
# NPM
$ npm run release-as-minor

Rilis sebagai Versi Patch

 # PNPM
$ pnpm run release-as-patch
# NPM
$ npm run release-as-patch

Rilis Publikasikan

 # PNPM
$ pnpm run push-release
# NPM
$ npm run push-release

Dapatkan pembaruan dari jarak jauh dan pertahankan perubahan saat ini

 # PNPM
$ pnpm run pull
# NPM
$ npm run pull

Konfigurasi Ekstra

Mengapa Anda Render

Cara mengaktifkan

Letakkan file babel.config.js (terletak di Path src/scripts ) di root proyek dan hapus file .babelrc .

Unkcomment The wdyr Import Line di pages/_app.tsx .

Itu saja! Sekarang Anda dapat memonitore bereaksi ulang kembali!

Cara menghapus instalan

Cukup hapus file babel.config.js dan wdyr.ts , hapus baris impor wdyr di pages/_app.tsx dan hapus instalannya:

 # PNPM
$ pnpm uninstall @welldone-software/why-did-you-render
# NPM
$ npm uninstall @welldone-software/why-did-you-render

? Pohon file

Lihat di bawah pohon file untuk memahami struktur proyek.

Lihat Pohon File

Folder dan file yang ditandai dengan ( ** ) adalah opsional, sehingga Anda dapat menghapus.

 mantine-admin/
┣  .github/                   # GitHub's folder configs **
┣  .husky/                    # Husky's folder
┃ ┣ ? commit-msg               # Commitlint git hook
┃ ┗ ? pre-commit               # Lint-staged git hook
┣  .vscode/                   # VSCode's workspace **
┣  public/                    # Public folder
┃ ┣  static/                  # Static files folder **
┃ ┃ ┣  icons/                 # Icons folder **
┃ ┃ ┣  images/                # Images folder **
┃ ┃ ┣  sounds/                # Sounds folder **
┃ ┃ ┗  videos/                # Videos folder **
┃ ┣  docs/                    # Documentation folder **
┃ ┃ ┣  demo/                  # Demonstrations project **
┃ ┃ ┗  translations/          # Translations folder **
┃ ┣ ? favicon.ico              # Icon tab browser
┣  src/
┃ ┣  app/                   # App pages
┃ ┣  components/              # App Components
┃ ┃ ┗  Motion/                # Mantine-UI components **
┃ ┣  hooks/                   # React Hooks **
┃ ┃ ┗ ? useFetch.ts            # SWR fetch hook (optional) **
┃ ┣  interfaces/              # TypeScript Interfaces
┃ ┣  scripts/                 # Additional scripts **
┃ ┃ ┣ ? babel.config.js        # Babel config with WDYR **
┃ ┃ ┗ ? wdyr.ts                # WDYR file **
┃ ┣  services/                # Services
┃ ┃ ┗  users/
┃ ┃   ┣ ? index.ts             # React Query Configuration
┃ ┃   ┗ ? keys.ts              # React Query Key
┃ ┣  stores/                  # Zustand stores
┃ ┣  styles/                  # Styles folder
┃ ┃ ┣ ? bgImages.ts            # SVG background images **
┃ ┃ ┗ ? theme.ts               # Mantine-UI theme
┃ ┗  utils/                   # Useful functions **
┣ ? .babelrc                   # Default Babel config
┣ ? .editorconfig              # Editor config
┣ ? .eslintignore              # ESLint ignore
┣ ? .eslintrc                  # ESLint config
┣ ? .gitignore                 # Git ignore
┣ ? .versionrc                 # Versioning config
┣ ? .commitlintrc              # Commitlint config
┣ ? jest.config.js             # Jest config
┣ ? jest.setup.js              # Jest setup
┣ ? LICENSE                    # License of the project
┣ ? next-env.d.ts              # Next.js types to TypeScript
┣ ? next.config.js             # Next.js config
┣ ? .prettierrc                # Prettier config
┣ ? README.md                  # Main README
┣ ? renovate.json              # Renovate Bot config **
┣ ? tsconfig.json              # TypeScript config

Lisensi

Meskipun Anda tidak perlu melakukannya, jika Anda menggunakan kembali template ini untuk proyek Anda, saya akan sangat menghargainya jika Anda akan menghargai saya dan memberikan tautan ke profil GitHub saya di footer proyek Anda . Terima kasih!

Proyek ini dilisensikan di bawah lisensi MIT - lihat halaman lisensi untuk detailnya.