Realtime Thailand's Election Report website - Vote66.
Highlights
70 Million requests
Interactive visualization
Frontend optimization
Interactive dynamic map
Our carefully crafted methodology ensures that every component of our technology stack is perfectly aligned with your specific needs, business objectives, and operational requirements
This project focused on delivering real-time election reporting for Thailand's national elections.
The platform was required to manage a massive influx of API requests, ensuring both accuracy and reliability at high speeds.
The platform was required to manage a massive influx of API requests, ensuring both accuracy and reliability at high speeds.
Our team implemented advanced data processing techniques to handle live vote counts and updates with real-time accuracy. By utilizing microservices architecture and cloud technologies, we engineered a scalable system that could support millions of users simultaneously.
Services & deliverables
Frontend development
Server-side logic implementation
Modular application architecture
User experience and interface design
Scalable IT infrastructure solutions
Efficient project delivery oversight
At Tillitsdone, we're all about helping businesses like yours succeed in the digital world. We offer a wide range of services, from building websites to creating custom apps. Whatever your tech needs, we've got the skills to make it happen. Take a look at what we can do for you - we might just have the perfect solution to take your business to the next level.
Tillitsdone provides a comprehensive suite of services designed to address the multifaceted requirements of our diverse clientele. Our extensive expertise across multiple domains enables us to deliver bespoke solutions that catalyze success. We invite you to explore our service offerings and discover how we can propel your business towards prosperity.
Features
70 Million requests
Interactive visualization
Frontend optimization
Interactive dynamic map
Backend optimization
Party simulation
Interactive visualization
Custom animation
Micro interactions
Unit testing , Load testing
Responsive design
We understand that each business is unique. We work hand-in-hand with you to create solutions tailored to your specific goals, ensuring the final product aligns perfectly with your vision. We'll be right here with you every step of the way.
We ensure transparent communication, keeping you informed and engaged throughout the entire project. We'll be right here with you, maintaining open lines of dialogue at all times.
Handling Heavy Traffic
Performance-Driven Focus
Using microservices architecture and cloud technology, we built a system capable of managing millions of simultaneous requests.
We developed a project aimed at providing real-time election reporting for Thailand's national elections. The platform was built to manage a huge volume of API requests while ensuring speed, accuracy, and reliability. Utilizing microservices architecture and cloud technology, we constructed a scalable system to support millions of users concurrently. Additionally, the frontend was meticulously optimized for smooth animation rendering across both mobile and desktop devices.
1/4
Overview Section
Information at a Glance
Displays a summary of statistics using a custom half-circle infographic.
Switching Data Sources
The election data originates from two sources, so users need the ability to select which data source is displayed. We added a button to switch data sources at the bottom of the half-circle infographic. Tapping it will instantly switch all the data displayed on the website.
Hover to Reveal Details
Hovering over small circles reveals tooltips showing party logos. Clicking opens a detailed party modal.
Half-Circle Infographic
Displays a central infographic in a half-circle design.
Winning Parties Display
The right side showcases winning parties with leader photos. The size of each element reflects ranking, with higher ranks displayed in larger sizes. Users can also click on a party to view detailed stats.
2/4
Performance & Stability
Speed & Integrity
Vote 66 needed to fetch data rapidly while providing users a smooth, lag-free experience on the website.
Handling Heavy Load
The website handled 70 million API requests, thanks to the integration of CDN, S3, and Redis.
Real-Time Data Sync
The website’s data synced from the source every 20 seconds, loading quickly without delays.
Optimized Animation & Rendering
We optimized the DOM to reduce re-rendering, ensuring a smooth user experience and fluid animations.
Frontend Bottleneck Detection
Using Chrome DevTools, we inspected and resolved frontend bottlenecks that caused lag on the website.
Backup Plans
In case of server failure, a backup plan was in place to keep the website running smoothly. We used an AWS S3 bucket to store JSON data, with frontend logic to retrieve data directly from S3 if API requests failed.
Ensuring Data Integrity with Unit Testing
To ensure accuracy, we implemented automated unit testing with around 100 test cases, verifying correct data processing and display on the website.
3/4
District's view
Interactive Election Overview
This section provides a real-time visual representation of the 2023 Thai national election results, featuring an interactive map and ranked party list.
Map Visualization
An interactive map of Thailand displays electoral results with colored circles representing different parties across regions. The map allows users to visualize party dominance geographically.
Party Rankings
A ranked list on the right shows political parties sorted by the number of seats won. Each party is displayed with its logo, name, and a bar indicating its relative seat count.
District dots
Each dot's represent the district which shown in differet color the color will changed base on winning party of that district.
Real-Time Data
The section updates in real-time, ensuring users see the most current election data as it becomes available.
User Interaction
Interactive elements, such as the map and 'See All' button, allow users to explore detailed information about specific regions or parties.
Visual Summary
A summary section displays the total number of representatives elected, helping users quickly grasp the overall results.
4/4
District Information Popup
Detailed District Election Data
This popup provides detailed information about the leading candidates in a selected district, including their ranking, party affiliation, and a profile photo.
District and Address
The popup displays the district name, address, and district number, helping users identify the specific location and region being referenced.
Candidate List
A list of the top three candidates in the district, ranked by their current standing. Each entry includes the candidate's rank, name, party affiliation (indicated by color and logo), and a profile photo.
Visual Indicators
The popup uses visual elements such as color-coded circles to represent the leading party in the district. The use of colors helps users quickly identify party dominance.
Real-Time Update Popup
Information and statistic inside the popup also updates in real-time, so users don't need to refresh the page.
Vote66 Goals and Objectives
Summarize the key goals and objectives of Vote66 to ensure effective real-time election reporting and high system performance.
Real-Time Election Reporting
Develop a platform to provide real-time reporting for Thailand's national elections, handling a high volume of API requests with speed and accuracy.
Scalable and High-Performance System
Implement microservices architecture and cloud technologies to support millions of concurrent users and ensure smooth performance even during peak traffic, managing up to 70 million page views per hour.
Interactive and User-Friendly Interface
Create an engaging frontend experience with features like dynamic infographics, interactive maps, and detailed district information popups, optimized for both mobile and desktop devices.
Data Integrity and Reliability
Ensure real-time data synchronization, robust performance under load, and backup solutions to maintain data accuracy and website functionality. Implement automated testing to verify correct data processing and display.
Tech & Tools
Leveraging the latest technologies and frameworks, we build robust and scalable solutions that meet your unique business requirements.
Web Application Frontend
Our carefully selected frontend technology stack is designed to create highly responsive, intuitive, and engaging user interfaces.
These technologies work in harmony to enhance the overall user experience, ensuring smooth interactions and optimal performance across various devices and platforms.
These technologies work in harmony to enhance the overall user experience, ensuring smooth interactions and optimal performance across various devices and platforms.
Backend
Our backend technology stack is designed to handle server-side operations with efficiency, scalability, and security, ensuring reliable and high-performance solutions.
Cross Platform Application
Our cross-platform application development leverages advanced frameworks to deliver versatile mobile applications that maintain consistent performance and user experience across various platforms.
By utilizing these frameworks, we ensure that applications are highly performant, visually appealing, and reliable, regardless of the platform on which they are deployed.
By utilizing these frameworks, we ensure that applications are highly performant, visually appealing, and reliable, regardless of the platform on which they are deployed.
Cloud Providers
We leverage leading cloud platforms to deploy, manage, and scale applications effectively.
By utilizing these cloud services, we ensure that our applications perform optimally, are highly available, and can scale according to demand.
Our approach involves integrating various cloud tools and services to enhance performance, reliability, and overall efficiency in managing and operating applications.
By utilizing these cloud services, we ensure that our applications perform optimally, are highly available, and can scale according to demand.
Our approach involves integrating various cloud tools and services to enhance performance, reliability, and overall efficiency in managing and operating applications.
Integrations
Our integration capabilities enable seamless connectivity with a variety of external services and platforms, enhancing the functionality and user experience of our applications.
By leveraging these integrations, we provide users with enhanced features and streamlined workflows that connect applications with widely-used tools and services.
By leveraging these integrations, we provide users with enhanced features and streamlined workflows that connect applications with widely-used tools and services.
Design Tools
We use a range of design tools to create applications that are both functional and aesthetically pleasing.
From collaborative design platforms and digital whiteboards to powerful image editing and 3D creation tools, our design process ensures that every aspect of the user experience is carefully crafted and visually engaging.
From collaborative design platforms and digital whiteboards to powerful image editing and 3D creation tools, our design process ensures that every aspect of the user experience is carefully crafted and visually engaging.
Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.