Demo Checklist

Time: ~5 minutes | Difficulty: Beginner

What You'll Learn

How to present your application
What to demonstrate
What to say (and what NOT to say)
How to handle things when they go wrong
How to answer technical questions

The Big Idea

You built something real. Now you need to show it off effectively. A good demo highlights your accomplishments and the skills you've learned.

A great demo is:

Prepared: You know what you'll show
Focused: You show the best parts
Confident: You own what you built
Honest: You acknowledge it's a learning project

Before the Demo

Prepare Your Environment

[ ] App is deployed and accessible
[ ] You have the URL ready to share
[ ] You have test credentials prepared
[ ] You've practiced the flow once
[ ] Browser is in incognito mode (fresh state)
[ ] Close unnecessary tabs/windows
[ ] Zoom browser to comfortable reading size (125-150%)
[ ] Turn off notifications

What You'll Need

Live URL: https://your-project.web.app
Test Email: demo@example.com
Test Password: demo123456
GitHub: https://github.com/you/project-name

Create a demo account in advance so you're not fumbling during the presentation.

Pro tip: Create 2-3 sample items ahead of time so the app doesn't look empty.

Technical Prep

[ ] Test the demo flow once more
[ ] Check for console errors (F12)
[ ] Verify all links work
[ ] Prepare GitHub repo (clean up commented code)
[ ] Have DevTools ready but closed
[ ] Note your rehearsal was smooth

The Demo Script

Total time: ~5 minutes

1. Introduction (30 seconds)

What to say:

"I built a personal [notes/tasks/bookmarks] app that lets users securely manage their private data. It has user authentication, full CRUD operations, and data isolation between users. I built it with React, TypeScript, and Firebase."

What NOT to say:

❌ "So, um, I kind of built this thing..."
❌ "It's not perfect but..."
❌ "Sorry, I'm nervous..."
❌ "AI wrote most of it..."

Why: Start strong and confident. This sets the tone.

2. Show the Home Page (30 seconds)

What to say:

"This is the landing page. New users can register, returning users can log in."

What to do:

Load the URL
Point out navigation
Don't linger too long here

What NOT to say:

❌ "I know the design isn't great..."
❌ "I should probably add more here..."

Why: Keep moving. The real features are coming.

3. Demonstrate Registration (1 minute)

What to say:

"Let me register a new account to show the authentication flow."

What to do:

Click "Register" or navigate to /register
Enter email: test@example.com
Enter password: test123456
Click Register
Show redirect to dashboard

What to say after:

"The account is now created and stored securely in Firebase Authentication. I'm automatically logged in and redirected to the dashboard."

What NOT to say:

❌ "Hopefully this works..."
❌ "Sometimes this is slow..."

Why: Confidence. It will work because you tested it.

4. Demonstrate Core Feature (2 minutes)

What to say:

"Now I'll create a [note/task/bookmark] to show the core functionality."

What to do:

Click "New [Item]" or "Add [Item]"
Fill out the form with meaningful data
- For notes: Title "Demo Note", Content "This is a test"
- For tasks: Title "Learn React", Due date tomorrow
- For bookmarks: Title "GitHub", URL "https://github.com"
Click Save

What to say after:

"The data is saved to Cloud Firestore and immediately appears in my list. Each item is associated with my user ID for data isolation."

Then demonstrate Edit:

Click Edit on the item you just created
Change something meaningful
Click Save

What to say:

"I can edit items and changes persist. Let me refresh to prove the data is actually saved."

Do a hard refresh (Ctrl+Shift+R or Cmd+Shift+R)

What to say:

"After a full page refresh, my data is still here because it's stored in the database, not just in memory."

Then demonstrate Delete:

Click Delete on a different item
Confirm deletion

What to say:

"And I have full CRUD operations — Create, Read, Update, and Delete."

What NOT to say:

❌ "I'm not sure if this will work..."
❌ "This part is buggy sometimes..."
❌ "Let me try again..."

Why: Show confidence in what you built. Bugs happen, but don't predict them.

