mantine analytics dashboard 다운로드 -Mantine mantine analytics dashboard 소스 코드 다운로드

mantine analytics dashboard

AI 소스 코드

UI updates and bug fixes

다운로드

공지 사항

파일 관리자 페이지 UI가 추가되었습니다
최신 7.14.3으로 업데이트 된 Mantine 버전
새로운 다크 모드 변형
새로운 사이드 바 변형, 이제 우리는 전체, 미니 및 전체 붕괴 모드를 가지고 있습니다.

라이브 미리보기
구성 요소 미리보기
중간
제품 로드맵 * 새로운 *

에 대한

수백 개의 UI 구성 요소, 양식, 테이블, 차트, 페이지 및 아이콘과 함께 제공되는 Mantine 7을 사용하여 구축 된 전문 관리 및 대시 보드 템플릿. 이 템플릿은 다음 V14, React, Apex 차트, Mantine DataTable 및 StoryBook을 사용하여 구축됩니다.

미리보기 이미지

이전 릴리스

대시 보드 템플릿의 이전 릴리스는 페이지 라우터 및 Mantine 6을 사용하여 다음 13을 지원합니다. 라이브 데모를 보려면이 링크를 사용하고 미리보기를 사용하고 Repo를 선택 하여이 링크를 사용합니다 - 버전 1

특징

사용자 정의 가능 : 템플릿을 사용자 정의하기 위해 전문가가 될 필요는 없습니다. 우리의 코드는 매우 읽기 쉽고 잘 문서화되어 있습니다.
완전 반응 형 : 모바일, 태블릿 및 데스크탑 지원을 사용하면 사용중인 장치가 중요하지 않습니다. Antd 대시 보드는 모든 브라우저에서 응답합니다.
크로스 브라우저 : 우리의 테마는 Chrome, Firefox, Opera 및 Edge와 완벽하게 작동합니다. 우리는 그들을 지원하기 위해 열심히 노력하고 있습니다.
CLEAN CODE : ANT Design의 지침을 엄격히 따라 최대한 쉽게 통합 할 수 있습니다. 모든 코드가 필기됩니다.
정기적 인 업데이트 : 때때로 새로운 구성 요소, 개선 및 버그 수정이 포함 된 업데이트를받을 수 있습니다.

기술 스택

이 템플릿을 훌륭하게 만들기 위해 다음 패키지를 사용했습니다.

핵심

Next JS v14 : Next.js는 서버 측 렌더링 및 정적 웹 사이트 생성으로 React 기반 웹 응용 프로그램을 제공하는 개인 회사 인 Vercel이 만든 오픈 소스 웹 개발 프레임 워크입니다.
Mantine V7 : Mantine은 React UI 구성 요소 라이브러리입니다. React 및 TypeScript 위에 구축되었으며 고성능 웹 애플리케이션을 구축하기위한 다양한 구성 요소와 후크를 제공합니다.
React v18 : React는 구성 요소를 기반으로 사용자 인터페이스를 구축하기위한 무료 및 오픈 소스 프론트 엔드 JavaScript 라이브러리입니다.
TypeScript v5 : TypeScript는 Microsoft에서 개발 한 무료 및 오픈 소스 고급 프로그래밍 언어로 JavaScript에 선택적 유형 주석이있는 정적 타이핑을 추가합니다.
스토리 북 v7 : 스토리 북은 UI 구성 요소를 분리하기위한 무료 오픈 소스 도구입니다. 웹 개발자가 UI 개발 워크 플로우를 개선하고 더 나은 웹 애플리케이션을 구축하는 데 사용됩니다.
Changeet Cli v2 : Changeet은 내 버전과 변경 로그를 관리하는 데 도움이되는 패키지입니다.
NextAuth v4 : Nextauth.js는 Next.js에서 클라이언트 측 인증에 사용할 수있는 유연하고 안전한 인증 라이브러리입니다.
Tabler Icons v2 : Tabler Icons는 4,700 개가 넘는 아이콘이있는 무료 오픈 소스 아이콘 라이브러리입니다. 아이콘은 현대적인 미학으로 설계되었으며 광범위한 응용 분야에 적합합니다.
Mantine DataTable V7 : Mantine DataTable은 데이터가 풍부한 사용자 인터페이스를 만드는 데 사용할 수있는 React 구성 요소입니다. 어두운 테마를 알고 있으며 Mantine UI를 위해 설계된 테이블 구성 요소입니다.
Lodash V4 : 일관성, 모듈성, 성능 및 엑스트라를 제공하는 JavaScript 유틸리티 라이브러리.
Apex Chart V3 : S ApexCharts는 개발자가 웹 페이지에 대한 대화식 데이터 시각화를 만들 수있는 무료 오픈 소스 JavaScript 차트 라이브러리입니다. 상업 및 비상업적 프로젝트 모두에 사용할 수 있습니다.
dayjs v1 : day.js는 날짜와 시간을 처리하는 JavaScript 라이브러리입니다.
Tiptap V2 : ProSemirror를 기반으로 한 헤드리스, 프레임 워크 공유 및 확장 가능한 풍부한 텍스트 편집기.
FullCalendar v6 : FullCalendar는 300 개가 넘는 설정이있는 JavaScript 이벤트 캘린더입니다. 오픈 소스이며 무료 코어가 있습니다.
DND-KIT V6 : DND-KIT는 REACT를위한 가벼우면서도 모듈 식이며 확장 가능한 드래그 앤 드롭 툴킷입니다. 또한 접근 가능하고 성능이 있습니다.
EMBLA CAROUSEL V7 : EMBLA CAROUSEL은 유체 움직임과 정확한 스 와이프가있는 가벼운 회전식 라이브러리입니다.
REACT SIMPLE MAPS v3 : 반응을 위해 구축 된 SVG 맵 차트 구성 요소.
서기/Nextjs v4 : 서기 Next.js는 서기 반응 주위의 포장지입니다. Clerk React가 제공하는 후크를 사용할 수 있습니다.
COUNTUP V6 : COUNTUP.JS 주변의 반응 구성 요소 래퍼.

