I Built a Lotto Betting App

I wanted to build something fun, a simple game where you can simulate lotto betting without spending real money. That became TryLotto, an app that fetches live PCSO lotto results daily across five major categories (6/42, 6/45, 6/49, 6/55, 6/58) and lets you place mock bets with virtual coins. You get a daily coin allowance, pick your numbers, and track your bet history with win/loss comparisons against actual draw results. You can save favorite combinations for quick re-betting and earn additional coins through partner integrations. The app is live at lotto.vikaph.com.

The app uses React 19 with Vite 8, Tailwind CSS v3, Zustand for state, React Router, and Supabase for the backend with Postgres and Deno-based Edge Functions. A Supabase Edge Function runs on a cron schedule at midnight Manila time to scrape lotto results from the source website, extracting winning numbers, jackpot amounts, and winner counts from HTML tables. The scraper parses the actual draw date from the page rather than assuming today's date, since not all lotto categories draw daily. Since users are not authenticated, coin balances and bet history are stored in localStorage with encryption and a checksum-based approach to detect tampering. Coins reset daily with a live countdown timer, and the bet history page fetches historical results from Supabase to compare against stored bets, highlighting matched numbers and categorizing outcomes as wins (3+ matches), losses, or pending. The Talus integration lets walkers transfer coins earned from physical steps into TryLotto for betting, creating a fun loop between staying active and playing.

Building this taught me a few things. Time zones matter: using Asia/Manila consistently across the scraper, cron schedule, and client-side date logic prevented subtle bugs with daily resets. Scraping is fragile: HTML structure changes, pages may not be updated yet, and draw schedules vary by day, so building fallbacks made the scraper more resilient. And UX details build trust: a 3-second minimum loading animation on refresh, even when data comes from cache, makes the app feel more deliberate, while showing pending status instead of "loss" for bets without results yet prevents confusion. The interface uses a lotto-themed design system with custom Tailwind colors, lotto ball components, dark mode support, and mobile-responsive layouts with React Portals for modals. TryLotto is not affiliated with PCSO and is for entertainment purposes only.

Looking for practical business tips? Check out BusinessMindedPinoy.com for MSME business strategies and resources.