Dragonsheets

Online shopping platform for Dungeons & Dragons character sheets.

A demo project to learn payment integrations with Stripe and authentication with OpenID Connect.

demo.mp4

Technologies

Shared

• TypeScript for type-checking
• Prettier for formatting
• ESLint for linting
• pnpm for dependency and monorepo management

Front-end

• Vite for building
• React for the user interface
• Mantine for pre-built components
• React Query for data caching
• ky for data fetching
• TanStack Router for routing

Back-end

• Node.js for the runtime
• NestJS + Express for the web-server framework
• Keycloak + OpenID Connect for authentication
• Stripe for payment processing

Development

Install Node, pnpm and dependences:

curl -L https://git.io/n-install | bash
n auto
npm i -g pnpm
pnpm i

Create an environment variables file:

cp ./packages/api/.env.template ./packages/api/.env

Create an account on Stripe, enable test mode, then for each asset in ./packages/api/src/assets create a product with a title, description and price and then copy its product ID to the corresponding entry in ./packages/api/src/config/constants.config.ts.

Copy your Stripe API key to the STRIPE_SECRET_KEY variable in ./packages/api/.env.

Run Keycloak:

cd ./packages/api
docker compose up -d

Open Keycloak and create a new realm named dragonsheets. Under Realm settings -> Login -> Login screen customization enable User registration and Remember me.

Create an OpenID Connect client with client ID dragonsheets-webapi, only the Standard flow option enabled and Client authentication option set to ON. Set Valid redirect URIs to http://localhost:5173/auth/login-success, Valid post logout redirect URIs to http://localhost:5173/auth/logout-success and Web origins to http://localhost:5173.

Copy the client secret to the AUTH_OIDC_CLIENT_SECRET variable in ./packages/api/.env.

Run the front-end web UI and back-end API in development mode:

pnpm run --filter web --filter api dev

License

This project is licensed under the MIT license.