Track your productivity. Build streaks. Stay consistent.
I built this for personal use. Feel free to fork & customize to your liking.
StreaX is a gamified productivity tracking app that helps you stay consistent with your goals through:
- 🎯 Pomodoro Sessions - Focus timer with customizable intervals
- 🔥 Streak Tracking - Build daily habits and maintain momentum
- 🏆 Rewards System - Earn streak savers and backlog savers
- 📊 Detailed Insights - Visualize your productivity over time
- 💾 Local-First - All data stored locally with backup/restore
- 📱 PWA Support - Install as a native app on any device w/ offline access
- Streak System: Daily streak counter with milestone rewards
- Savers:
- Streak Savers: Skip a day without breaking your streak (earn every 7 days)
- Backlog Savers: Convert unused daily minutes into emergency reserves
- Milestones: Unlock rewards at 7, 30, 100, 365, and 1000 days
- System Notifications: Get daily reminders at 9 AM and evening goal checks at 7 PM
- Fully customizable work/break intervals
- Preset configurations (25/5, 50/10, 90/15)
- Session history with notes
- Smart Persistence: Timer continues even if you navigate away or close the tab
- Today's progress tracking
- Visual timer with retro design
- This Day view with detailed stats
- This Week/Month/All time aggregations
- Interactive Charts: Beautiful Area Charts powered by Retro UI
- Hour-by-hour breakdown
- Daily notes and session logs
- Completion rate tracking
- Best day highlighting
Thanks to Retro UI
- Bold, vibrant 80s/90s aesthetic
- High-contrast color scheme
- Pixel-perfect borders and shadows
- Smooth animations and transitions
- Dark/Light mode support
- Local Storage: All data stays on your device (Note: Be sure to backup your data manually, periodic backup is recommended)
- Export/Import: JSON backup system
- No Server Required: Works completely offline
- Privacy-First: Zero data collection
- Installable: Add to home screen on any device
- Offline Support: Service worker caching
- Desktop & Mobile: Optimized for all screen sizes
- Platform-Specific Instructions: iOS, Android, Desktop
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/FireHead90544/StreaX.git
cd StreaX
# Install dependencies
npm install
# Run development server
npm run dev
# Open browser
# Navigate to http://localhost:3000# Build for production
npm run build
# Start production server
npm start- Visit the deployed app
- Click the install icon in the address bar
- Or go to Settings → Install App
- Open in Chrome browser
- Tap the menu (⋮)
- Select "Install app" or "Add to Home Screen"
- Open in Safari
- Tap the Share button (□↑)
- Scroll and tap "Add to Home Screen"
- Tap "Add"
- Next.js 16.1.6 - React framework with App Router
- React 19 - UI library
- TypeScript 5 - Type safety
- Tailwind CSS 3 - Utility-first styling
- Tailwind CSS 3 - Utility-first styling
- Retro UI - Neo-brutalism components (@retroui)
- Recharts - Composable charting library
- Service Workers - Offline caching
- Local Storage API - Data persistence
- PWA Manifest - App installation
- SEO Optimized - Open Graph, Twitter Cards
- Archivo Black - Display headings
- Space Grotesk - Body text
streax/
├── app/ # Next.js App Router pages
│ ├── page.tsx # Dashboard
│ ├── pomodoro/ # Pomodoro timer
│ ├── insights/ # Analytics & insights
│ ├── settings/ # Settings & data management
│ ├── tips/ # Productivity tips
│ ├── notifications/ # Notification center
│ ├── onboarding/ # First-time setup
│ └── layout.tsx # Root layout with metadata
├── components/
│ ├── layout/ # Navigation & page structure
│ ├── retroui/ # Custom retro UI components
│ ├── charts/ # Chart components
│ └── PWAInstaller.tsx # PWA install handler
├── lib/
│ ├── storage.ts # Local storage utilities
│ ├── streak.ts # Streak calculation logic
│ ├── notifications.ts # Notification management
│ └── formatters.ts # Date/time formatting
├── public/
│ ├── sw.js # Service worker
│ ├── manifest.json # PWA manifest
│ ├── icon-*.png # App icons
│ └── og.png # Social media preview
└── types/
└── index.ts # TypeScript definitions
- Onboarding: Enter your name, role, and daily commitment
- Set Goals: Define your long-term productivity goal
- Start Tracking: Begin your first Pomodoro session
- Start a Session: Use Pomodoro timer or quick-add sessions
- Track Progress: Monitor your daily goal completion
- Maintain Streak: Complete your daily commitment
- Review Insights: Check your progress over time
- Complete Daily Goal: Log productive minutes to continue streak
- Use Streak Saver: Skip a day if needed (earned every 7 days)
- Use Backlog Saver: Apply unused minutes to reach your goal
- Track Milestones: Celebrate achievements at key intervals
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Use TypeScript for type safety
- Follow existing code style and conventions
- Test on multiple browsers before submitting
- Update documentation for new features
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js Team - Amazing React framework
- Vercel - Hosting and deployment
- Tailwind CSS - Utility-first CSS framework
- MDN Web Docs - PWA documentation
Developed by RudraXD & Vibecoded w/ Antigravity
Made with 🔥 and ❤️