Moving Forward Party's Election Support Website

The primary goal of this website is to promote the party’s candidate profiles and policies.
mfp-thumbnail.svg

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.

ReactJs

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

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.

Figma

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

Kubernetes

Kubernetes is an open-source container orchestration system for automating software deployment, scaling, and management.

About

Fullstack software development for Moving Forward Party’s Election Support Website 2023. The primary goal of this website is to promote the party’s candidate profiles and policies. Our responsibilities are Setting up Infrastructure, CMS Backoffice, Frontend development, UI/UX, Data importing, and CI/CD.

webp_mfp_section_1_23a216e30d.webp

Candidate Search System

Users can use the search box to find MFP Candidate in their area and see their profile, goal, and policy easily and accurately.

webp_mfp_section_2_b3a913083b.webp

Interactive Candidate Map

For the desktop version user can hover on customized Thailand map, and they will see candidate of that district. For mobile user can pinch/zoom/tap on the map to see the information like version desktop.

webp_mfp_section_3_954d984051.webp

Candidate Profile

After click on the candidate user can see the profile information data that come from our backoffice. Admin can enter many fileds of the data such as Pastwork,education,vision. In the backoffice we also develop 'Facebook connect' button so we can see facebook feeds of that candidate on the website by using Facebook API.

webp_mfp_section_4_6c7d0d6781.webp

Policy Search

User can typing on the search box by for finding policy that they interested.

webp_mfp_section_5_881d87865f.webp

Content management backoffice

We also setting up the headless cms so admin can update,create data on the website. This project have many dynamic data types such as candidate,district,province,policy.

webp_mfp_section_7_25158276e3.webp

300 policy data importing

Because initiality the client already working policy on Microsoft and save to docx. It should be hard if they need to input them again on the backoffice , so we writing some code to importing/transforming all microsoft word file on to the backoffice.

webp_mfp_section_8_824cf3d8ac.webp

Policy Sharing

Interest in policy and want to share them to others? We also build policy sharing feature which user can pick the policy,avatar

and the system will generating to special link that the thumbnail will contains the policy and your selected avatar

webp_mfp_section_6_80f6195b18.webp

Post launch UI/UX improment.

After launch we scan Twitter and got some feedbacks from the user somes are good ,somes are the things that we can improve. For the better user journey - we quickly design the solution and development them base on the feedbacks we saw.

webp_mfp_section_9_95ab7915d1.webp
webp_logo_7388b714ae.webp
Til it's done
facebook
+66-82-456-4755