5. Demonstrate Security (1 minute)

What to say:

"Security is built in. Let me show you."

What to do:

Click Logout
Show redirect to login page
Manually type /dashboard in the URL
Show redirect back to login

What to say:

"Protected routes require authentication. If I try to access the dashboard without logging in, I'm redirected to the login page."

Optional - Data Isolation: If you have time and a second test account:

Log in with different credentials
Show empty list or different data

What to say:

"Each user only sees their own data. Firestore security rules enforce this at the database level, so users can't access each other's information even if they try."

What NOT to say:

❌ "I think the security works..."
❌ "I hope no one can hack this..."

Why: Security is important. Show you understand it.

6. Technical Highlights (30 seconds)

What to say:

"A few technical things I'm proud of:
TypeScript provides type safety and catches errors before runtime
React Router handles client-side navigation
Firestore security rules protect data at the database level
The app is responsive and works on mobile
All code is on GitHub with proper version control"

Optional additions if relevant:

"I set up CI/CD to check code quality on every push"
"I used React hooks for state management"
"I implemented real-time updates using Firestore listeners"

What NOT to say:

❌ "I don't really understand TypeScript..."
❌ "The code is messy..."

Why: Highlight what you learned. Show technical understanding.

7. Close (30 seconds)

What to say:

"I built this in about 4-5 hours as part of a programming bootcamp. The experience taught me React, TypeScript, Firebase, Git, and how to work effectively with AI tools. The code is on GitHub and the app is live at [your-url]. I'm excited to build more projects and expand my skills."

What to do:

Show the URL one more time
Offer to share the link in chat/email

What NOT to say:

❌ "That's it, I guess..."
❌ "I know it's not much..."
❌ "AI did most of the work..."

Why: End strong. You learned a lot and built something real.

Common Questions & Answers

Technical Questions

"How long did this take?"

"About 4-5 hours in a guided bootcamp format with structured learning modules."

"Did AI write all the code?"

"AI helped generate code based on my requirements, but I reviewed everything, understood how it works, made decisions about architecture and features, and tested thoroughly. I learned by reading and modifying the code AI suggested."

"What was the hardest part?" Be honest and specific:

"Understanding how authentication state flows through the app was challenging at first." "Getting the security rules right took some trial and error." "Debugging the real-time updates when data wasn't appearing immediately."

What NOT to say:

❌ "Everything was hard..."
❌ "I don't really know how it works..."

"What would you add next?" Have 2-3 ideas ready:

"Search functionality to filter items" "Categories or tags for organization" "Social login with Google or GitHub" "Sharing items with other users" "Dark mode"

"Can you explain how [specific feature] works?" If you know:

"Sure! [Explain in simple terms]"

If you don't know:

"That's a great question. I know it involves [general concept], but I'd want to review the specific implementation before explaining the details. I can show you the code though."

What NOT to say:

❌ "I have no idea..."
❌ "AI did that part..."

"Why Firebase instead of [other technology]?"

"Firebase provided a complete backend solution — authentication, database, and hosting — which let me focus on learning frontend development. It's also free for small projects and has great documentation."

"Is this production-ready?"

"It's a learning project that demonstrates core concepts. For production, I'd add comprehensive testing, error monitoring, better loading states, and more robust error handling."

What NOT to say:

❌ "I guess so?"
❌ "Probably not..."

Non-Technical Questions

"Where is the code?"

"It's on GitHub at [your-repo-url]. The README includes setup instructions."

"Can I try it?"

"Absolutely! Here's the link: [your-live-url]. Feel free to create an account and test it out."

"Are you looking for a job?"

"Yes! I'm actively learning web development and looking for opportunities to grow as a developer." or "I'm building projects to strengthen my portfolio and expand my skills."

"What's next for you?"

"I'm planning to build [next project idea], learn [specific technology], and continue developing my skills in modern web development."

What to Avoid Saying

During the entire demo, never say:

❌ "This is just a simple project..." → It's a real, deployed application. That's an accomplishment!

❌ "I'm not really a programmer..." → You wrote code that works. You are a programmer.

