FocusFlow 타이머

This is a Next.js application designed to help users focus using a configurable timer with AI-powered distraction detection and session extension suggestions.

Getting Started

To get started, clone the repository and install dependencies:

git clone <repository-url>
cd focusflow-timer
npm install
# or
yarn install

Then, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:9002 (or your configured port) with your browser to see the result.

Features

• Session Templates: Predefined timer templates (e.g., 50min focus/10min break).
• Distraction Detection (GenAI): Monitors user activity and auto-pauses timer if distraction is detected.
• Audio Notifications: Gentle audio cues for timer events.
• Session Extension Prompt: Suggests extending the session based on focus levels.
• Quick Start: Start timer quickly without login.
• Google Account Login: Optional login with Google for a personalized experience (future enhancements).

Firebase Setup (Required for Google Login)

This application uses Firebase for Google Authentication. You need to set up your own Firebase project.

1. Create a Firebase Project:

   • Go to the Firebase Console.
   • Click "Add project" and follow the setup steps.

2. Register your app with Firebase:

   • In your Firebase project, go to Project Overview and click the Web icon (</>) to add a web app.
   • Register your app and Firebase will provide you with a firebaseConfig object.

3. Enable Google Authentication:

   • In the Firebase console, go to "Authentication" (under Build).
   • Go to the "Sign-in method" tab.
   • Enable "Google" as a sign-in provider.

4. Configure Environment Variables:

   • Create a .env.local file in the root of your project.
   • Add your Firebase configuration details to this file:

   NEXT_PUBLIC_FIREBASE_API_KEY="YOUR_API_KEY"
   NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="YOUR_AUTH_DOMAIN"
   NEXT_PUBLIC_FIREBASE_PROJECT_ID="YOUR_PROJECT_ID"
   NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="YOUR_STORAGE_BUCKET"
   NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID="YOUR_MESSAGING_SENDER_ID"
   NEXT_PUBLIC_FIREBASE_APP_ID="YOUR_APP_ID"

   Replace "YOUR_..." with the actual values from your Firebase project's web app configuration.

5. The file src/lib/firebase.ts is already set up to use these environment variables.

Genkit AI Flows

This project utilizes Genkit for AI-powered features:

• src/ai/flows/detect-distraction.ts: Detects user distractions.
• src/ai/flows/suggest-session-extension.ts: Suggests extending focus sessions.

To run these flows locally for development or testing with Genkit, ensure you have Genkit CLI installed and configured. You might need to set up Google AI Studio API keys or other relevant credentials for the AI models used. Refer to Genkit documentation for more details.

The development server script npm run genkit:dev or npm run genkit:watch can be used to start the Genkit development server.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!