purple admin ui

Purple Admin UI

Mo-Dunn Admin Template using Next.js and Tailwind

introduction

NEXT.JS + Tailwind + Ant Design -based Admin Template made by collecting popular libraries so that anyone can develop the back office page easily and quickly. Admin development has only been 10 years ...

Warning this is work in program. If you have the necessary descriptions or features/bugs, please register in the issue. We will update after review.

Recommended for these people?

1. Back -end programmer who is bothered to design to make an admin page
2. If you need a template that tie a library that is frequently used based on Next.js/React
3. Of

demo

https://admin-ui.purple.io/login

Log in with OAuth (Google/Github) or ID/Password (Admin/Admin).

Creation of projects

You can click the Deploy button to duplicate the source and deploy it to the Vercel.

You can start the project by downloading the source or entering the following command:

 # npm
npx create-next-app --example " https://github.com/purpleio/purple-admin-ui "
# yarn
yarn create next-app --example " https://github.com/purpleio/purple-admin-ui "
# pnpm
pnpm create next-app --example " https://github.com/purpleio/purple-admin-ui "

Default

Copy the .env.example file to create a .env file.

cp .env.example .env

key	explanation	example
Nextauth_URL	Service URL	http: // Localhost: 3000
Nextauth_secret	Random secret key	Issuance of random creative
Github_client_id	Github oauth client ID
Github_client_secret	Github oauth client secret
Google_client_id	Google OAuth Client ID
Google_client_secret	Google OAuth Client Secret
Next_Public_API_ENDPOINT	API Server End Point	http: // Localhost: 3000
Next_Public_codenbutter_site_id	Pop -up plugin	Code & Butter Site ID

Sample

The sample code allows you to check the basic usage.

API Server (Mock Data)

In general, the backend server is often separated, but it is a sample code for a simple test.

• SRC/PAGES/API/SAMPLE/DASHBOARD.TS: Statistics Inquiry
• SRC/PAGES/API/SAMPLE/Products/Index.ts: Product List
• SRC/PAGES/API/Sample/Products/[ID] .TS: Product Crud API

API client

This is a sample code that collects functions for calling the API in the front end.
Manage code and Type related to the API.

• src/client/sample/dashboard.ts: statistical inquiry API
• src/client/sample/product.ts: Product Crud/Type

page

Dashboard and product Crud sample page.
Details are divided into components into src/components/page/[동일한 페이지 경로] .

• src/pages/index.tsx: dashboard
• SRC/PAGES/Sample/Product/List.tsx: List of Product
• SRC/PAGES/Sample/Product/New.TSX: Product Registration
• SRC/PAGES/SAMPLE/PRODUCT/Edit/[ID] .tsx: Product modification

Component

This is a sample code that makes various libraries mix.
You can check the basic functions such as statistics, search, list, and input form.

• SRC/Components/Page/Index/Calendar-sample.tsx: Calendar sample component
• SRC/Components/Page/Index/Statistic-SAMPLE.TSX: Statistical Sample Component
• src/components/page/sample/product/product.tsx: Product input form (creation/modification common use) component
• SRC/Components/Page/Sample/Product/Product-list.TSX: Product List Component
• SRC/Components/Page/Sample/Product/Product/Product-Search.TSX: Product Search Component

Sample image

• Public/sample: sample image

Technology stack & function

Framework

• Next.js - React.js -based framework created by Vercel
• Auth.js - OAuth (Google/Github) or ID/Password Library

Platforms

• VERCEL - NEXT.JS application distribution service

UI

• Tailwind CSS-Utility-FIRST CSS Framework
• Ant Design - UI library that supports various administrator components
• Lucide - SVG icon collection
• Framer Motion - Animation Library
• REACT COUNTUP -Counting Animation
• Next/FONT -Webfont Optimization Library

Form Control

• Quill - Wijiwick Text Editor
• CODEMROR -Code Editor

Code Quality

• TypeScript - Strongly Typed Programming Language That Builds on JavaScript
• Prettier - Opinated Code Formatter
• ESLINT - The Plugable Linting Utility for JavaScript and JSX

Miscellaneous

• Pretendard-System-UI alternative fonts available on any platform
• Day.js - Date/Time Library
• SWR -HOOKS for data inquiry
• KY -Small and elegant http client
• Numeral -Number Formeting Library
• CODENBUTTER -Notice pop -up

Project configuration

Architecture

• All pages except certification are provided as a static page. (SSR use x) Even if the API dies, the page appears.
• Business logic is provided as a backend API and the front end is well expressed and delivered.
• The part related to the form actively uses the Form component of the Ant Design.

Directory

For efficient management, the directory structure is defined as follows.

 ┌─ src
│  ├─ client # API 호출 코드
│  ├─ components
│  │  ├─ layout # 기본 레이아웃
│  │  ├─ page # 페이지별 세부 컴포넌트
│  │  └─ shared # 공통 컴포넌트
│  ├─ fonts # 웹폰트
│  ├─ lib
│  │  ├─ auth # 인증 관련 코드
│  │  └─ hooks # react hooks
│  ├─ pages # 페이지
│  ├─ styles # 기본 스타일
│  └─ types # 타입 정의
└─ public # 이미지등 정적 파일

src/client

• Use functions defined in client directory without calling FETCH directly from each component
• Surits use SWR and POST or PUT uses ky .

src/components/layout

• Layout definition

src/components/page

• Definition of components used only on certain pages
• The components used in pages/profile are defined in components/page/profile
• The style of component is written as module.css in the same folder

SRC/Components/Shared

• Definition of components commonly used

src/fonts

• Save web fonts

lib/auth

• Certification -related code definition

lib/hooks

• Custom hook definition

Custom component

DefaultTable

DefaultModal

Formsearch

FormSection

Formgroup

FieldInline

Screenshot

limits

• IE non -support

Author

• Subicura (@subicura)