Stack | Preview | Notes | Flow | Packages | Docs | Tools | Goals | Scripts | Env | Tips |
---|
Note See the stack for the mobile app
Home | Login form | Sample error |
---|---|---|
Store | Profile | Book preview |
---|---|---|
v.mp4 |
Chat | Cart | Stripe |
---|---|---|
Note Preview the mobile app
Note A cutting-edge technologies driven π―, fullstack, cross-plaftorm app, hosted on π‘ Railway
Acts as a fake store with possibility to chat π¬ with other users:
- account registration, fb / credentials login
- user support (forgot password, lost activation link)
- store fulfilled with paid and free books
- payments with stripe or paypal
- push notifications to stay up to date with what other writes
- possibility to send images / videos / files
- searchbar for books
- preview of books inside the profile tab
- targets both web and mobile app users
- UX: infinite loaders (store, chat), proper error handling, push notifications, fully responsive, jump to the last unread message (chat)
graph TD
api-->turborepo
%% --------------------------
turborepo[\Turborepo/]-->apps
turborepo-->lib("@online-library")
%% --------------------------
config(config)-->lib
core(core)-->lib
logic(logic)-->lib
lib-->apps((apps))
%% --------------------------
railway[\Railway/]-->db[("PostgreSQL")]
db[("PostgreSQL")]-->sequelize[\Sequelize/]
sequelize-->server
railway-->server
Cypress[\Cypress/]-->web
apps-->server(server)
apps-->web(web)
apps-->native(native)
Firebase[\Firebase/]-->native
CircleCI-->Cypress
online-library-releases-->native
CircleCI[\CircleCI/]-->online-library-releases{{online-library-releases}}
%% --------------------------
auth("auth (jwt)")-->api{API}
express("express (swagger)")-->api
graphql("graphql (apollo)")-->api
socket("socket.io")-->api
Note See distribution flow for the mobile app
@online-library/config | @online-library/core | @online-library/logic |
---|---|---|
|
|
|
Note Docs are available in the development environment
REST API (OpenAPI) | GraphQL API |
---|---|
Swagger.mp4 |
autogenerated with a few additional comments (common Apollo Studio Explorer) |
- every push to the master branch triggers the autodeployment on Railway + CircleCI build workflow (linting, e2e tests, new release of the mobile app that requires an approval)
- @trivago/prettier-plugin-sort-imports for keeping a consistent order of imports (custom flow)
- graphql-codegen for autogenerating the code (hooks & types) from gql schema & documents
- @graphql-tools/merge for auto merging resolvers & type defs into schema (custom wrapper to detect duplicated resolvers)
- swagger-autogen for autogenerating the API docs (allow skipping YAML hell π)
- Budibase (low code platform) for creating a simple UI panels (perfect choice for admin panels)
- Mermaid for diagrams
- TS errors translator
- json to ts/jsonschema converter
- @faker-js/faker for seeding db with fake data
- picsum.photos for generating random images
- CRA ~> Vite
- add e2e tests (cypress)
- switch stack graphql + sequelize ~> tRPC + prisma
- make use of storybook.js
- run app in a Docker container
- integrate Sentry for monitoring the app
- finish setup for i18n
- add WebRTC for video chat
- replace errors popup with react-toastify
- tweak seeding db flow
Note See goals for the mobile app
Note To run locally, install proper version of nodejs (use
nvm
/ see.nvmrc
), fill.env
(see Environment variables and.env-example
), triggeryarn install
andyarn dev
Warning Remember to bump release tag version (
config.yml
) when pushing to the master branch othwerise CircleCI will fail
command | description |
---|---|
yarn start |
triggers start script in /server ~> runs server production build |
yarn start:testing |
triggers start:testing script in /server ~> runs server production build for CircleCI + Cypress purposes |
yarn dev |
triggers dev pipeline ~> launches apps, bundles all packages (watchmode) |
yarn lib:dev |
triggers filtered dev pipeline ~> bundles only packages (watchmode) |
yarn lint |
triggers lint pipeline ~> ts & eslint & stylelint check through all apps and packages |
yarn test |
triggers test pipeline ~> runs tests for mobile app |
yarn test:e2e |
triggers test:e2e script in /web ~> runs e2e tests for web app |
yarn cypress |
triggers cypress script in /web ~> runs e2e tests for web app |
yarn build |
triggers build pipeline ~> build all apps, bundles all packages |
yarn postbuild |
triggers yarn lib script ~> makes sure that all packages are built on top of the newest docs |
yarn lib |
triggers lib:build pipeline ~> bundles all packages and updates API (OpenAPI) docs (must keep certain order of scripts) |
yarn android |
triggers android script in /native ~> runs the android app |
yarn metro |
triggers metro script in /native ~> runs the metro server |
yarn server |
triggers dev script in /server ~> runs the express server |
yarn codegen |
triggers graphql codegen ~> generates hooks & types from graphql schema |
yarn postinstall |
triggers yarn lib script ~> makes sure that build pipeline runs without any errors |
command | server | web | each package |
---|---|---|---|
yarn start |
runs the server production build (serves also the web app) | β | β |
yarn start:testing |
runs the server production build with NODE_ENV set to testing (needed for CircleCI + Cypress ) |
β | β |
yarn dev |
runs express server with NODE_ENV set to development |
runs the react app | bundles the package (watchmode) |
yarn lint |
lint & ts check | lint & ts & stylelint check | lint & ts check |
yarn test:e2e |
β | runs e2e tests | β |
yarn build |
builds the express server & copies (copyfiles) gql related files to /dist |
builds the react app | bundles the package |
Note See scripts for the mobile app
details | server | web |
---|---|---|
cloudinary API credentials | CLOUDINARY_API_KEY CLOUDINARY_API_SECRET CLOUDINARY_NAME |
β |
PostgreSQL credentials | DATABASE_HOST DATABASE_NAME DATABASE_PASSWORD DATABASE_USERNAME |
β |
secret key for jsonwebtoken |
JWT_KEY |
β |
email address for the email sender (eg. no-reply@online-library.com) | NODEMAILER_USERNAME |
β |
nodemailer testing credentials (nodemailer.createTestAccount ) |
NODEMAILER_TEST_USER NODEMAILER_TEST_PASSWORD |
β |
SMTP provider (nodemailer credentials) |
MAILJET_USER MAILJET_PASSWORD |
β |
paypal API credentials | PAYPAL_CLIENT_ID PAYPAL_CLIENT_SECRET |
β |
web-push package credentials (web-push generate-vapid-keys ) |
PRIVATE_VAPID_KEY VITE_PUBLIC_VAPID_KEY |
VITE_PUBLIC_VAPID_KEY |
fb app credentials | FACEBOOK_APP_SECRET VITE_FACEBOOK_APP_ID |
VITE_FACEBOOK_APP_ID |
stripe API credentials | STRIPE_SECRET_KEY |
VITE_STRIPE_PUBLISHABLE_KEY |
set to true to re-autogenerate db models from existing tables (generates all methods for associations) |
SEQUELIZE_AUTO |
β |
set to true to seed db with some random books |
SEED_BOOKS |
β |
set to true to seed db with a test user |
SEED_USER |
β |
Note See envs for the mobile app
Note To be able to run e2e tests, all server env variables are also required on the CircleCI
variable | details |
---|---|
GITHUB_TOKEN |
personal access token for Github CLI orb |
RELEASE_KEYSTORE_BASE64 |
release keystore converted to base64 (more info) |
RELEASE_KEYSTORE RELEASE_KEY_ALIAS RELEASE_KEY_PASSWORD RELEASE_STORE_PASSWORD |
keystore related details (more info) |