React App Starter

You shouldn't start a wonderful app from scratch every time.

~ TJ

Features:

• Out of box API mocking.
• Out of box Authentication.
• Beautiful Data fetching.
• Easy Form validation.
• Out of box Utility-First CSS.
• Out of box CI/CD.
• Out of box lint and code format.
• Out of box Infrastructure as Code.
• A little of Components.
• ... and more

Built with

• NextJS: the React Framework for Production
• Tailwindcss: rapidly build modern websites without ever leaving your HTML
  • daisyUI: Tailwind Components
• React-hook-form: performance, flexible and extensible forms with easy-to-use validation
• React-query: performant and powerful data synchronization for React
• React-table: Lightweight and extensible data tables for React
• Storybook: build bulletproof UI components faster
  • Chromatic: visual testing
• react-testing: simple and complete testing utilities that encourage good testing practices
• Mock Service Worker: API mocking of the next generation
• And other standard tools as Eslint, Prettier, Lint-staged

Install

yarn install

Usage

Create .env file base on sample.env then run below command

cp sample.env .env

About the secret token, ask @ThaddeusJiang

yarn dev

Run tests

yarn test

Run storybook

yarn storybook

Deploy to Vercel

Author

• Website: https://ThaddeusJiang.com/
• Twitter: @ThaddeusJiang
• Github: @ThaddeusJiang

Auth Providers

github

• Callback URL: <domain>/api/auth/callback/github
• https://next-auth.js.org/providers/

Memo

其实我想用 Ramdajs ，但是我也不是特别熟。 暂时先继续使用 lodash/fp 吧。

关于报表可视化，需要评估 d3js ， 目前使用 react-charts 。

folder structure

.
├── client // UI clients
│   └── apis
├── components // UI Components
├── data
│   ├── reals
│   └── mocks // mock data
├── mocks // Mock Service Worker handlers
├── modules
│   ├── customer
│   │   └── apis
│   │   └── components
│   └── task
│   │   └── apis
│       └── components
├── pages
│   ├── api // Auth API
│   │   └── auth
│   ├── customers // UI Pages
│   ├── ...
│   ├── ...
├── public
├── styles
├── types
└── utils
└── tailwind.config.js