- 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
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.
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.
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';
Used for payment methods.
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.
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 tohttp://localhost:8080
for dev mode and to actual domain for prod mode.
This file won't be added to git
too.