wevisdemo/promise-tracker

Thai politicians and parties promise tracker

🤞 WeVis Promise Tracker

Thai politicians and parties promise tracker

🌎 Environment

• Production: https://promisetracker.wevis.info
• Staging: https://wevisdemo.github.io/promise-tracker

💻 Tech stack

• NuxtJS with Vue 2 and TypeScript
• TailwindCSS
• Jest and Vue Test Utils
• NocoDB as a database

📐 Architecture

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.

flowchart TD
    A[NocoDB] -->|yarn fetch-data| B[JSON files in /data]
    B -->|yarn dev| C[Nuxt dev environment]
    B -->|yarn build| D[Static site generated by Nuxt]

Loading

• Promises and related data is store on WeVis's NocoDB which allow non-dev to maintain the data
• Use yarn fetch-data to download data from NocoDB, transform into JSON files in /data
• JSON files then will be loaded by Nuxt from yarn dev and yarn build command

📂 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 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 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

⚽ Working style

• We use Github issue to track the progress.
  • Please assign yourself to the issue 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 main branch.
  • If the commit is related to a specific issue, add issue id in the commit message eg. #21 Add button components
  • Pull rebase git pull --rebase often. Before you start coding and pushing.
  • Continuous integration: don't leave your code without pushing overnight, push as much as you can without breaking the build.
  • Linter and formater will be run on commit, while test and 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 main, 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

🤝 License and Terms of Use

Please read WeVis's Terms of Use

THANK YOU FOR ALL THE CONTRIBUTION ❤️

promise-tracker's Issues

[page] Explore

Depends on

• #9
• #11
• #12
• #13
• #10
• #15

[component] Filter Panel

Idea

• Can be a stateless component
• Get current active filters from props (PromiseStatus and PromiseStatus is available in model/promise.ts)
• When the apply button is clicked, fire change event with new active filters
• When the clear button is clicked, fire clear event

Used by

• #7

feat(/explore?topic=ประเด็น): เพิ่ม Cover ของหน้าประเด็น

ทำให้หน้าประเด็นเด่นขึ้นมา โดยมี Cover เป็นของตัวเอง และมีคำอธิบายเพิ่มเกี่ยวกับประเด็นนั้นๆ

[page] About

Waiting for content

[page] Promise

Idea

• Use Nuxt's dynamic route with promise Id
• Provide custom head on each promise, link to OG image based on status

Depends on

• #12
• #15
• #10

[other] OG image generation

Idea

• Use Nuxt's dynamic route with promise id param
• Use a headless browser script to take a screenshot. Example here
• Add to existing promise page

Depends on

• #15
• #22

[component] Topic Group

Idea

• Receive a list of promises, title text, and number of promises to show per page as a prop
• Use state to store a current page for pagination function
• ดูประเด็นนี้ทั้งหมด just need to emit event on click

Depends on

• #12

Used by

• #7

feat(/) เพิ่มการแสดงผลคำสัญญาได้มากกว่า 1 สมัย

หลังเลือกตั้ง 66 (และในอนาคตต่อๆ ไป) จะมีรัฐบาลชุดใหม่ อยากให้เลือกดูเป็นชุดได้

[other] Data preparation

• Data structure
• Data fetching strategies (from where? -> to JSON file?)

[component] Promise Card

Idea

• Only use the state to store collapsed-expanded state.
• Collapse-expand button can be hidden using prop (for separated promise page)
• Can use sharer from the design system; with url to /promises/:id

Used by

• #7
• #22

[component] Status Explanation

No props are needed. BG should be transparent to be flexible.

Used in

• #5
• #7

[page] Guide

Depends on

• #10

[component] Promises Overview

Idea

• This is a huge issue. Can be split into several components such as Chart, Tab, ActiveFilter, StatusExplanationDialog, etc. as you preferred
• Only use the state to store active tab and is status dialog open (Open by ข้อมูลเพิ่มเติม button), the rest is passed through props
• Fire the event when the filter is changed (user click remove active filter)

Depends on

• #21
• #20

Used by

• #7

[component] Button

Idea

• 3 styles can be defined from props

[component] Party Card

• Stateless component, all data can be provided with props
• Since the link to explore page will also apply filter, filters must be able to pass by query parameters

Depends on

• #21

Used by

• #5

feat(/explore) เพิ่มให้ 1 คำสัญญา จัดประเภทได้มากกว่า 1 ประเด็น (Max 3 ประเด็น)

• เพิ่ม tag ใน Design
• เวลาเสิร์ช เจอในทุกประเด็นที่ tag ไว้

[component] Link Banner

Idea

• Stateless
• Have props for the icon image and every text
• Have a prop for 2 styles of background-color

Depends on

• #21

Used by

• #5
• #6
• #7

[page] Index

Depends on

• #15
• #14
• #10