Vibe Coding Challenge | The Immersive Lens

The Immersive Lens Vibe Coding Challenge

Three coding challenges. Three difficulty levels. Infinite possibilities.

Pick a challenge, grab an AI coding partner, and build something in one file

The Vibe Coding Mindset

This challenge is about exploration, iteration, and making something uniquely yours. Here's what to remember:

Iteration is the Point

If things don't work out at first, that's fine! Refine. Tell the AI what didn't work or why the app isn't what you envisioned. Don't give up. Ideate!

Make It YOUR Vision

Even if you get your app right the first time, change things. Change the colors. The font. The behavior. Add features. The intent is to make this YOUR VISION.

You Can't AI Wrong

There's no single "correct" solution. Experiment. Break things. Learn. The process is more valuable than perfection.

The Three Categories

Each category has example challenges, but feel free to explore your own ideas! The examples are inspiration, not requirements.

Build something that responds to user input in real-time. This is your warmup - focus on DOM manipulation, event handling, and creating an engaging user experience with immediate visual feedback.

Example Challenges:

  • Magic Decision Maker User types a question, clicks a button, and gets a random answer with animation. Add sound effects or confetti for extra flair!
  • Mood Ring Color Picker Use buttons or sliders to mix RGB colors. Show live preview and hex code values as the user adjusts.
  • Dad Joke Generator Button that displays random dad jokes from an array. Add a "groan meter" that tracks how many jokes have been told.

Work with the FileReader API and Canvas to accept file uploads, process them, and create downloadable outputs. This introduces data transformation and file manipulation.

Example Challenges:

  • Quick Meme Generator Upload an image, add top/bottom text using canvas, and download the result. Perfect for sharing!
  • Text File Analyzer Upload a .txt file and show word count, character count, and most common words. Download results as a report.
  • Certificate Maker Enter a name and achievement, generate a printable certificate with styling, and download as an image.

Access the user's webcam using the MediaDevices API to create interactive camera-based applications. This is the boss level - working with live video streams and real-time processing.

Example Challenges:

  • Podcast Selfie Booth Access webcam, add a countdown timer (3-2-1), capture a photo, and download the selfie. Perfect podcast memento!
  • ASCII Art Webcam Convert live webcam video to ASCII characters in real-time. Retro-cool aesthetic meets modern web APIs.
  • Color Detector Show webcam feed and let users click anywhere to extract that color's RGB/hex value. Display a swatch with the value.

The Prompt Template

Copy this template and paste it into your AI coding partner along with your challenge description. These constraints ensure your code is accessible, secure, and easy to understand. 

* Everything in one single HTML file - HTML, CSS, and JavaScript together
* No build tools - no React, Vue, or anything requiring npm
* CDN libraries are fine if they help
* Use vanilla JavaScript only
* Fully responsive - works on phone, tablet, and desktop
* Fully accessible - semantic HTML, ARIA labels, keyboard navigation
* No data sent to any server - everything runs in the browser only
* If the app has teacher-editable content (words, questions, names, data), store it in a clearly labeled array or object at the very top of the JavaScript - not scattered through the code - so it is easy to find and update without touching anything else
📄 Everything in one single HTML file

Why: Makes your app incredibly portable - you can share it, host it anywhere, or save it offline. No complex folder structures or missing dependencies. Just one file that works everywhere.

🚫 No build tools, no npm

Why: Build tools add complexity and can break. By avoiding frameworks like React or Vue that need npm, your code stays simple, debuggable, and works immediately when you open the file. Anyone can understand and modify it.

🔗 CDN libraries are fine

Why: If you need a library (like Font Awesome for icons or Chart.js for graphs), you can include it from a CDN (Content Delivery Network) using a simple <script> or <link> tag. This keeps setup simple while still giving you powerful tools.

🍦 Vanilla JavaScript only

Why: Pure JavaScript (no jQuery, no frameworks) means your code is faster, lighter, and works in any browser. It's also easier to learn from and debug. Modern vanilla JS is surprisingly powerful and clean.

📱 Fully responsive

Why: People use phones, tablets, and desktops. Your app should work beautifully on all of them. Use CSS techniques like flexbox, grid, and media queries to ensure your layout adapts to any screen size.

♿ Fully accessible

Why: Everyone should be able to use your app, including people using screen readers or keyboard navigation. Use semantic HTML (<button> not <div>), add ARIA labels, and make sure everything works with Tab and Enter keys.

🔒 No data sent to servers

Why: Privacy and security. Everything runs locally in the user's browser - no data leaves their computer. This means no server costs, no privacy concerns, and no network dependencies. Your app works offline!

✏️ Teacher-editable content at the top

Why: If someone wants to customize your app (change quiz questions, update names, modify data), they should be able to find and edit that content easily without digging through code. Put all customizable data in clearly labeled variables at the start of your JavaScript section.

Getting Started

Choose your AI coding partner and follow these steps to start building:

Using Claude

  1. Go to claude.ai
  2. Start a new conversation
  3. Paste the prompt template above
  4. Add your challenge description (e.g., "Create a Magic Decision Maker that...")
  5. Claude will create your app in a single HTML file
  6. Download or copy the code and open it in your browser

Sharing: You can share your Claude conversation directly using the share button, or if you're using Claude Code, you can publish the artifact to share your creation.

Using Gemini

  1. Go to gemini.google.com
  2. Start a new conversation
  3. Important: Activate Canvas mode (look for the Canvas option in the interface)
  4. Paste the prompt template above
  5. Add your challenge description
  6. Gemini will create your app in Canvas
  7. Download the HTML file and open it in your browser

Sharing: Share your Gemini conversation (with Canvas output visible) using the share button in the interface.

Using ChatGPT

  1. Go to chat.openai.com
  2. Start a new conversation
  3. Recommended: Use Canvas mode if available (click the Canvas button)
  4. Paste the prompt template above
  5. Add your challenge description
  6. ChatGPT will generate your app
  7. Copy the code and save it as an HTML file, or download from Canvas

Sharing: Share your conversation via the Canvas link or take screenshots of your creation to share on social media.

Using Any AI That Can Code

  1. Open your preferred AI coding assistant
  2. Paste the prompt template above
  3. Add your challenge description clearly
  4. Request that everything be in a single HTML file
  5. Review the generated code
  6. Save as .html and open in your browser
  7. Iterate and refine as needed

Sharing: Share screenshots of your app or the conversation, or host the HTML file on a platform like GitHub Pages or CodePen.