sandangel / zit-san

Project overview

Work Breakdown

• Build a simple server for sending email.
• Design a simple Payment page.
• Build UI of Payment page.
• Add Stripe integration on front-end.
• Add Stripe integration on back-end.

Optional:

• Extract reusable components.
• Add PWA

Project structure

Client-side code is place in web-client folder.

• apps: contains applications for projects
• libs: contains reusable libraries that can be extracted from different apps.

Server-side code is place in server folder.

Toolings

Conventional Commit

We could automatically generate changelog by using standardized commit message. For more information please read this link.

Quick start: instead of git commit, use npm run cz or yarn cz

There are 3 scopes in commit message:

• 'payment-page': Payment page user interface.
• 'zit-server': ZIT server side app.
• '' (blank): overall the project.

Typescript:

We should use interface of TS to ensure the type safety for JSON data.

Example:

interface ProUser {
  id: string;
}

Shorten import path in project using tsconfig 'paths' feature.

Example:

// client/apps/zit/Payment.tsx
import PayButton from '../../libs/z-comp/PayButton';

will become

// client/apps/zit/Payment.tsx
import PayButton from '@zehitomo/ui/PayButton';

Stripe

Used for payment methods.

Vue app:

Place a .env.local file in web-client/apps/<app-name>/.env.local which specifies:

• VUE_APP_STRIPE_PUBLISHABLE_KEY to add Stripe publishable key to your Vue app.
• VUE_APP_HOST_URL="http://localhost:8080" for API server address in dev mode.

This file won't be added to git. For more information please read: vue-cli-guide.

Server app:

Place a .env.local file in server/zit which specifies

• SERVER_APP_SECRET for json web token secret.
• STRIPE_SECRET_KEY using Stripe secret key to create charge on the server.
• SERVER_HOST_URL, set to http://localhost:8080 for dev mode and to actual domain for prod mode.

This file won't be added to git too.