Mantine Admin

Мантиновый администратор

---

---

Демо →

Разверните свою собственную копию этого шаблона всего за несколько кликов!

Введение

Этот шаблон имеет кучу папок, примеров кода и конфигураций. Не стесняйтесь редактировать или удалять их, включая этот Readme!

Настройте и наслаждайтесь!

? Функции

Этот проект включает в себя все последние инструменты и хорошие практики в веб -разработке!

Рамки

• ⚛ Next.js - Полная структура реагирования для гибридного и серверного рендеринга

Извлечение данных

• ? KY - крошечный и элегантный HTTP -клиент на основе API браузера Fetch API
• ✳ React Query - крючки для извлечения, кэширования и обновления асинхронных данных в React

Государственное управление и крючки

• ? Zustand -небольшое, быстрое и масштабируемое решение для управления состоянием Bearbones с использованием упрощенных принципов потока
• ? реагируя -сборы основных крючков реагирования

Система дизайна и анимация

• ? Mantine-UI -простая, модульная и доступная библиотека компонентов, которая дает вам строительные блоки для создания ваших приложений React
• Значки таблеток - коллекция популярных значков для реагирования проектов

Валидация формы

• ? React Hook Form -Performant, гибкие и расширяемые формы с простым в использовании проверки
• ZOD -TypeScript-первая проверка схемы со статическим выводом

Тесты

• ? Шутка - восхитительная структура тестирования JavaScript с акцентом на простоту
• ? Библиотека тестирования - простые и полные тестирующие утилиты, которые поощряют хорошие методы тестирования

Дизайн -шаблоны

• ⛔ Eslint - найдите и исправляйте проблемы в коде JavaScript
• ? Красотляется - фактическая форматала кода, поддержка нескольких языков и редакторов кода
• ? Husky - современные родные крючки Git стали легкими
• ? LINT-CLEST -запустите Linters против поставленных файлов GIT и не позволяйте? Слив свою кодовую базу
• ? Commitlint - помогает вашей команде придерживаться конвенции о коммит
• ️ Стандартная версия - утилита для выпуска версий с использованием генерации SEMVER и ChangeLog, работающего в результате обычных коммитов

Анализ

• ? ??

▶ ️ Начиная

? Создание нового репозитория на GitHub

1. Нажмите кнопку « Использовать этот шаблон »
2. Настройте свой новый репозиторий и нажмите кнопку « Создать репозиторий из шаблона »
3. Теперь вы можете клонировать сгенерированный репозиторий на свою локальную машину:

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

Установка

Прежде чем вы сможете начать разработку своего Super Application, вам необходимо установить зависимости проекта.

Перейти к корню проекта:

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

Для следующих шагов выберите менеджер пакетов по вашему выбору и измените команды, содержащиеся в сценариях package.json . Смотрите их документацию для получения дополнительной информации:

• PNPM (рекомендуется)
• Npm

Установите все зависимости проекта:

 # PNPM
$ pnpm install
# NPM
$ npm install

⌨ Развитие

Как только все зависимости будут установлены, вы можете запустить локальный сервер разработки:

 # PNPM
$ pnpm dev
# NPM
$ npm run dev

Теперь просто код!

Производство

После применения изменений вы можете создать сборку для тестирования и/или развертывания в своей производственной среде.

Сделайте производственную сборку:

 # PNPM
$ pnpm build
# NPM
$ npm run build

А затем запустите сборку:

 # PNPM
$ pnpm start
# NPM
$ npm start

Просмотреть больше команд, которые вы можете использовать

Пронзительный

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

Ворс и исправить

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

Тест

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

Проверка типа

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

Формат

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

Интерактивный инструмент интерактивного обновления

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

Обновите все зависимости

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

Выпустить в качестве основной версии

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

Выпустить как второстепенную версию

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

Выпуск как патч версия

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

Опубликовать релиз

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

Получите обновления от удаленного и поддерживать текущие изменения

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

Дополнительные конфигурации

Почему ты сделал

Как активировать

Поместите файл babel.config.js (расположенный в пути src/scripts ) в корне проекта и Delete .babelrc .

Неудовлетворенная линия импорта wdyr на pages/_app.tsx .

Вот и все! Теперь вы можете мониторировать React Re-Renders!

Как удалить

Просто удалите файлы babel.config.js и wdyr.ts , удалите строку импорта wdyr на pages/_app.tsx и удалите ее:

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

? Дерево файла

Смотрите ниже дерево файлов, чтобы понять структуру проекта.

Просмотреть дерево файлов

Папки и файлы, помеченные ( ** ), являются необязательными, так что вы можете удалить тогда.

 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

Лицензия

Хотя вам не нужно, если вы повторно используете этот шаблон для своих проектов, я буду признателен за это, если бы вы поверили мне и предоставили ссылку на мой профиль GitHub в нижнем колонтитуле вашего проекта . Спасибо!

Этот проект лицензирован по лицензии MIT - для получения подробной информации см. Страницу лицензии.

---

Дайте звезду, чтобы сохранить этот проект!

❤ Спасибо за внимание!

? ‍ Хороший взлом!

---