Move Forward Party promise tracker
- Production: coming soon
- Staging: https://mfp-promise-tracker-fls3ugj2l-kaogeek.vercel.app/
- NuxtJS with Vue 2 and TypeScript
- TailwindCSS
- Jest and Vue Test Utils
- ... as a database
The project use static site generator (SSG) strategy. In the pipeline, API is called once before the build time, which mean no API will be called after the static site is generated. To update the site after the data is updated, site needed to be built and deployed again.
- JSON files then will be loaded by Nuxt from
yarn dev
andyarn build
command
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 on 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 group 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 referencestatic
path (or base path)$config.path.images
can be used to referencestatic/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
- Recommend to mimick project structure eg.
- 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 https://localhost:3000/\_tailwind/ when dev server is running
- Color is defined in
Core repo : WeVis Team
Design : K.Pond
Dev : K.Kawin, K.Ble, K.Hart
Content : K.Air, K.Meen
This repo has been modified from WeVis Github for public use.