next-dev-team / umijs-next-dashboard-boilerplate

React Js Typescript, Antd design boilerplate

Online Demo

Demo linke here

username: admin
pass: admin

Note: Our API using NestJs with mongoDb with heroku server free so the first time it will be abit slow loading due to heroku might be sleep for the first request.

Online dev environment

use Gitpod, a free online dev environment for GitHub.

Local Environment Prepare

Install node_modules:

yarn

Provided Scripts

Ant Design Pro provides some useful script to help you quick start and build with web project, code style check and test.

Scripts provided in package.json. It's safe to modify or add additional script:

Start project

yarn start

Build project

yarn build

Check code style

yarn lint

You can also use script to auto fix some lint error:

yarn lint:fix

Test code

yarn test

Ant Design Pro

This project is initialized with Ant Design Pro. Follow is the quick guide for how to use.

More

You can view full document on our official website. And welcome any feedback in our github.

umijs-next-dashboard-boilerplate's Issues

intergrade antd-theme-setting-drawer

• for development purpose and preview layout and theme

integrate sun-editor with custom upload image to server

intergrade with generator-tool

• I will intergrade generator-tool with UI tool just click and put it path it will generate in our scaffold like crud table , page , store.....

implement GraphQl with codegen + GrahpQl Devtool+ google extension

flow: user just copy graphQl from DevTool+ google extension then past to .gql in src/.... it will watch and generate hook, type... without writing manually.

• setup codegen with apollo graph + devtool
  - install all dependency
  - set up client Apollo provider+ devtool config
  - install google extension
• write script in pakage.json to watch or generate

update docs

intergrade and refactor next-dev library

• some of common thing like component, utils, hook will using from our library instead of copy it every project scaffold

intergrade dark mode

optimize bundle size and speed

-[ ] splitChunks strategy

• Reduce patch size by remove browser target

• Configure externals: For some large-scale dependencies, such as chart libraries, antd, etc., you can try to import related umd files through the configuration of externals to reduce compilation consumption.

• Adjust SourceMap generation method

intergrade Antd chart

add gitpod online IED

update decency

• apollo graph ql

intergrade role management

• will intergrade dynamic role with back-end side

custom Antd pro form and table crud component

• will use tab for crud instead of using modal and go to detail page