Live Workshop - Claude Code Workshop

Building Your Educational Tool

Step-by-step activities to create your own working application

5 min

Activity 1: Workshop Kickoff

Get oriented with the workshop and make sure everyone is ready to build

👋 Welcome & Introductions

Brief introductions and what you hope to build today

🎯 Workshop Goals

By the end, you'll have YOUR OWN working educational tool deployed online with your own AI assistant

🔑 Key Concept

You'll fork this workshop, add your own API key, and get your own powered version - completely independent!

💡 Why This Approach?

You Control Everything: Your own repository, your own API key, your own deployed version

No Ongoing Costs: You control your usage and API spending

Full Customization: Modify, extend, and adapt the workshop for your needs

Learning by Doing: You'll understand exactly how everything works

✓

Quick Setup Check

Ensure you completed the Pre-Workshop Setup. If not, we'll help you catch up:

✓ GitHub account created

✓ Render account created

✓ Claude Code access verified

Missing accounts? No problem! We'll help you set up during the workshop.

15 min

Activity 2: AI-Powered Tool Design

Collaborate with AI to design and get a custom Claude Code prompt for your specific educational challenge

⏱️ Why 15 minutes? Good AI conversations take time! Plan for 5-7 min discussion + 3-5 min prompt refinement + 2-3 min saving and review.

Chat with Your AI Assistant

💬 Dedicated AI Chat for Tool Design

This AI understands case-based learning, MBA programs, and business education challenges. Discuss your specific needs!

Start the conversation with something like:

🤖

Hello! I'm here to help you brainstorm educational tool ideas for business education. I understand case-based learning approaches, MBA programs, and the practical needs of business education.

What kind of educational challenge would you like to solve with a simple digital tool?

Get Your Custom Prompt

After discussing your challenge, ask the AI:

Ask: "Based on our conversation, can you create a detailed Claude Code prompt that will help me build a tool to solve this specific problem?"

The AI will generate a custom prompt tailored to your exact needs - not a generic template!

Copy & Save Your Prompt

Copy the custom prompt the AI gives you:

Your Custom Claude Code Prompt:

🎯 Activity 2 Success Markers:

💬 Discussed my specific educational challenge with AI

✨ Received a custom Claude Code prompt tailored to my needs

💾 Saved my custom prompt for Activity 3

25 min

Activity 3: Build Your Custom Tool

Use Claude Code with your personalized prompt to create your educational tool

⏱️ Building takes time: 10-15 min for initial build + 5-10 min for testing & refinements. Don't worry if it's not perfect - that's what Activity 5 is for!

Open Claude Code

Open your terminal/command prompt and run claude to start Claude Code

🎯 Use Your Custom Prompt

You created a tailored prompt in Activity 2 - that's exactly what you should use! Your custom prompt is designed for your specific educational challenge.

Your Saved Prompt:

No custom prompt saved yet. Complete Activity 2 first!

Start Building!

Paste your prompt into Claude Code and begin creating your tool!

💡 Pro tip: Start with "I want to build..." and then paste your prompt.

20 min

Activity 4: Deploy Your Tool

Get your educational tool online and share it with others

⏱️ Deployment advantage: You already deployed this workshop, so you know the process! 5 min for new repo + 3-5 min for Render deployment + 5 min buffer. Much faster this time!

Create New Repository

Create a new repository for your educational tool (separate from the workshop repository)

Ask Claude Code:

"I built an educational tool and need to deploy it. Help me create a new GitHub repository for this specific project and push my tool's files. This is separate from the workshop repository I forked earlier."

Since you've done this before: Claude Code will help you quickly set up a new repo for your tool (not the workshop!).

Deploy to Render

You know the drill from deploying your workshop! Now deploy your educational tool.

Same process as before:

Render Dashboard: "New +" → "Web Service"
Connect: Your new educational tool repository (not the workshop repo)
Deploy: Render handles the rest automatically
Wait: 2-3 minutes (faster since you have experience!)
Test: Your educational tool is now live!

💡 Pro tip: This should be much smoother than your first workshop deployment since you've already done this once!

✅ How to Know It Worked:

You get a live URL (ending in .render.com)
Clicking the URL loads your tool without errors
All features work the same as when testing locally
Tool works on mobile devices

🚨 Common Deployment Problems & Solutions:

Build fails: Check package.json has correct dependencies and start script

App shows "Application Error": Usually missing environment variables or port issues

Deployment takes >5 minutes: Normal for first deploy, subsequent ones are faster

Features don't work online: Check browser console for JavaScript errors

Get AI Help:

"My deployment failed with this error: [paste error]. Can you help me fix this and get my educational tool online?"

Test & Share Your Tool!

Your educational tool is now live and ready for students and colleagues to use!

You've mastered the complete workflow!

Idea → Build with AI → Deploy → Share → Iterate

This process works for any educational tool you can imagine. What will you build next?

10 min

Activity 5: Polish & Plan Next

Add final touches to your tool, share your success, and plan your next educational tools

⏱️ Wrap up well: 3-5 min for final improvements + 5-7 min for group sharing and reflection. Celebrate your achievements!

Building Tips

Start with the basic functionality first
Test your tool frequently as you build
Ask Claude Code to explain any code you don't understand
Request styling improvements after core features work
Add one feature at a time

🔄 Common Follow-up Requests

Styling: "Make the design more modern and add some color"

Features: "Add a way to delete entries" or "Include data validation"

Layout: "Make this mobile-friendly" or "Center the content better"

Fixes: "The submit button isn't working" or "The timer resets too early"