ScamRadar MY

Inspiration

Online scams in Malaysia have become a serious problem. In 2025 alone, 74,744 scam cases were officially reported, causing billions of ringgit in losses. Scammers use tactics such as Macau scams (pretending to be authorities), fake crypto investments, phishing links, and fake work-from-home job offers to trick people every day. Therefore, this raised my concern in helping citizens to prevent these kind of scams from happening to them.

How it works

It works in three main steps. First, users can paste a suspicious message or upload screenshots of chats, SMS messages, or posters for AI analysis. Using the free version of the Gemini 2.5 Flash API, the system checks for common Malaysian scam patterns, such as fake NSRC numbers, Touch ’n Go phishing pages, or police impersonation threats. It then provides a risk score, warning signs, safe indicators, and recommended actions. Second, users can anonymously report scams by selecting their state, scam category, and adding a short description. These reports are securely stored in a cloud database using Supabase with protected security policies. Third, all reports are displayed on an interactive Leaflet.js map, where scam activity in different states is shown using animated markers. The marker size and color change based on the number of reports in each area, and users can click them to view the types of scams happening there. To make it reliable for demos and presentations, the project also includes a dual-mode setup. If cloud API keys are unavailable, the app automatically switches to a browser-based simulation with local storage, ensuring the platform still works smoothly without crashing.

How we built it

Our development process focused on building a fast, secure, and visually appealing Single Page Application (SPA). The frontend was developed using React 19 and Vite for faster performance and smoother development. Instead of relying on large CSS frameworks, we created a custom glassmorphism-inspired design using Vanilla CSS, Flexbox, and CSS Grid, combined with a dark navy theme for a modern and trustworthy appearance. For scam detection, we integrated the free-tier Gemini 2.5 Flash API, which analyzes both text and uploaded screenshots. The AI returns structured results such as risk scores, warning signs, summaries, and recommended actions in a clean JSON format to ensure reliable responses. Community scam reports are stored securely in a Supabase PostgreSQL database with Row Level Security (RLS) enabled to protect data while still allowing anonymous submissions. We also built an interactive Leaflet.js map that displays scam activity across Malaysia using animated markers that change size and color based on report density. Clicking on a marker shows the types of scams reported in that state. To ensure the application works smoothly during demos or local testing, we added a fallback system that switches to local simulations and browser storage when API keys are unavailable. A built-in settings panel also allows developers or judges to easily connect their own Gemini and Supabase API keys directly from the browser.

Challenges we ran into

The project utilizes the cutting-edge React 19 environment. When we went to install react-leaflet to handle map integration, we ran into major peer dependency conflicts. The library failed to compile during our automated production build pipelines because it was strictly expecting React 17 or 18. Therefore, We decided to bypass React wrapper libraries completely. We installed vanilla leaflet and integrated it directly by attaching it to a raw React container useRef. We carefully managed the map's lifecycle, including handling mounting, updating pins when new reports arrive, and cleaning up the instance on unmount inside a useEffect hook. This completely solved the compilation errors, resulting in a zero-conflict, high-performance integration.

Accomplishments that we're proud of

We successfully built a dual-mode system that allows the application to run in both live cloud mode and offline simulation mode without crashing. This makes the app easy for judges and developers to test, even without API keys. We also created an interactive dark-themed Leaflet.js map with animated markers that change size and color based on scam activity, helping users easily visualize scam hotspots across Malaysia. For scam detection, the system uses Gemini 2.5 Flash to analyze both text and screenshots in under two seconds, providing reliable risk scores, warning signs, and safety recommendations. The interface was designed with accessibility in mind, supporting both English and Bahasa Malaysia with a clean and user-friendly layout suitable for all age groups. In addition, we implemented an automated GitHub Actions CI/CD pipeline that automatically deploys updates to GitHub Pages whenever changes are pushed to the repository.

What we learned

Building ScamRadar MY was a valuable learning experience in both engineering and design. We learned how to integrate vanilla JavaScript libraries like Leaflet.js directly into React 19 using hooks such as useRef and useEffect, which helps avoid dependency issues and gives better control over the DOM. We also adopted a secure “zero-trust” approach by avoiding hardcoded API keys and instead allowing users to input their own keys via local storage, making the app safer and more flexible. In addition, we discovered the importance of using Gemini’s structured JSON output, which ensures clean and reliable AI responses without extra parsing work. We improved deployment by configuring Vite with relative paths, making the app fully portable for platforms like GitHub Pages. Lastly, we learned that bilingual support (English and Bahasa Malaysia) is essential from the start to ensure the app is accessible to all users, especially non-technical and elderly citizens.

What's next for ScamRadar MY

We plan to improve ScamRadar MY by integrating official anti-scam APIs from agencies like PDRM, MCMC, and Bank Negara Malaysia, allowing the system to instantly check phone numbers and bank accounts against verified blacklists during AI analysis. We also aim to build WhatsApp and Telegram bots so users can forward suspicious messages or screenshots directly and receive instant scam risk results without using the website. In addition, we will introduce state-level alert systems that detect spikes in scam reports and send push notifications or emails to warn users in affected areas. To improve safety and data quality, we plan to add a community moderation portal where verified users can review reports, remove sensitive information, and confirm real threats before they appear on the public map. Finally, we hope to enhance AI capabilities with advanced visual pattern recognition to detect repeated scam designs, such as fake job posters or phishing pages, even when details are slightly changed.

Built With

• geminiapi
• github
• leaflet.js
• postgresql
• react19
• supabase
• vanillacss
• vite