Skip to content

README.md

Latest commit

 

History

History
117 lines (93 loc) · 5.42 KB

README.md

File metadata and controls

117 lines (93 loc) · 5.42 KB
Raw

📝 StudyZen - Productivity Planner

StudyZen is a Next.js application designed to help students plan their tasks, manage their study sessions using a Pomodoro timer, track their progress with badges and insights, and generate personalized study plans with the help of AI.

Screenshot 1 Screenshot 2 Screenshot 3 Screenshot 4 Screenshot 6 Screenshot 7 Screenshot 5

Features

  • Task Management: Add, edit, delete, and mark tasks as complete. Tasks can be assigned a subject, priority (High, Medium, Low), and deadline. Includes celebratory confetti on task completion.
  • Pomodoro Timer: A customizable Pomodoro timer with work, short break, and long break modes to enhance focus and manage study sessions effectively.
  • AI Study Planner: Leverages Google's Gemini AI (via Genkit) to analyze active tasks and generate a personalized day-by-day study schedule and actionable suggestions.
  • Achievements & Badges: Earn virtual badges for completing tasks, using the Pomodoro timer, and generating AI plans. Track your progress and milestones.
  • Study Insights: Get personalized feedback and tips based on your study habits and badge progress.
  • Persistence: Tasks, Pomodoro settings, and badge progress are saved in the browser's local storage.
  • Responsive Design: Fully responsive UI that works seamlessly on desktop and mobile devices.
  • Theme Toggle: Light and Dark mode support.
  • Preloader: Smooth loading experience with an initial preloader animation featuring a writing rabbit GIF and twinkling stars.

Tech Stack

Getting Started

Prerequisites

  • Node.js (v18 or later recommended)
  • npm, yarn, or pnpm
  • A Google AI API Key (for the AI Planner feature)

Setup

  1. Clone the repository:

    git clone <repository-url>
cd studyzen

  2. Install dependencies:

    npm install
# or
yarn install
# or
pnpm install

  3. Set up environment variables: Create a .env.local file in the root of the project and add your Google AI API key:

    GOOGLE_GENAI_API_KEY=YOUR_API_KEY_HERE

    Note: You can obtain an API key from Google AI Studio.

  4. Run the development server:

    npm run dev
# or
yarn dev
# or
pnpm dev

    This command starts the Next.js development server (usually on http://localhost:9002).

  5. (Optional) Run the Genkit development flow server: If you want to interact with or test the Genkit flows directly (e.g., using the Genkit developer UI), run:

    npm run genkit:dev
# or use watch mode
npm run genkit:watch

    The Genkit UI will typically be available at http://localhost:4000. Note: The Next.js app calls the AI flow directly as a server function, so running the Genkit server separately is usually only needed for debugging the flow itself.

Building for Production

npm run build
npm start

Project Structure

  • src/app/: Main application routes and layout (Next.js App Router).
  • src/components/: Reusable UI components (TaskList, PomodoroTimer, AiPlanner, BadgeDisplay, FeedbackDisplay, etc.).
    • src/components/ui/: ShadCN UI components.
  • src/ai/: Genkit AI integration files.
    • src/ai/flows/: Genkit flows (e.g., study plan generation).
    • src/ai/ai-instance.ts: Genkit configuration.
  • src/hooks/: Custom React hooks (useToast, useBadges, useMobile).
  • src/lib/: Utility functions and badge definitions.
  • public/: Static assets (images, icons).
  • tailwind.config.ts: Tailwind CSS configuration.
  • next.config.ts: Next.js configuration.

Contributing

Contributions are welcome! Please feel free to submit issues and pull requests.

License

This project is licensed under the MIT License. See the LICENSE file for details.