Bangkok Election 2022

Display the real-time data of Bangkok’s Governor Election. The website also contains the comparison page of each candidate and other contents about Bangkok Election 2022 by pulling data from wordpress API.

Visit website

Built with

NextJs

Next.js is an open-source web development framework created by the private company Vercel providing React-based web applications with server-side rendering and static website generation.

Figma

Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows.

AWS - Amazon web services

Amazon Web Services, Inc. is a subsidiary of Amazon that provides on-demand cloud computing platforms and APIs to individuals, companies, and governments, on a metered, pay-as-you-go basis. Oftentimes, clients will use this in combination with autoscaling.

Nodejs

Node.js is a cross-platform, open-source server environment that can run on Windows, Linux, Unix, macOS, and more. Node.js is a back-end JavaScript runtime environment, runs on the V8 JavaScript Engine, and executes JavaScript code outside a web browser.

ReactJs

ReactJs is front-end JavaScript library for building user interfaces based on components.

About

Fullstack software development for Bangkok election 2022 website. The primary goal of this website is to display the real-time data of Bangkok’s Governor Election. The website also contains the comparison page of each candidate and other contents about Bangkok Election 2022 by pulling data from wordpress API. Our responsibilities are Setting up Infrastructure, CMS Backoffice, Frontend development, UI/UX, and CI/CD.

Interactive Candidate Map

In the desktop version, users can hover on our customized Bangkok map, and they will see winning candidate of each district. The color of the map will reflect on the color of the winning candidate.

Candidate Ranking List

Website will display candidate ranking and theirs profile picture along with percentage bar that reflect the total vote number of each candidates.

Global Search

There also global search function that user can search for related district and related canddiate.

Candidate comparison

This website has candidate comparison feature. The purpose is to let the user display information of the candidate side by side so they can decide on that they gonna vote.

Election Content

There aloso election content pages that display content from workpointtodays.com by using wordpress api

High traffic

The traffic that comming in to the website has been around 1million page views for only 4 hours.