https://github.com/idea2app/react-mobx-bootstrap-ts
React project scaffold based on TypeScript, MobX & Bootstrap, which is inspired by WebCell scaffold.
https://github.com/idea2app/react-mobx-bootstrap-ts
bootstrap mobx parcel react typescript
Last synced: about 1 month ago
JSON representation
React project scaffold based on TypeScript, MobX & Bootstrap, which is inspired by WebCell scaffold.
- Host: GitHub
- URL: https://github.com/idea2app/react-mobx-bootstrap-ts
- Owner: idea2app
- Created: 2021-02-07T17:15:38.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-11-22T18:08:54.000Z (6 months ago)
- Last Synced: 2025-11-22T20:19:55.086Z (6 months ago)
- Topics: bootstrap, mobx, parcel, react, typescript
- Language: TypeScript
- Homepage: https://idea2app.github.io/React-MobX-Bootstrap-ts/
- Size: 5.69 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: ReadMe.md
Awesome Lists containing this project
README
# React-MobX-Bootstrap-ts
[React][1] project scaffold based on [TypeScript][2], [MobX][3] & [Bootstrap][4], which is inspired by [WebCell scaffold][5].
[][6]
[][7]
[][8]
## Technology stack
- Language: [TypeScript v5][2]
- Component engine: [React v18][1]
- State management: [MobX v6][3]
- Component suite: [React Bootstrap v2][10]
- HTTP Client: [KoAJAX v1][11]
- PWA framework: [Workbox v7][12]
- Package bundler: [Parcel v2][13]
- CI / CD: GitHub [Actions][14] + [Pages][15]
## Extra components
1. [Component Sample](src/component/TSXSample.tsx)
2. Rich-text editor
- [HTML version][18]
- [JSON version](src/component/Editor.tsx)
3. [GitHub logo](src/component/Git/Logo.tsx)
4. [GitHub card](src/component/Git/Card.tsx)
## Best practice
1. Install GitHub apps in your organization or account:
1. [Probot settings][16]: set up Issue labels & Pull Request rules
2. [PR badge][17]: set up Online [VS Code][18] editor entries in Pull Request description
2. Click the **[Use this template][19] button** on the top of this GitHub repository's home page, then create your own repository in the app-installed namespace above
3. Click the **[Open in GitHub codespaces][7] button** on the top of ReadMe file, then an **online VS Code development environment** will be started immediately
4. Set [Vercel variables][20] as [Repository secrets][21], then every commit will get an independent **Preview URL**
5. Recommend to add a [Notification step in GitHub actions][22] for your Team IM app
6. Remind the PMs & users of your product to submit **Feature/Enhancement** requests or **Bug** reports with [Issue forms][23] instead of IM messages or Mobile Phone calls
7. Collect all these issues into [Project kanbans][24], then create **Pull requests** & add `closes #issue_number` into its description for automation
## Development
```shell
npm i pnpm -g
pnpm i
npm start
```
## Deployment
```shell
pnpm build
```
[1]: https://react.dev/
[2]: https://www.typescriptlang.org/
[3]: https://mobx.js.org/
[4]: https://getbootstrap.com/
[5]: https://github.com/EasyWebApp/scaffold
[6]: https://github.com/idea2app/React-MobX-Bootstrap-ts/actions/workflows/main.yml
[7]: https://codespaces.new/idea2app/React-MobX-Bootstrap-ts
[8]: https://gitpod.io/?autostart=true#https://github.com/idea2app/React-MobX-Bootstrap-ts
[10]: https://react-bootstrap.github.io/
[11]: https://github.com/EasyWebApp/KoAJAX
[12]: https://developers.google.com/web/tools/workbox
[13]: https://parceljs.org/
[14]: https://github.com/features/actions
[15]: https://pages.github.com/
[16]: https://github.com/apps/settings
[17]: https://pullrequestbadge.com/
[18]: https://code.visualstudio.com/
[19]: https://github.com/new?template_name=React-MobX-Bootstrap-ts&template_owner=idea2app
[20]: https://github.com/idea2app/React-MobX-Bootstrap-ts/blob/8e796c6e7dc485fe4a68b59fcbffb9d224236bf4/.github/workflows/main.yml#L10-L12
[21]: https://github.com/idea2app/React-MobX-Bootstrap-ts/settings/secrets/actions
[22]: https://github.com/kaiyuanshe/kaiyuanshe.github.io/blob/bb4675a56bf1d6b207231313da5ed0af7cf0ebd6/.github/workflows/pull-request.yml#L32-L56
[23]: https://github.com/idea2app/React-MobX-Bootstrap-ts/issues/new/choose
[24]: https://github.com/idea2app/React-MobX-Bootstrap-ts/projects