Learning Timeline Builder PWA 🚀

A Progressive Web App for creating and customizing learning timelines.

Features ✨

• 📱 Install as Mobile App - Works on iOS and Android
• 💻 Install as Desktop App - Works on Windows, Mac, Linux
• 🔌 Works Offline - Access your timelines without internet
• 💾 Auto-saves - Your progress is saved automatically
• 🎨 Fully Customizable - Edit days, goals, resources, and project info

Installation Instructions

📱 Mobile (iOS/Android)

On iOS (Safari):

1. Open timeline-builder-cms.html in Safari
2. Tap the Share button (square with arrow)
3. Scroll down and tap "Add to Home Screen"
4. Tap "Add" - the app icon will appear on your home screen!

On Android (Chrome):

1. Open timeline-builder-cms.html in Chrome
2. Tap the three dots menu (⋮)
3. Tap "Add to Home Screen" or "Install App"
4. Tap "Install" - the app will be added to your home screen!

💻 Desktop (Chrome/Edge)

1. Open timeline-builder-cms.html in Chrome or Edge
2. Look for the install icon (⊕) in the address bar
3. Click it and select "Install"
4. The app will open in its own window!

Alternatively:

• Click the three dots menu (⋮)
• Select "Install Learning Timeline Builder"

How to Use

Hosting Options

Option 1: Local Use

• Just open timeline-builder-cms.html in your browser
• All files must be in the same folder

Option 2: Host on GitHub Pages (FREE)

1. Create a new GitHub repository
2. Upload all files (HTML, manifest.json, service-worker.js, icons)
3. Go to Settings → Pages
4. Select main branch and save
5. Your PWA will be live at https://yourusername.github.io/repo-name

Option 3: Host on Netlify/Vercel (FREE)

1. Drag and drop your folder to Netlify or Vercel
2. Get instant hosting with HTTPS
3. Share the link with anyone!

Files Included

• timeline-builder-cms.html - Main application
• manifest.json - PWA configuration
• service-worker.js - Offline functionality
• icon-192.png - App icon (192x192)
• icon-512.png - App icon (512x512)
• README.md - This file

Features Guide

Edit Project Info

• Click "Edit Project Info" button
• Change title, problem statement, solution
• Add/remove tech stack items

Manage Days

• Add new days with "+ Add Day"
• Edit day title by clicking the ✏️ icon
• Delete days with the 🗑️ icon

Manage Goals

• Check off completed goals
• Double-click any goal to edit it
• Click "+ Add Goal" to add new goals
• Delete goals with the × button

Manage Resources

• Click "+ Add Resource" to add learning materials
• Delete resources with the × button

Save & Export

• Timeline auto-saves to your browser
• Click "Save Timeline" to manually save
• Click "Export JSON" to backup your timeline
• Click "Import JSON" to restore a backup

Offline Support

Once installed, the app works completely offline! Your data is stored locally in your browser and syncs automatically.

Browser Compatibility

• ✅ Chrome (Desktop & Mobile)
• ✅ Edge (Desktop & Mobile)
• ✅ Safari (iOS)
• ✅ Firefox (Desktop & Mobile)
• ✅ Samsung Internet
• ✅ Opera

Privacy

All your data stays on your device. Nothing is sent to any server. Your timeline data is stored in your browser's local storage.

Tips

1. Backup regularly - Use "Export JSON" to save backups
2. Customize for any project - Not just for Next.js! Use it for any learning goal
3. Share timelines - Export JSON and share with friends
4. Works great on tablet - Perfect for planning on iPad or Android tablets

Support

If you have issues:

1. Make sure all files are in the same folder
2. Use HTTPS (required for PWA features) - use GitHub Pages or Netlify
3. Clear browser cache and reinstall if needed
4. Check browser console for errors (F12)

License

Free to use and modify for personal and commercial projects!

---

Made with ❤️ for learners everywhere

Skillsprit