👀 Parliament Watch

Citizens are watching

Table of Content

• ⭐ Goal
• 🌎 Environments
• 🍱 Tech Stack
  • Front-end
  • Local development
  • Deployment pipeline
• 🪄 Useful Commands
  • Start SvelteKit
  • Start Histoire
  • Generate a new component
• 🗃️ Directory Structure
• 🍭 Design System
  • Typography
  • Colors
  • Components
  • Icons
• 💾 Data Models
• 🤝 Contributing Guideline
• 📜 License and Terms of Use

⭐ Goal

We want to record and visualise the Thai parliament information including politicians, assemblies, bills, voting processes, and promises.

This project can be seen as a renovated combination of They Work for Us, Law Watch, and Promise Tracker which aim to support several election era.

🌎 Environments

Name	URL
Branch Preview	Provided by Cloudflare Pages
Staging (main branch)	https://parliament-watch.pages.dev
Production	-

🍱 Tech Stack

Front-end

• Svelte + SvelteKit
• TypeScript
• Carbon Design System (v10) + Carbon Components Svelte
• TailwindCSS
• Histoire for the components documentation

Local development

• Yarn v1 as a package manager
• Husky and lint-staged will
  • Lint (ESLint) and format (Prettier) code before commiting
  • Validate that commit message is align with conventional commit using commitlint
  • Run svelte-check before pushing
• For VSCode user, format on save is enabled and prettier-vscode extension will be recommended when open the project.
• Hygen for a code generation

Deployment pipeline

• Cloudflare Pages will automatically deploy staging (main branch) and per branch preview.

🪄 Useful Commands

Start SvelteKit

Start the project in development mode

yarn dev

Start Histoire

to see/develop custom components from Histoire's stories

yarn story:dev

Generate a new component

For a shared component

yarn gen:component

src/components/ComponentName/ directory will be created with the follwing files:

• ComponentName.svelte for the component source code.
• ComponentName.story.svelte for the Histoire's story file. Follow a guide on writing stories.

🗃️ Directory Structure

• /_templates Hygen's code generation templates
• /.husky Husky's git hooks
• /src main source codes
  • /components Svelte's components
  • /mocks Mock data, while we still don't have backend
  • /models Main data structure defined with TypeScript interface
  • /routes Sveltekit's routes
  • /styles Stylesheets, including custom Carbon Design System, tailwind and fonts
• /static static assets such as logos

🍭 Design System

The project design system is based on Carbon Design System v10 with some modification. Custom theme is defined with scss in src/styles/carbon/. To reduce overhead on development, we compile Carbon related stylesheet into src/styles/carbon/precompiled.css with yarn compile:sass command.

Typography

• The utility classes is globally available as declared in typography.scss
• See Figma file

Colors

• tailwind.config.js define utility classes based on color function name according to the Carbon's theme (see Figma file)
• colors.scss define global sass variable of all color palette (see Figma file)

Components

• Use Carbon Components Svelte
• We have custom shared component available in src/components/.
  • To see shared components' story, open Histoire in local with yarn story:dev or browse it in the staging/stories
  • See all planned component in Figma file.
• If the component is not yet developed:
  • If the component is used by only a specific route, create it in src/components/route-name-and-sub-route-if-exist/
  • If the component is shared, run yarn gen:component to generate a new component. Don't forget to update a story file for the component documentation.

Icons

• Use Carbon Icons Svelte
• We have customed icon available in src/components/icons, using the same props as Carbon's icon. (Also avaiable in Histoire)
• See Figma file

💾 Data Models

ER Diagram and TypeScript's interfaces are avaiable in src/models

🤝 Contributing Guideline

Please read CONTRIBUTING.md

📜 License and Terms of Use

Read more at WeVis's Terms of Use (in Thai)