Bangkok Budgeting

🌎 Environment

• Production: Coming soon...
• Staging: https://wevisdemo.github.io/bkk-budgeting/

💻 Tech stack

• NuxtJS with Vue 2 and TypeScript
• TailwindCSS

Note: ESLint and Prettier is recommended

⚽ Working style

Note: Pull rebase git pull --rebase often. Before you start coding and pushing!

• We use Github issue to track the progress.
  • Please assign yourself to the issue that you are working on.
  • I don't want to force "HOW" to implement the issue and we can discuss everything on the issue.
  • Communication language doesn't matter. Feel free to use Thai or English.
• We use Trunk-based development.
  • No braches, we all push to the main branch.
  • If the commit is related to a specific issue, add issue id in the commit message eg. #21 Add button components
  • Continuous Integration: don't leave your code without pushing overnight, push as much as you can without breaking the build.
  • Linter and formatter will run on commit, while build will be run on push so you can't push if it fail.
• Encourage to write component test with TDD (Test driven development) but it's not mandatory.
• Each time the code is pushed to the main branch, Github Action will build and deploy to the staging environment.
• Use asynchonous communication. Let's try not to have meeting if not necessary.
  • For issue related discussion, please use Github issue
  • Other discussion can be done in slack

📂 Directory structure

Use pascal-case for every file name since Linux (eg. Github Action runner) is not case-incensitive, in contrary to Mac and Windows.

• /components Vue components
  • Put in the root if it's shared between pages
  • Put in the /components/<page>/ if it's only used in that page
  • If components is too big or getting duplicated, you should split into several component which can also be grouped in sub-folder
• /data JSON promises and related data, including example one before fetching script is implemented.
• /models Data types (interface, enum, etc.) sharing across the project
• /pages Represent Nuxt routing
• /static Static assets such as images
  • Before adding new assets, check first if it's already exist here.
  • $config.path.base can be used to reference static path (or base path)
  • $config.path.images can be used to reference static/images path

    <img :src="`${$config.path.images}/status/nodata.png`"

  • For SVG that can change the color (eg. button icon on hover), recommend in use inline svg with currentColor and Tailwind color preset
• /tests Test file
  • Recommend to mimick project structure eg. /tests/components/component-name.test.ts

💅 Styling and design system

• We used WeVis Design System which provide
  • Utility classes for typography
  • Vue component
• For other styling customization beyond WeVis design system, use Tailwindcss
  • Color is defined in tailwind.config.css which naming should be related to Figma
  • Configuration is also available on http://localhost:3000/\_tailwind/ when dev server is running

THANK YOU FOR ALL THE CONTRIBUTION ❤️