1
💡 Ideation & Design
Define what you want to track and how it should look
✓ Identify what to track
Example: Manga arcs, episodes, tasks, habits, etc.
✓ Decide on data structure
What info do you need? (titles, progress, descriptions, etc.)
✓ Choose visual style
Colors, theme, layout - make it yours!
↓
2
⚡ Build with Claude (C)
Collaborate with C to create your tracker
✓ Describe your vision to C
Be specific about features, look, and functionality
✓ Review the HTML file C creates
Download and save it somewhere organized
✓ Test locally
Open the HTML file in Chrome to see how it works
✓ Request tweaks if needed
Colors, features, layout - iterate until perfect!
↓
3
☁️ Add Firebase Integration
Make it sync across all your devices
✓ Get your Firebase config
From Firebase Console → Your project → Settings → Config code
✓ Ask C to add Firebase
Share config, C updates the HTML with cloud sync
✓ Test the Firebase version locally
Open in Chrome, check that it connects to Firebase
↓
4
📁 Prepare Project Folder
Set up your deployment structure
✓ Navigate to your projects folder
cd ~/Documents/AI-Projects
✓ Create project folder
mkdir your-tracker-name
✓ Enter the folder
cd your-tracker-name
✓ Initialize Firebase Hosting
firebase init hosting
↓
5
🎯 Configure Firebase Init
Answer the setup questions correctly
Question 1: Select an option
→ Choose "Use an existing project"
Question 2: Select project
→ Choose "ab-trackers" (or your Firebase project name)
Question 3: Public directory
→ Type "public" and press Enter
Question 4: Single-page app
→ Type "n" (no) and press Enter
Question 5: GitHub deploys
→ Type "n" (no) and press Enter
↓
6
📝 Add Your Files
Put your tracker in the right place
✓ Navigate to public folder
In Finder: Go to your-tracker-name/public/
✓ Delete Firebase's default index.html
Remove the placeholder welcome page
✓ Copy your tracker HTML file
Put your Firebase-enabled HTML in the public folder
✓ Rename it to index.html
This makes it the main page of your site
↓
7
🚀 Deploy to Firebase
Push your tracker live to the internet!
✓ Make sure you're in project root
cd ~/Documents/AI-Projects/your-tracker-name
✓ Run deploy command
firebase deploy
✓ Wait for completion
Watch for "Deploy complete!" message
✓ Copy your Hosting URL
Looks like: https://ab-trackers.web.app
↓
8
🎉 Test & Celebrate
Verify it works everywhere!
✓ Open URL on Mac
Test in Chrome - make sure everything loads
✓ Open URL on iPhone
Check that it looks good and data syncs
✓ Test cross-device sync
Update on Mac, refresh on iPhone - should sync!
✓ Do your victory dance! 🕺💃
You've earned it!
⚡ Quick Command Reference
Navigate to Projects Folder:
cd ~/Documents/AI-Projects
Create New Tracker Folder:
mkdir tracker-name
cd tracker-name
Initialize Firebase (do this ONCE per tracker):
firebase init hosting
Check What's in Public Folder:
cd public
ls
Deploy to Internet:
cd ~/Documents/AI-Projects/tracker-name
firebase deploy
Redeploy After Changes:
# Make your changes in public/index.html
firebase deploy
💡 Pro Tip:
After making changes to your HTML file, you MUST run
firebase deploy again to see them online. Your local file and the deployed version are separate!
💡 Pro Tip:
All your trackers can use the SAME Firebase project (ab-trackers). You just need different folders for each one. They'll all share the same Firebase database!
💡 Pro Tip:
Keep your Desktop clean! Always work in
~/Documents/AI-Projects/
🔧 Common Issues & Fixes
Issue: Seeing Firebase welcome page instead of my tracker
Fix: You didn't replace the default index.html
cd public
rm index.html
mv YourTracker.html index.html
cd ..
firebase deploy
Issue: "command not found: firebase"
Fix: Firebase CLI not installed
sudo npm install -g firebase-tools
Issue: Changes not showing online
Fix: Forgot to redeploy after editing
firebase deploy
(Then do a hard refresh in browser: Cmd+Shift+R)
Issue: Data not syncing between devices
Fix: Check Firebase config in HTML - make sure it matches your project
Or check Firestore rules in Firebase Console