📅 Event Details

Date: Saturday, January 31st, 2026

Time: 1:30 PM - 4:00 PM (MYT)

Format: Hybrid Workshop (Physical @ APU Campus + Online Stream)

Duration: 2.5 Hours

Speaker: Cindy Pua Kah Qi (Web Department Lead, GDGoC APU)

🎯 About This Workshop

Kickstart your KitaHack 2026 journey by learning how real web apps talk to the world! This hands-on workshop teaches you the fundamentals of web development and APIs through building an "API Questline" — a choose-your-own-adventure mini web app that fetches live data and responds to your choices.

You'll learn how modern web applications communicate with external services, handle loading and error states gracefully, and persist user progress across sessions. By the end, you'll have a working prototype and the foundational skills to build hackathon-ready web projects.

No prior API experience needed — just bring your curiosity and a laptop ready to code!

👥 Who Should Attend?

This workshop is perfect for:

• KitaHack 2026 Participants preparing for the Google Solution Challenge

• Students & Developers who want to understand how web apps consume external data

• Beginners with basic HTML/CSS/JavaScript knowledge looking to level up

• Anyone who wants to build interactive, data-driven web prototypes!

Prerequisites:

A laptop with the following pre-installed:

• Node.js (LTS) and npm

• Visual Studio Code (or preferred IDE)

• A modern browser (Chrome/Edge/Firefox)

• Basic JavaScript knowledge (functions, arrays/objects, DOM manipulation)

• Stable internet connection

Optional but recommended: Postman installed for API testing (we'll demo it during the workshop)

⚠️ Important: Tool installation is NOT part of the workshop. Please install prerequisites beforehand — an installation checklist will be provided!

📚 What You'll Learn

By the end of this workshop, you will:

✅ Understand how web apps communicate with APIs (request/response, JSON, status codes)

✅ Use Postman to inspect API endpoints and verify responses

✅ Build an interactive UI that updates based on user decisions and API data

✅ Implement production-ready patterns: loading states, error handling, and input validation

✅ Persist progress using localStorage with save/resume functionality

✅ Walk away with a playable single-page web app featuring multiple endings!

⏱️ Workshop Agenda

1:30 PM - 1:40 PM Arrival, environment check & starter template walkthrough

1:40 PM - 1:55 PM Concepts: Modern web flow (UI → state → API → UI), localhost basics, API anatomy

1:55 PM - 2:10 PM API practice with Postman: endpoints, query params, status codes

2:10 PM - 2:45 PM Hands-on Part 1: Build UI skeleton + story nodes + quest engine

2:45 PM - 3:20 PM Hands-on Part 2: Integrate a 'world signal' API + loading/error states

3:20 PM - 3:40 PM Hands-on Part 3: Save/resume with localStorage + endings + summary screen

3:40 PM - 3:55 PM Team challenge: Timed decision voting + stretch goals

3:55 PM - 4:00 PM Recap, key takeaways & Q&A

🛠️ Technologies Covered

1. React (Vite) + JavaScript — Frontend framework

2. REST APIs & JSON — Data fetching fundamentals

3. Postman — API testing and inspection

4. localStorage — Client-side data persistence

5. Browser DevTools — Debugging and network inspection

📱 Stay Connected

Join our WhatsApp group for pre-workshop installation support, reminders, and updates:

👉 https://chat.whatsapp.com/FKSsMfIVIpbFhEpwtEVZnA

📝 Registration

Spaces for physical attendance are limited! Register now to secure your spot.

Whether you're building your first web app or strengthening your API skills for KitaHack, this workshop gives you the practical foundation to create interactive, data-driven solutions. Let's build something awesome together!

📧 Questions?

For inquiries, reach out through any of our social media handles or the WhatsApp group!