React + React Router v6 + Redux + TypeScript + Vite

Icon (Only SVG)

Mock

• mockjs.com

Login

• Super/super123
• Admin/admin123
• User01/user01123

Requirement checklist:

• Global application (support multi-language, fully responsive)
• Secure page, authorization view and action
• Beautiful UI (modern vibe, fancy transitions and animations)
• Optimized performace (quick page loading time, small package size, least re-render)
• Used latest technologies but still can integrate basic technologies

What is included

Build tool: vite

Technologies:

Core

• react
• typescript (support developer with typesafe and hint when coding)
• react-router-dom v6
• redux

Plugin:

• compress (reduce package size for quick deployment)
• unplug (support developer to use component without import)
• mock (support team to quick demo when backend is not ready yet)
• visualizer (visual package size, see what can be further size-optimized)

UI

• unocss (inline css style like tailwind)
• antdesign (component library for react)

Features:

• Fully customize font
• SVG icon
• Except datepicker, pagination, dropdown all is self-implemented.
• Component with empty state, loading state, full content state
• Multi language (text, number format, datetime format, currency format)
• Dynamic route (auth route, view permission)
• JWT verify
• Transition + animation
• Third party library integration sample code