A Progressive Web App for tracking connections between problems, solutions, and their iterations.
- Features
- 📦 Prerequisites
- 🚀 Quick Start
- 📝 Changelog
- 📝 Text Input Syntax
- 📤 Deploy to GitHub Pages
- ⚙️ Configuration
- 💾 Data Storage
- 💻 Development
- 🛠️ Tech Stack
- 🐛 Issues
- 🤝 Contributing
- 📜 License
- Node.js 18.0+
Download from [nodejs.org](https://nodejs.org/) - Bun 1.0+
Install with:curl -fsSL https://bun.sh/install | bash - Git 2.0+
Download from [git-scm.com](https://git-scm.com/)
# Create items with prefixes
P: Problem title # Creates a problem node
S: Solution title # Creates a solution node
I: Iteration title # Creates an iteration node
# Connect items with arrows
Title --solves--> Target # Solution solves a problem
Title --iterates--> Target # Iteration of a solution
Title --breaks-down--> Target # Problem breaks into sub-problem
Title --causes--> Target # Problem causes another problem
Title --> Target # Related items (default)
Visual Connection Graph
See your problem-solution iterations as a beautiful tree diagram
Best for: Projects that need automatic builds and deployments on every push
Automated deployment with GitHub Actions
-
Push to GitHub
git init && git add . && git commit -m "Initial commit" && git branch -M main && git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git && git push -u origin main
-
Enable GitHub Pages
- Go to your repo on GitHub
- Settings → Pages → Source → Select "GitHub Actions"
- The workflow will automatically deploy
-
Access your app
- Your app will be at:
https://YOUR_USERNAME.github.io/YOUR_REPO/
- Your app will be at:
username.github.io
- Create a repo named
YOUR_USERNAME.github.io - Follow Option 1 steps above
- Your app will be at:
https://YOUR_USERNAME.github.io/
bun run exportThe out folder contains your static site. Upload the contents to any static hosting.
🔧 Add CNAME File
- Create a
CNAMEfile inpublic/folder - Enter your domain (e.g.,
example.com)
🔧 Configure DNS Configure DNS with your domain provider.
📂 Edit next.config.ts
const nextConfig: NextConfig = {
basePath: "/your-repo-name", // Uncomment and set your repo name
};Track problems, solutions, and iterations throughout the product development lifecycle.
<div style="background: white; padding: 16px; border-radius: 8px; border-left: 4px solid #10b981;">
<h4 style="margin: 0 0 8px 0; color: #1f2937;">🛠️ Bug Fixing</h4>
<p style="margin: 0 0 12px 0; color: #6b7280; font-size: 0.9rem;">Document the process of fixing bugs and the iterations made to improve the solution.</p>
<div style="background: #1e1e1e; border-radius: 6px; padding: 12px; font-family: 'Courier New', monospace; font-size: 0.85rem;">
<div style="display: flex; align-items: center; gap: 12px;">
<span style="color: #61dafb;">P:</span> <span style="color: #f8f8f2;">Login fails on Safari</span>
<span style="color: #61dafb;">--solves--></span> <span style="color: #f8f8f2;">Fix cookie handling</span>
</div>
</div>
</div>
<div style="background: white; padding: 16px; border-radius: 8px; border-left: 4px solid #3b82f6;">
<h4 style="margin: 0 0 8px 0; color: #1f2937;">📚 Learning Resources</h4>
<p style="margin: 0 0 12px 0; color: #6b7280; font-size: 0.9rem;">Keep track of learning paths, tutorials, and the problems you're solving.</p>
<div style="background: #1e1e1e; border-radius: 6px; padding: 12px; font-family: 'Courier New', monospace; font-size: 0.85rem;">
<div style="display: flex; align-items: center; gap: 12px;">
<span style="color: #61dafb;">P:</span> <span style="color: #f8f8f2;">Learn React hooks</span>
<span style="color: #61dafb;">--solves--></span> <span style="color: #f8f8f2;">Watch advanced tutorials</span>
</div>
</div>
</div>
<div style="background: white; padding: 16px; border-radius: 8px; border-left: 4px solid #ec4899;">
<h4 style="margin: 0 0 8px 0; color: #1f2937;">🎯 Research & Innovation</h4>
<p style="margin: 0 0 12px 0; color: #6b7280; font-size: 0.9rem;">Track research questions, experiments, and their iterations.</p>
<div style="background: #1e1e1e; border-radius: 6px; padding: 12px; font-family: 'Courier New', monospace; font-size: 0.85rem;">
<div style="display: flex; align-items: center; gap: 12px;">
<span style="color: #61dafb;">P:</span> <span style="color: #f8f8f2;">Improve image compression</span>
<span style="color: #61dafb;">--iterates--></span> <span style="color: #f8f8f2;">Try new algorithms</span>
</div>
</div>
</div>
🎯 What is ITR8?
ITR8 is a Progressive Web App (PWA) that helps you track connections between problems, solutions, and their iterations using a simple text-based input system. It provides a visual graph to see how problems relate to solutions and how iterations improve your work.
📱 Can I use ITR8 offline?
Yes! ITR8 is designed as an offline-first PWA. All your data is stored locally in your browser using IndexedDB, so you can access it even without an internet connection. Your data will persist between sessions.
🔗 How does URL sharing work?
ITR8 generates shareable URLs containing your data encoded in the URL parameters. You can share these links with others, and they'll be able to view and edit your data. The data is stored locally on their device, so no backend is required.
💾 Is my data secure?
Your data is stored locally in your browser's IndexedDB database. It's not sent to any server, so your information remains private and secure. You have full control over your data and can export it at any time.
🔧 Can I install ITR8 on my device?
Yes! ITR8 supports PWA installation. You can install it as a native app on your device through your browser's menu. This gives you a standalone app experience with its own icon and no browser chrome.
🔄 Can I import data from other sources?
Currently, ITR8 supports importing data via URL sharing. You can open any ITR8 URL that contains your data in the format ?data=... to import that data into your local browser storage.
Please open an issue on GitHub to help us improve the project.
🐛 Open an Issue- Include steps to reproduce the issue
- Attach screenshots if applicable
- Check if the issue already exists before submitting
- 🎉 Initial release of ITR8
- ✨ Add text-based input for problems and solutions
- 🔗 Visual connection graph for data visualization
- 📱 PWA support for offline-first experience
- 📤 URL sharing functionality
- 🎨 Beautiful UI with gradient backgrounds
Want to see upcoming features? Check the issue tracker
MIT LicenseCopyright (c) 2024 ITR8
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Track your problems, solutions, and iterations with ITR8
