https://github.com/hiroppy/web-app-template
A minimal web service template 🎃 "npx create-app-foundation@latest" !
https://github.com/hiroppy/web-app-template
next next-auth nextjs-template opentelemetry prisma-orm react-hook-form scaffolded stripe taiwindcss templates typescript
Last synced: 10 months ago
JSON representation
A minimal web service template 🎃 "npx create-app-foundation@latest" !
- Host: GitHub
- URL: https://github.com/hiroppy/web-app-template
- Owner: hiroppy
- License: mit
- Created: 2024-02-14T14:22:06.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-31T13:58:44.000Z (11 months ago)
- Last Synced: 2025-03-31T14:57:48.137Z (11 months ago)
- Topics: next, next-auth, nextjs-template, opentelemetry, prisma-orm, react-hook-form, scaffolded, stripe, taiwindcss, templates, typescript
- Language: TypeScript
- Homepage: https://hiroppy.github.io/web-app-template/
- Size: 4.75 MB
- Stars: 138
- Watchers: 4
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
️️A minimal template for web app 🎃
From Zero to Service, Build with Best Practices, Minimal Code, and Essential Tools
📜 Read The Docs 📜
Installing this template automatically sets up the following libraries/tools. By saving you significant effort, it allows you to focus entirely on writing your product code.🤗
| | | | | |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| **App** |
Next.js |
Tailwind CSS |
NextAuth.js |
React Hook Form |
| |
Zod |
OpenTelemetry |
Prisma |
PostgreSQL |
| |
Stripe | | |
| | | | |
| **Tools** |
TypeScript |
pnpm |
Biome |
Prettier |
| |
Knip |
EditorConfig |
lefthook |
Docker |
| | | | |
| **Testing** |
Vitest |
Testing Library |
Playwright |
Testcontainers |
| | | |
| **Others** |
GitHub Actions |
Renovate |
VSCode |
Copilot Edits |
Please read the features provided by this template first! 👉
[Challenges Solved](https://hiroppy.github.io/web-app-template/introduction/challenges-solved.html)
## Prerequisites
- Node.js v20 or higher
- [Docker](https://docs.docker.com/engine/install/)
## Installation
When installing the repository, you can skip the setup section, as the init script will do the equivalent of setup.
### Using CLI (recommended)
```sh
$ npx create-app-foundation@latest
```
The CLI creates a project directory and run internal/init script so it's easy to get started.
### Using GitHub Template
This repo is a GitHub template, so click the ["Use this template"](https://github.com/new?template_owner=hiroppy&template_name=web-app-template) button to create your repo. Then, you need to execute the below to finish setting it up.
```sh
$ node .internal/setup/init.mjs
```
### Opt-out
The following items will be asked whether they are required when the project is initialized:
- Sample Application Code
- Dockerfile
- E2E Testing
- Observability feature
- Stripe
## Setup
```sh
# enable corepack
$ npm run setup
# install deps
$ pnpm i
# create ".env" and modify environment variables
$ cp .env.sample .env
```
## Development
```sh
$ pnpm dev
```
### Debugging Stripe
1. Create a subscription [here](https://dashboard.stripe.com/test/products?active=true&create=product&source=product_list) and get `price_id`.
2. Modify the environment variables. The test API key is [here](https://dashboard.stripe.com/test/apikeys).
```
STRIPE_SECRET_KEY=
STRIPE_WEBHOOK_SECRET=
STRIPE_PRICE_ID=
```
3. [Install stripe CLI](https://docs.stripe.com/stripe-cli) to bypass the webhook.
4. Execute the following command in another terminal.
```sh
$ stripe listen --forward-to localhost:3000/api/payment/webhook
```
5. After signing in, you can go to the `http://localhost:3000/me/payment` page to see how to make a payment.
## Production
```sh
$ pnpm db:up
$ pnpm build
$ pnpm start
```
### Observability
This template uses Jaeger as a tracing platform. The local environment doesn't require `TRACE_EXPORTER_URL` environment value.
```sh
# open Jaeger
$ open http://localhost:16686/
```
## Test
### Unit Test
```sh
$ pnpm test
$ pnpm test:watch
```
### E2E Test
A build task must be executed before running tests to bypass JWT logic.
```sh
# install chrome
$ pnpm exec playwright install chrome
# build using test environments since it needs to change encode/decode functions of next-auth
$ pnpm build:test
$ pnpm test:e2e
$ pnpm test:e2e:ui
```
## Database
```sh
$ pnpm db:migrate
$ pnpm db:reset
# view the database items
$ pnpm db:studio
```
## Links
- [Database ER diagram](/prisma/schema/ERD.md)
- [Web App Template](https://hiroppy.github.io/web-app-template/)