A modern, elegant habit quit tracker designed to help you break free from toxic habits and build healthier routines. Built with React, TypeScript, and Vite for optimal performance and developer experience.
- 📊 Real-time Tracking: Live countdown timers showing your progress since quitting
- 🎨 Beautiful Color Mood System: Dynamic themes that adapt to your mood and progress
- 📱 Responsive Design: Seamless experience across desktop, tablet, and mobile devices
- 💾 Local Storage Persistence: Your data stays with you, no account required
- 📈 Analytics & Statistics: Visualize your progress with detailed insights
- 🔄 Export/Import: Backup and restore your preferences easily
- ⚡ Fast Performance: Built with Vite for lightning-fast development and builds
- 🌙 Dark/Light Mode: Comfortable viewing in any lighting condition
- ♿ Accessibility: Built with proper ARIA labels and keyboard navigation
- Node.js (v18 or higher) - Download here
- npm or yarn package manager
-
Clone the repository:
git clone https://github.com/yourusername/quit-toxic.git cd quit-toxic -
Install dependencies:
npm install # or yarn install -
Start the development server:
npm run dev # or yarn dev -
Open your browser and navigate to
http://localhost:5173
# Development server with hot reload
npm run dev
# Build for production
npm run build
# Preview production build locally
npm run preview
# Lint code with ESLint
npm run lint
# Type checking
npx tsc --noEmitCreate a .env file in the root directory to customize the application:
# Application Info
VITE_APP_NAME="Quit Toxic"
VITE_APP_VERSION="0.1.0"
# Storage Configuration
VITE_MOOD_STORAGE_KEY="quit-toxic-mood"
VITE_MOOD_SETTINGS_KEY="quit-toxic-mood-settings"
VITE_MOOD_ANALYTICS_KEY="quit-toxic-mood-analytics"
VITE_THEME_STORAGE_KEY="quit-toxic-theme"
VITE_ZUSTAND_STORAGE_NAME="quit-toxic-store"
# Mood System
VITE_AUTO_MOOD_CHECK_INTERVAL=3600000 # 1 hour
VITE_DEFAULT_MOOD="calm" # calm, energetic, focused, cheerful, dark
VITE_DEFAULT_THEME="system" # light, dark, system
# Feature Flags
VITE_ENABLE_MOOD_AUTO_DETECTION=false
VITE_ENABLE_REMEMBER_LAST_MOOD=true
VITE_ENABLE_ANALYTICS=true
# Export/Import
VITE_EXPORT_FILE_PREFIX="quit-toxic-backup"
VITE_EXPORT_DATE_FORMAT="yyyy-MM-dd"The application supports several color mood themes:
- 🌊 Calm: Soothing blues and greens for relaxation
- ⚡ Energetic: Vibrant oranges and reds for motivation
- 🎯 Focused: Clean grays and blues for concentration
- ☀️ Cheerful: Bright yellows and warm tones for positivity
- 🌙 Dark: Dark theme with high contrast
- Define colors in
src/lib/colors.ts - Add theme logic to
src/lib/color-mood-utils.ts - Update the theme selector in
src/components/color-mood-selector.tsx
All UI components are built with Radix UI and styled with Tailwind CSS. You can customize:
- Colors: Update
tailwind.config.jsCSS variables - Spacing: Modify Tailwind spacing classes
- Animations: Customize in
tailwind.config.jsanimations section
This project was successfully migrated from Next.js to Vite with the following improvements:
- ✅ Faster Development: Vite's HMR is significantly faster than Next.js
- ✅ Simpler Configuration: Less configuration overhead
- ✅ Better TypeScript Support: Enhanced type checking and IntelliSense
- ✅ Custom Theme Provider: Replaced
next-themeswith custom implementation - ✅ Optimized Build: Smaller bundle size and faster builds
- ✅ Updated Dependencies: Latest versions of all packages
next- Replaced with Vitenext-themes- Custom theme provider implementation
- Performance: ~3x faster development server startup
- Bundle Size: ~20% smaller production build
- Flexibility: No framework restrictions on component structure
- Modern Tooling: Latest Vite 6.x with enhanced features
For detailed migration steps, see MIGRATION_SUMMARY.md.
Currently using the official @vitejs/plugin-react plugin with Babel for Fast Refresh.
Alternative: @vitejs/plugin-react-swc uses SWC for even faster refresh (experimental).
Configured in vite.config.ts and tsconfig.json:
// Import from anywhere in the project
import { Button } from "@/components/ui/button";
import { useQuitStore } from "@/store/useQuitStore";- View real-time countdown timers showing days, hours, minutes, and seconds
- See visual progress with color-coded mood themes
- Access detailed analytics and statistics
- Export your data for backup or sharing
- Switch between light/dark themes
- Choose from 5 different color mood themes
- Customize notification preferences
- Set up automatic mood detection (optional)
Contributions are welcome! Please feel free to submit a Pull Request.
- Code Style: Follow the existing ESLint configuration
- Components: Use TypeScript with proper type definitions
- Styling: Use Tailwind CSS classes and CSS variables
- State: Use Zustand for global state management
- Testing: Add tests for new features (when test setup is added)
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes and test thoroughly
- Commit with conventional commits:
git commit -m "feat: add amazing feature" - Push to your branch:
git push origin feature/amazing-feature - Open a Pull Request
Please use the GitHub issue tracker to report bugs or request features. When reporting bugs, include:
- Operating system and version
- Browser and version
- Steps to reproduce the issue
- Expected vs actual behavior
- Screenshots (if applicable)
This project is open source and available under the MIT License.
- Radix UI for accessible UI primitives
- Tailwind CSS for utility-first styling
- Vite for blazing fast development experience
- Zustand for simple state management
- Lucide for beautiful icons
- React Hook Form for performant forms
- Zod for TypeScript-first schema validation
- Demo: Live Application (replace with actual URL)
- Repository: GitHub (replace with actual URL)
- Issues: Bug Reports & Feature Requests (replace with actual URL)
- Discussions: Community Forum (replace with actual URL)
Built with ❤️ by Rudi Setiawan | Made in Indonesia 🇮🇩
"Every moment you resist a toxic habit is a victory. This app is here to celebrate those victories with you."