An open API service indexing awesome lists of open source software.

https://github.com/idea2app/idea2app.github.io

idea2app 团队官方网站
https://github.com/idea2app/idea2app.github.io

Last synced: 4 months ago
JSON representation

idea2app 团队官方网站

Awesome Lists containing this project

README

          

# idea2app OWS

[React][1] project scaffold based on [TypeScript][2], [Next.js][3], [Bootstrap][4] & [Workbox][5]. And this project bootstrapped with [`create-next-app`][6].

[![CI & CD](https://github.com/idea2app/idea2app.github.io/actions/workflows/main.yml/badge.svg)][7]

[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)][8]
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)][9]

## Technology stack

- Language: [TypeScript v5][2] + [MDX v3][10]
- Component engine: [Next.js v16][3]
- Component suite: [Bootstrap v5][4]
- PWA framework: [Workbox v6][5]
- State management: [MobX v6][11]
- CI / CD: GitHub [Actions][12] + [Vercel][13]
- Monitor service: [Sentry][14]

## Best practice

1. Install GitHub apps in your organization or account:
1. [Probot settings][15]: set up Issue labels & Pull Request rules
2. [PR badge][16]: set up Online [VS Code][17] editor entries in Pull Request description

2. Click the **[Use this template][18] 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][8] button** on the top of ReadMe file, then an **online VS Code development environment** will be started immediately

4. Set [Vercel variables][19] as [Repository secrets][20], then every commit will get an independent **Preview URL**

5. Recommend to add a [Notification step in GitHub actions][21] for your Team IM app

6. Remind the PMs & users of your product to submit **Feature/Enhancement** requests or **Bug** reports with [Issue forms][22] instead of IM messages or Mobile Phone calls

7. Collect all these issues into [Project kanbans][23], then create **Pull requests** & add `closes #issue_number` into its description for automation

## Getting Started

First, run the development server:

```bash
npm i pnpm -g
pnpm dev
```

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

[API routes][24] can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in `pages/api/hello.ts`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as API routes instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation][25] - learn about Next.js features and API.
- [Learn Next.js][26] - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository][27] - your feedback and contributions are welcome!

## Deployment

### Environment variables

| name | file | description |
| :----------------------: | :----------: | :---------------------: |
| `JWT_SECRET` | `.env.local` | [API authorization][28] |
| `SENTRY_AUTH_TOKEN` | `.env.local` | [Official document][29] |
| `SENTRY_ORG` | `.env` | [Official document][30] |
| `SENTRY_PROJECT` | `.env` | [Official document][30] |
| `NEXT_PUBLIC_SENTRY_DSN` | `.env` | [Official document][31] |
| `GITHUB_TOKEN` | `.env.local` | [Official document][32] |
| `LARK_APP_ID` | `.env.local` | [Official document][33] |
| `LARK_APP_SECRET` | `.env.local` | [Official document][33] |

### Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform][13] from the creators of Next.js.

Check out our [Next.js deployment documentation][34] for more details.

### Docker

```shell
pnpm pack-image
pnpm container
```

[1]: https://react.dev/
[2]: https://www.typescriptlang.org/
[3]: https://nextjs.org/
[4]: https://getbootstrap.com/
[5]: https://developers.google.com/web/tools/workbox
[6]: https://github.com/vercel/next.js/tree/canary/packages/create-next-app
[7]: https://github.com/idea2app/idea2app.github.io/actions/workflows/main.yml
[8]: https://codespaces.new/idea2app/idea2app.github.io
[9]: https://gitpod.io/?autostart=true#https://github.com/idea2app/idea2app.github.io
[10]: https://mdxjs.com/
[11]: https://mobx.js.org/
[12]: https://github.com/features/actions
[13]: https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme
[14]: https://sentry.io/
[15]: https://github.com/apps/settings
[16]: https://pullrequestbadge.com/
[17]: https://code.visualstudio.com/
[18]: https://github.com/new?template_name=idea2app.github.io&template_owner=idea2app
[19]: https://github.com/idea2app/idea2app.github.io/blob/34a68d5c3a21665c5971edff5aa7c208647d1566/.github/workflows/main.yml#L9-L11
[20]: https://github.com/idea2app/idea2app.github.io/settings/secrets/actions
[21]: https://github.com/idea2app/Lark-Next-Bootstrap-ts/blob/363e023e5dd472c8ea53ec96eac25ec5122e667b/.github/workflows/Lark-notification.yml#L39
[22]: https://github.com/idea2app/idea2app.github.io/issues/new/choose
[23]: https://github.com/idea2app/idea2app.github.io/projects
[24]: https://nextjs.org/docs/api-routes/introduction
[25]: https://nextjs.org/docs
[26]: https://nextjs.org/learn
[27]: https://github.com/vercel/next.js/
[28]: https://github.com/auth0/node-jsonwebtoken?tab=readme-ov-file#jwtsignpayload-secretorprivatekey-options-callback
[29]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-configuration-files-for-source-map-upload
[30]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#use-environment-variables
[31]: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#create-initialization-config-files
[32]: https://docs.github.com/en/rest/authentication/authenticating-to-the-rest-api#authenticating-with-a-personal-access-token
[33]: https://open.larksuite.com/document/server-docs/getting-started/api-access-token/app-access-token-development-guide#95c7f5f5
[34]: https://nextjs.org/docs/deployment