❌ "AI did all the work..." → You made decisions, tested, debugged, and deployed. That's engineering.

❌ "Sorry about [anything]..." → Unless something breaks, don't apologize for your work.

❌ "I know the UI is ugly..." → If they don't mention it, don't bring it up.

❌ "I didn't have time to..." → Show what you DID build, not what you didn't.

❌ "This probably won't work..." → You tested it. It will work. Be confident.

Handling Things When They Break

If the Demo Breaks

Stay calm. Every developer deals with bugs.

What to say:

"Interesting! We hit a bug. This is a great teaching moment — debugging is a key part of development."

What to do:

Open DevTools (F12)
Check Console for errors
Say: "Let me check what's happening in the console"

If you can fix it quickly (< 30 seconds):

"Ah, I see the issue. [Explain briefly]. Let me fix that."

If you can't fix it quickly:

"This would require some debugging. Let me show you a different feature instead." or "I can investigate this after the demo and update it. For now, let me show you [working feature]."

What NOT to do:

❌ Panic or freeze
❌ Spend 5 minutes trying to fix it
❌ Apologize profusely
❌ Blame AI or Firebase
❌ Give up on the whole demo

Why: Bugs happen to everyone. How you handle them shows maturity.

If Deployment is Down

Before the demo: Always check the live site 5 minutes before presenting.

If it's down during demo:

"The hosting is having issues. Let me show you the local version instead."

Run locally:

bash

npm run dev

What to say:

"This is running on my machine, but it deploys identically to Firebase Hosting."

If Internet is Slow

"Firebase is taking a moment to respond. This is a cloud service, so network latency can vary."

While waiting:

Show the code
Explain the architecture
Show the GitHub repo
Talk about what you learned

If You Forget What to Demo

Have notes open in a separate window:

1. Register
2. Create item
3. Edit item
4. Delete item
5. Logout → try to access dashboard
6. Technical highlights

Glance at notes if needed. This is fine and professional.

Demo Tips

Do

✅ Practice once before the real demo (but not 10 times — stay fresh)
✅ Use simple, prepared data ("Test Note" not "asdfasdf")
✅ Speak slowly and clearly (pause between steps)
✅ Show the URL early so people can follow along
✅ Be honest about what you learned (this builds credibility)
✅ Make eye contact (if presenting to people)
✅ Pause for questions at natural breaks
✅ Have fun — you built something cool!

Don't

