Vite-React-MobX-Bootstrap.ts

React project scaffold based on TypeScript, MobX & Bootstrap, inspired by WebCell scaffold and built with Idea React.

Technology stack

• Language: TypeScript v6
• Component engine: Preact v11 with React compatibility
• State management: MobX v7
• Component suite: Idea React v3 on Bootstrap v6
• HTTP Client: KoAJAX v3
• PWA framework: Workbox v7 via vite-plugin-pwa
• Package bundler: Vite v8
• CI / CD: GitHub Actions + Pages

Extra components

1. Component samples
2. Rich-text editor
   • HTML version
   • JSON version
3. GitHub logo
4. GitHub card
5. Paginated repository table and infinite-scroll list
6. ECharts-JSX chart
7. Download task manager

Best practice

1. Install GitHub apps in your organization or account:
   1. Probot settings for issue labels and pull request rules
   2. PR badge to enable online VS Code editing from pull requests
2. Use the Use this template button to create a repository in the app-installed namespace.
3. Open the repository in GitHub Codespaces for an online VS Code environment.
4. Set Vercel variables as repository secrets to create an independent preview URL for each commit.
5. Add a notification step in GitHub Actions for your team messaging app.
6. Ask users to submit feature requests or bug reports through issue forms.
7. Collect issues in project boards and reference them in pull requests with closes #issue_number.

Development

pnpm install
pnpm dev

Run the type check and lint-staged checks:

pnpm test

Build and preview the production app:

pnpm build
pnpm preview

References

1. Why you should use Class component?
2. Why you should use MobX?
3. Why you should use Vite?