Arcade Point Calculator

• 

  Index Page

• 

  Full Output

💡 Inspiration The Google Cloud Arcade facilitates a massive gamified learning experience, but for many participants, manually tracking "Arcade Points" across various badges, trivia, and skill challenges is a headache. We wanted to eliminate the guesswork and provide a "one-click" solution for learners to see exactly where they stand in their journey toward the high-tier prizes.

🚀 What it does The Arcade Point Calculator is a full-stack web application that allows users to paste their Google Cloud Skills Boost public profile URL and instantly receive a detailed points breakdown.

Real-time Scraping: It fetches badge data directly from live public profiles. Auto-Categorization: It distinguishes between Trivia, Game Badges (1pt), Special Badges (2pts), and Skill Badges (0.5pts). Tier Assessment: It automatically calculates if a user qualifies for tiers like Arcade Legend, Champion, or Ranger. 🛠️ How we built it Backend: Powered by Node.js and Express. We used Axios for fetching profile data and Cheerio for server-side DOM parsing to extract badge names without requiring a heavy headless browser. Frontend: A modern, premium UI built with Semantic HTML5 and Vanilla CSS. We implemented glassmorphism effects and a responsive layout to ensure it looks great on both desktop and mobile. Logic: A custom scoring engine that uses regex and string pattern matching to categorize badges based on the latest Arcade rules. 🚧 Challenges we ran into Dynamic Content: Google Cloud profiles often update their structure. We had to implement flexible CSS selectors in our scraper to ensure we could find badges even if the profile layout changed slightly. CORS & Permissions: Handling cross-origin requests between the frontend and the scraping backend required careful configuration to ensure security while maintaining a smooth user experience. Point Accuracy: Since Skill Badges count as 0.5 points (requiring 2 for a full point), we had to ensure the math remained precise throughout the calculation process. 🏆 Accomplishments that we're proud of Speed: The tool can parse a profile and calculate points in under 2 seconds. Aesthetics: We successfully moved away from a basic "form-only" look to a premium, "magical" user interface that feels like an official part of the Arcade ecosystem. No-API Reliance: We built a robust scraper that functions even without an official public API, making the tool accessible to everyone immediately. 📚 What we learned DOM Scraping Fundamentals: We deepened our knowledge of server-side HTML parsing and how to handle non-structured data. Asynchronous Flow: Managing the state between a "loading" UI and a backend fetch request improved our understanding of modern JavaScript promises. Responsive Design: We focused on creating a "tool-first" mobile experience, ensuring students can check their points on the go. 🔮 What's next for Arcade Point Calculator Milestone Tracking: Adding a "Points to Next Tier" indicator to motivate users. History Tracking: Allowing users to save their profile so they can see their point growth over time. Badge Search: A searchable database of all active Arcade badges and their current point values.

Built With

• css3
• html5
• javascript
• node.js