By skyforbes 
In April 2023, I was wow’ed when I could launch simple html Kanban app for students in about an hour of time with no coding skills.
I decided to try again in October 2025 with new skills and new tools.
Here’s the difference in results:
v1 2023
v2 2025
New workflow
Instead of just asking ChatGPT to create the code and I manually update and troubleshoot the code in VisualStudio, I leveraged Claude to create a prompt that I then executed in Cursor (default model).
I essentially provided the same Requirements for the product as in my original attempt in 2023. This time I added more specifics on helping me make it ‘deployable’ and figured out a way to have it accessible through a free web hosting environment (Github Pages).
My Product Creation Prompt for Claude:
Here's a product-agnostic template for creating zero-setup PWA applications:
---
## **Universal PWA Creation Template**
```
Create a complete Progressive Web App (PWA) with zero external dependencies and zero setup required. The app must work immediately when opened and be installable like a native app.
APPLICATION DETAILS:
- App Name: [YOUR APP NAME]
- Purpose: [DESCRIBE WHAT THE APP DOES]
- Target Users: [WHO WILL USE THIS]
DESIGN REQUIREMENTS:
- Style: [modern/playful/professional/minimal/vintage/etc.]
- Font: [specify font family or "modern sans-serif"]
- Color Scheme: [primary color, secondary color, accent colors with hex codes]
- Visual Theme: [describe aesthetic - flat, skeuomorphic, hand-drawn, glassmorphic, etc.]
- Background: [solid color, gradient, texture, pattern - be specific]
- Component Style: [cards, panels, lists - describe visual treatment]
CORE FEATURES:
[List 5-10 main features with specific details]
- Feature 1: [detailed description]
- Feature 2: [detailed description]
- Feature 3: [detailed description]
- [Add more as needed]
USER INTERACTIONS:
- Input methods: [click, drag-drop, keyboard, voice, etc.]
- Editing: [inline, modal, sidebar - specify how users edit content]
- Feedback: [toast notifications, modals, animations - how app responds to actions]
- Navigation: [tabs, sidebar, columns, pages - how users move through app]
DATA STORAGE:
- Storage method: localStorage (browser-based, no external services)
- Data structure: [describe what data needs to be stored]
- Export format: JSON
- Import capability: Yes, from exported JSON files
- Auto-save: After every change
- Sample data: [Yes/No - include starter data on first load?]
TECHNICAL REQUIREMENTS:
- Architecture: Single HTML file with embedded CSS and JavaScript
- Dependencies: None (no external libraries, no CDN links)
- Framework: Vanilla JavaScript
- PWA-ready: manifest.json and service-worker.js included
- Offline functionality: Works completely offline after first visit
- Installability: Browser install prompt + manual "Install App" button
- Build tools: None required
- Deployment: Must work by simply opening index.html locally
RESPONSIVE DESIGN:
- Desktop layout: [describe layout for large screens]
- Tablet layout: [describe medium screen adaptations]
- Mobile layout: [describe mobile optimizations]
- Breakpoints: [specify if custom breakpoints needed, or use standard]
PWA SPECIFICATIONS:
- Service worker: Cache strategy for offline use
- Web app manifest: Include app metadata, icons, theme colors
- Install prompt: Custom UI for installation
- Display mode: [standalone/fullscreen/minimal-ui]
- Theme color: [hex code for browser chrome]
- Background color: [hex code for splash screen]
- Orientation: [any/portrait/landscape]
- Icons required: 192x192px and 512x512px (provide creation instructions)
ADVANCED FEATURES (optional):
- Keyboard shortcuts: [list if needed]
- Accessibility: [ARIA labels, screen reader support, keyboard navigation]
- Analytics: [none by default - specify if needed]
- Sharing: [Web Share API, social sharing]
- Notifications: [push notifications, if applicable]
- Multi-language: [specify languages if needed]
DELIVERABLES:
1. index.html - Complete app with PWA integration
2. manifest.json - PWA configuration with all metadata
3. service-worker.js - Offline functionality and intelligent caching
4. README.md - Comprehensive documentation including:
- App overview and feature list
- Installation instructions (browser and PWA)
- Usage guide with screenshots/examples
- Deployment guide for GitHub Pages, Netlify, Vercel
- Icon creation instructions
- Data export/import instructions
- Customization guide
- Troubleshooting section
- Browser compatibility matrix
5. .gitignore - Standard web project ignore rules
6. [OPTIONAL] ICONS.md - Detailed icon creation guide
7. [OPTIONAL] DEPLOY.md - Step-by-step deployment instructions
QUALITY STANDARDS:
- Code quality: Clean, well-commented, maintainable
- Performance: Fast loading, smooth animations (<16ms frame time)
- Accessibility: WCAG 2.1 AA compliant [or specify level]
- Browser support: [Chrome, Firefox, Safari, Edge - specify versions]
- Mobile support: iOS 12+, Android 5+
- Security: No XSS vulnerabilities, secure data handling
CONSTRAINTS:
- No user authentication (local-only app)
- No server-side code
- No external API calls [unless specified]
- No npm/node_modules
- No build/compile step
- Works 100% client-side
- Privacy-first: all data stays on device
The app should be production-ready, fully functional, and require zero configuration. Users should be able to open index.html and immediately start using it, with option to install as a native-feeling app.
```
---
## **Quick-Fill Template (Simplified Version)**
```
Create a zero-setup PWA:
APP: [Name] - [One-line description]
USERS: [Target audience]
DESIGN:
- Style: [aesthetic]
- Colors: [primary], [secondary], [accent]
- Font: [font name]
- Theme: [visual description]
FEATURES:
1. [Core feature 1]
2. [Core feature 2]
3. [Core feature 3]
[... list all features]
DATA:
- Storage: localStorage
- Format: JSON export/import
- Auto-save: Yes
- Sample data: [Yes/No]
LAYOUT:
- Desktop: [describe]
- Mobile: [describe]
PWA:
- Install: Yes
- Offline: Yes
- Theme color: [hex]
FILES: index.html, manifest.json, service-worker.js, README.md, .gitignore
TECH: Vanilla JS, no dependencies, no build tools, single HTML file, responsive
SPECIAL REQUIREMENTS: [Any unique needs]
Must work immediately when opened. No configuration required.
```
---
## **Example Usage: Todo List App**
```
Create a zero-setup PWA:
APP: Simple Todo - Personal task management
USERS: Busy professionals and students
DESIGN:
- Style: Clean, modern, minimal
- Colors: #2196F3 (blue), #4CAF50 (green), #FFC107 (amber)
- Font: System font stack (SF Pro, Segoe UI, Roboto)
- Theme: Flat design with subtle shadows
FEATURES:
1. Add/edit/delete tasks
2. Mark tasks complete with strikethrough
3. Priority levels (high/medium/low) with color coding
4. Due dates with calendar picker
5. Filter: All/Active/Completed
6. Search tasks by keyword
7. Dark mode toggle
8. Task categories/tags
DATA:
- Storage: localStorage
- Format: JSON export/import
- Auto-save: Yes
- Sample data: Yes (5 example tasks)
LAYOUT:
- Desktop: Sidebar with filters, main area with task list
- Mobile: Bottom nav, full-width list
PWA:
- Install: Yes
- Offline: Yes
- Theme color: #2196F3
FILES: index.html, manifest.json, service-worker.js, README.md, .gitignore
TECH: Vanilla JS, no dependencies, no build tools, single HTML file, responsive
SPECIAL REQUIREMENTS: Keyboard shortcuts (n=new, /=search), drag to reorder tasks
Must work immediately when opened. No configuration required.
```
---
## **What Makes This Template Reusable:**
✅ **Fill-in-the-blank sections** - Clear placeholders for customization
✅ **Modular structure** - Pick and choose which sections you need
✅ **Technology agnostic** - Works for any type of web app
✅ **Scales up or down** - Use full template or quick version
✅ **Clear constraints** - Maintains "zero-setup" philosophy
✅ **Consistent deliverables** - Always produces same file structure
✅ **Example provided** - Shows how to fill it out
This template can create:
- Task managers
- Note-taking apps
- Habit trackers
- Budget planners
- Recipe organizers
- Workout logs
- Reading lists
- Time trackers
- Flashcard apps
- Mood journals
- ... any single-user productivity app!
Just fill in the sections and you'll get a production-ready PWA! 🚀
The full product here:
https://nikastashinsky.github.io/student-kanban/
Feel free to test it out and provide feedback!