데브

Pretier V3 : Pretier는 코드가 자동으로 포맷하여 일관되고 읽기 쉬운 코드 포맷터입니다.
HUSKY V8 : HUSKY는 GIT 후크를보다 쉽게 작업 할 수있는 도구입니다. Pretier는 코드 포맷터입니다.
Lint Steged v15 : Lint-Stage는 오류가없는 한 커밋에 수정을 자동으로 추가합니다.
Postcss v8 : Postcss는 플러그인을 사용하여 CSS를 변환하는 JavaScript 라이브러리입니다. CSS를 추상 구문 트리로 변환 한 다음 JavaScript 객체로 표시됩니다.

빠른 시작

다운로드

이 repo git 클론 https://github.com/design-sparx/mantine-analytics-dashboard.git 을 복제하십시오
Github에서 다운로드하십시오

도구를 구축하십시오

Node.js를 설치해야합니다. node.js가 설치되면 NPM 설치를 실행하여 나머지 템플릿의 종속성을 설치하십시오. 모든 종속성은 node_modules 디렉토리로 다운로드됩니다.

npm install

이제 소스 파일을 수정하고 새 파일을 생성 할 준비가되었습니다. 파일 변경을 자동으로 감지하고 http : // localhost : 3000에서 로컬 웹 서버를 시작하려면 다음 명령을 실행하십시오.

npm run dev

모든 소스 파일을 컴파일, 최적화, 최적화, 미정화 및 Uglify 빌드/

npm run build

파일 구조

지퍼 파일 안에는 다음 디렉토리와 파일이 있습니다. ZIP 파일 내부에서 다음과 같은 디렉토리 및 파일을 찾을 수 있습니다. 소스 파일뿐만 아니라 컴파일 된 배포 및 배포판이 모두 패키지에 포함되어 있습니다.

 mantine-analytics-dashboard/
├── .changeset
├── .github
├── .gitignore
├── .editorconfig
├── .prettierignore
├── .prettierrc
├── README.md
├── CHANGELOG.md
├── LICENSE
├── index.html
├── package.json
├── tsconfig.json
├── next.config.js
├── postcss.config.cjs
├── clerkMiddleware.ts
├── yarn.lock
├── public/
│   ├── mocks/
│   ├── _redirects
│   ├── favicon.ico
├── src/
│   ├── .changeset/
│   ├── .github/
│   ├── .husty/
│   ├── .storybook/
│   ├── .yarn/
│   ├── app/
├────── api/
├────── error.tsx
├────── error.module.css
├────── global.css
├────── layout.tsx
├────── loading.tsx
├────── not-found.tsx
├────── page.module.css
├────── page.tsx
│   ├── components/
│   ├── hooks/
│   ├── layout/
│   ├── providers/
│   ├── public/
│   ├── routes/
│   ├── styles/
│   ├── theme/
│   ├── types/
│   ├── utils/
└──

기고 및 지원

모든 개발자와 애호가가 오픈 소스 관리자 대시 보드 템플릿의 성장에 기여할 수 있도록 환영합니다. 기고는 템플릿의 기능과 품질을 총체적으로 향상시킬 수있는 협업 프로세스입니다. 시작하려면 :

저장소 포크 : 템플릿의 Github 저장소를 자신의 Github 계정으로 포크하십시오.
포크를 복제하십시오. GIT를 사용하여 포크 리포지토리를 로컬 컴퓨터로 복제하십시오.
지점 만들기 : 기여를 위해 기여를위한 새 지점을 만듭니다. 기본 코드베이스를 그대로 유지하십시오.
변경 사항 구현 : 원하는 변경 사항을 작성하거나 새 구성 요소를 추가하거나 기존 기능을 개선하십시오.
커밋하고 밀기 : 변경 사항을 새 지점에 저지르고 Github 포크로 밀어 넣으십시오.
풀 요청 제출 : 포크 리포지토리에서 메인 템플릿 저장소에 풀 요청을 제출하십시오. 귀하의 변경 사항은 검토되고 잠재적으로 병합됩니다.

문제를보고하고 도움을 구합니다

템플릿을 사용하는 동안 문제가 발생하거나 도움이 필요한 경우 다음과 같은 도움을드립니다.

문제 추적기 : Github Repository의 문제 탭을 방문하여 버그를보고하거나 개선 사항을 제안하거나 템플릿의 측면에 대한 설명을 찾으십시오.
커뮤니티 상호 작용 : 지원, 지침 및 통찰력을 위해 Github 토론과 같은 플랫폼에서 템플릿 커뮤니티에 참여하십시오.