Experience your own manga-style status window - Track your real-world progression like a manhwa protagonist
StatusWindow brings the iconic blue status windows from manga and manhwa into real life. Just like protagonists who can see their stats, skills, and progression through mystical interfaces, you can now track your real-world growth with that same aesthetic. Complete activities, gain experience, and watch your abilities improve through a beautifully designed status system inspired by your favorite webtoons.
⚠️ Developer Note: This is a passion project built by a beginner developer with the help of Vercel v0. The entire site is "vibe-coded" - meaning it prioritizes the aesthetic and feel over perfect functionality. Expect some bugs and quirks as this is very much a work in progress!
🎯 Perfect for: Manga/manhwa fans, goal-oriented individuals, productivity enthusiasts, anyone who's ever wanted their own status window interface.
|
|
|
|
Your personal status window with real-time stats, activity notifications, and skill progression
📱 View More Screenshots
Current Limitations:
- 🐛 Beta Status: This is a work-in-progress with known bugs and incomplete features
- 💾 Local Storage Only: All your data is stored in your browser - clearing browser data will reset your progress
- 🌐 No Offline Mode: Despite being browser-based, offline functionality isn't implemented yet
- 🔰 Beginner Project: Built by a learning developer - code quality may vary!
Try it instantly: Visit statuswindow.vercel.app - no installation required!
```bash
git clone https://github.com/Deratheone/statuswindow.git cd statuswindow
npm install
npm run dev ```
Open http://localhost:3000 in your browser.
-
Awaken Your Status Window
- Choose your initial abilities and traits
- Distribute your starting stat points
- Customize your status interface
-
Set Up Activities
- Define your activity categories (Exercise, Study, Work, etc.)
- Configure XP values for different activities
- Set daily goals and targets
-
Begin Your Journey
- Log your first activity to gain XP
- Receive your first system notification
- Watch your stats grow in real-time!
| Framework | Next.js 14 (App Router) |
| Frontend | React 18, TypeScript |
| Styling | Tailwind CSS, Framer Motion |
| State Management | React Context API, localStorage |
| Charts & Visualizations | Recharts, Custom animations |
| Icons & UI | Lucide React, shadcn/ui |
| Effects | tsParticles, Custom particle systems |
| Development Approach | Built with Vercel v0 + manual coding |
This project follows a "vibe-first" development approach:
- ✨ Aesthetic over perfection - prioritizing the manga/manhwa feel
- 🎨 Visual appeal first - making it look cool before making it perfect
- 🔰 Learning by doing - built by a beginner, for beginners
- 🤝 AI-assisted development - leveraging Vercel v0 for rapid prototyping
``` statuswindow/ ├── 📁 app/ # Next.js App Router │ ├── 🎯 dashboard/ # Main dashboard │ ├── 🏗️ onboarding/ # Character creation │ ├── 📊 progress/ # Analytics & charts │ ├── 📜 quests/ # Quest management │ └── 🎨 globals.css # Global styles ├── 📁 components/ # Reusable components │ ├── 🎮 status-window.tsx # Main character display │ ├── 📝 activity-form.tsx # Activity logging │ ├── 🎊 celebration-effect.tsx # XP celebrations │ └── 📱 mobile-nav-*.tsx # Mobile navigation ├── 📁 hooks/ # Custom React hooks │ ├── 📱 use-mobile.tsx # Mobile detection │ └── 👆 use-swipe.tsx # Touch gestures ├── 📁 lib/ # Business logic │ └── 🎯 quest-generator.tsx # Quest creation └── 📁 utils/ # Helper functions └── 🔊 audio.ts # Sound effects ```
```mermaid graph TD A[Log Activity] --> B[Verify Completion] B --> C[Calculate XP & Stats] C --> D[Update Character] D --> E[Check Quest Progress] E --> F[Show Celebration] F --> G[Save Progress] G --> H[Update Analytics] ```
- Activity Logging: User logs completed real-world activities
- XP Calculation: System calculates experience points and stat gains
- Status Update: Stats update with manhwa-style notifications
- Skill Progress: Related abilities and skills advance automatically
- System Alerts: Blue window notifications show gains and achievements
- Data Persistence: Progress saves locally for offline access
- Analytics Update: Charts and insights refresh with new data
StatusWindow is built with mobile responsiveness in mind, though with some limitations:
- 🎯 Touch-First Design: Large tap targets for mobile users
- 📱 Responsive Layout: Adapts to different screen sizes
- ⚡ Fast Loading: Optimized for mobile performance
- 📶 No True Offline Support: App needs internet despite local data storage
- 💾 Browser Dependency: All progress tied to specific browser/device
- 🐛 Mobile Bugs: Some features may not work perfectly on all devices
- 🔄 No Cross-Device Sync: Can't access your progress from different devices
- Bug Fixes - Addressing known issues and improving stability
- True Offline Support - Making the app work without internet
- Data Backup - Export/import functionality for user data
- Cross-Device Sync - Cloud storage option for progress
- PWA Support - Install as mobile app
- System Notifications - Enhanced manga-style alerts
- Skill Trees - Unlock abilities through progression
- Cloud Storage - Optional account system for data sync
- Mobile Apps - Native iOS and Android versions
StatusWindow is a beginner-friendly project that welcomes contributions! Whether you're also learning or an experienced developer, your help is appreciated.
Since this is a learning project with known issues:
- Report bugs - help identify problems!
- Share feedback - suggest improvements
- Request features - what would make it better?
Perfect for fellow beginners or anyone who wants to help improve the codebase:
```bash
git checkout -b fix/some-bug
npm run build && npm run start
git commit -m "fix: resolve mobile navigation issue"
git push origin fix/some-bug ```
- Beginner-friendly: Don't worry about perfect code - we're all learning!
- Code quality: Any improvement is welcome, no matter how small
- Documentation: Help make the README or comments clearer
- Testing: Help identify and fix mobile/browser compatibility issues
This project is licensed under the MIT License - see the LICENSE file for details.
- 🐛 Bug Reports: GitHub Issues - found a bug? Let me know!
- 💡 Feature Ideas: GitHub Discussions - suggest improvements
- ❓ Questions: GitHub Discussions Q&A - ask anything!
⚠️ Data Loss: If you lose progress, unfortunately it can't be recovered (browser storage only)
StatusWindow - A beginner's manga-inspired passion project
Made with ❤️ and lots of trial & error by a learning developer (with help from Vercel v0)