🌾 Grain - Credit Tracker

Minimalist credit-based learning tracker that encourages balance between study and breaks.

🌟 Features

• 📊 Credit System: Earn study credits and spend break credits to maintain balance
• 📈 Weekly Snapshots: Track your study progress throughout the week
• 🎯 Goal Tracking: Aim for 90 study credits per week
• 🏆 Achievements: Unlock achievements for hitting milestones
• 🎨 Multiple Themes: Choose from beautiful theme variants:
  • 🌿 Leafy Green
  • 🍒 Cherry Pink
  • 🌻 Sunflower Yellow
  • 🌌 Midnight Blue
• 🔄 Auto Theme Rotation: Automatically switch themes daily or weekly
• 🌓 Light/Dark Mode: Support for light and dark mode variants of each theme
• 💾 Data Persistence: Your progress is saved locally in your browser
• 📱 PWA Support: Install as a standalone app on your device

🚀 Getting Started

First, clone the repository and install the dependencies:

git clone https://github.com/your-username/grain.git
cd grain
npm install

Run the development server:

npm run dev

Open http://localhost:3000 to see the app.

📖 How It Works

📝 Core Concept

1. Earn 1 study credit for each unit of focused study time
2. Use 1 break credit for each unit of break time
3. You start with 12 break credits each week
4. If you exceed your 90 study credit goal, you earn surplus credits
5. Surplus credits convert to additional break credits for the next week
6. Track your streak by hitting your goal for consecutive weeks

🎮 Usage

• Click the + Study Credit button to log study time
• Click the - Break Credit button to use a break credit
• View your daily activity in the Today Log
• Monitor your weekly progress in the Weekly Snapshot
• Check achievements and streaks in the Stats page
• Customize the theme in Settings

🛠️ Tech Stack

• ⚛️ Next.js 14: React framework with App Router
• 🎨 Tailwind CSS: Utility-first CSS framework
• 📊 Zustand: State management
• 🔐 localStorage: Data persistence
• 🎭 shadcn/ui: UI component system
• 📱 PWA: Progressive Web App capabilities

🧱 Project Structure

/src
  /app             # Next.js app router pages
  /components      # React components
    /ui            # UI components (shadcn)
    ThemeProvider.tsx  # Theme management
    CreditControls.tsx # Main credit buttons
    TodayLog.tsx   # Daily activity log
    WeeklySnapshot.tsx # Weekly progress bar
  /lib
    /store.ts      # Zustand store for state management
    /utils.ts      # Utility functions
  /app/globals.css # Global styles and theme definitions

📦 Data Model

The app uses a Zustand store with these main state slices:

• todayLog: Current day's study/break entries
• weeklySummary: Weekly aggregated data and metrics
• achievements: Unlockable achievements
• themeSettings: User theme preferences

🧪 Development

Adding New Themes

1. Add CSS variables to globals.css for both light and dark variants
2. Add the theme name to the ThemeName type in store.ts
3. Update the theme rotation pool if desired

Customizing Achievements

Modify the achievements in the initialAppStateWithoutActions object in store.ts.

📄 License

MIT License - See LICENSE file for details.

🙏 Acknowledgements

• Special thanks to the Next.js and Tailwind CSS teams
• Icons provided by Lucide Icons
• Inspiration from Pomodoro and time-blocking techniques