❌ Try to show everything (5 minutes means focus on best parts)
❌ Apologize excessively (once is enough if needed)
❌ Rush through (slow is better than fast)
❌ Go off-script exploring (stick to the plan)
❌ Panic if something breaks (it's a learning opportunity)
❌ Talk about what's NOT there (focus on what IS there)
❌ Diminish your achievement (you built this!)

Body Language & Presentation

If presenting in person:

Stand or sit up straight
Smile when appropriate
Gesture to highlight points
Look at your audience, not just the screen

If presenting virtually:

Check your camera angle
Ensure good lighting
Mute notifications
Share just your browser window, not whole screen

After the Demo

Immediate Follow-Up

In chat or via email, share:

Thanks for watching my demo!

Live app: https://your-project.web.app
GitHub: https://github.com/you/project-name
LinkedIn: https://linkedin.com/in/yourname

Feel free to try it out and let me know if you have questions!

Post-Demo Checklist

[ ] Thank anyone who watched
[ ] Share links (app + GitHub)
[ ] Update LinkedIn with project
[ ] Add to portfolio site
[ ] Note any questions you couldn't answer (for learning)
[ ] Fix any bugs discovered during demo
[ ] Update resume with project

Collecting Feedback

Good questions to ask:

"What features would make this more useful?" "Was anything confusing about how the app works?" "What impressed you most?" "What should I learn next?"

Take notes on feedback. Even if you don't implement it, it shows you value input.

LinkedIn Post Template

🚀 Just deployed my first full-stack web application!

Built a [notes/tasks/bookmarks] app with:
✅ User authentication (Firebase Auth)
✅ Real-time database (Cloud Firestore)
✅ Full CRUD operations
✅ Secure data isolation
✅ Responsive design
✅ Deployed on Firebase Hosting

Tech stack:
• React 18
• TypeScript
• Firebase
• React Router
• Vite

Key learnings:
• React hooks and state management
• TypeScript for type safety
• Cloud database design
• Security rules
• Git version control
• Working with AI tools

Try it: https://your-project.web.app
Code: https://github.com/you/project

Time invested: ~5 hours
What I'll build next: [your next idea]

#WebDevelopment #React #TypeScript #Firebase #Learning

Portfolio Site Addition

Add to your portfolio:

Screenshot of the app
Brief description (2-3 sentences)
Tech stack list
Live link
GitHub link
What you learned (1 paragraph)

Phase 8 Complete! 🎉

You've:

Tested your application thoroughly
Deployed to the internet
Prepared a professional demo
Learned how to present your work

Total time for Phase 8: ~25 minutes

One final phase: reflection on what you've learned and where to go next.

Start Phase 9: Reflection →

Steps

Steps

Steps

Steps

Steps

Demo Checklist

What You'll Learn

The Big Idea

Before the Demo

Prepare Your Environment

What You'll Need

Technical Prep

The Demo Script

1. Introduction (30 seconds)

2. Show the Home Page (30 seconds)

3. Demonstrate Registration (1 minute)

4. Demonstrate Core Feature (2 minutes)

5. Demonstrate Security (1 minute)

6. Technical Highlights (30 seconds)

7. Close (30 seconds)

Common Questions & Answers

Technical Questions

Non-Technical Questions

What to Avoid Saying

Handling Things When They Break

If the Demo Breaks

If Deployment is Down

If Internet is Slow

If You Forget What to Demo

Demo Tips

Do

Don't

Body Language & Presentation

After the Demo

Immediate Follow-Up

Post-Demo Checklist

Collecting Feedback

LinkedIn Post Template

Portfolio Site Addition

Phase 8 Complete! 🎉

Demo Checklist ​

What You'll Learn ​

The Big Idea ​

Before the Demo ​

Prepare Your Environment ​

What You'll Need ​

Technical Prep ​

The Demo Script ​

1. Introduction (30 seconds) ​

2. Show the Home Page (30 seconds) ​

3. Demonstrate Registration (1 minute) ​

4. Demonstrate Core Feature (2 minutes) ​

5. Demonstrate Security (1 minute) ​

6. Technical Highlights (30 seconds) ​

7. Close (30 seconds) ​

Common Questions & Answers ​

Technical Questions ​

Non-Technical Questions ​

What to Avoid Saying ​

Handling Things When They Break ​

If the Demo Breaks ​

If Deployment is Down ​

If Internet is Slow ​

If You Forget What to Demo ​

Demo Tips ​

Do ​

Don't ​

Body Language & Presentation ​

After the Demo ​

Immediate Follow-Up ​

Post-Demo Checklist ​

Collecting Feedback ​

LinkedIn Post Template ​

Portfolio Site Addition ​

Phase 8 Complete! 🎉 ​

Demo Checklist

What You'll Learn

The Big Idea

Before the Demo

Prepare Your Environment

What You'll Need

Technical Prep

The Demo Script

1. Introduction (30 seconds)

2. Show the Home Page (30 seconds)

3. Demonstrate Registration (1 minute)

4. Demonstrate Core Feature (2 minutes)

5. Demonstrate Security (1 minute)

6. Technical Highlights (30 seconds)

7. Close (30 seconds)

Common Questions & Answers

Technical Questions

Non-Technical Questions

What to Avoid Saying

Handling Things When They Break

If the Demo Breaks

If Deployment is Down

If Internet is Slow

If You Forget What to Demo

Demo Tips

Do

Don't

Body Language & Presentation

After the Demo

Immediate Follow-Up

Post-Demo Checklist

Collecting Feedback

LinkedIn Post Template

Portfolio Site Addition

Phase 8 Complete! 🎉