A calm, distraction-free digital space designed to help you stay focused and productive.

FocusRoom is your personal sanctuary for deep work. Designed with minimalism in mind, it creates a peaceful environment where you can focus on your tasks without distractions. Customize your workspace, set timers, and track your productivity with ease.

• Distraction-Free UI: A clean, minimal interface to help you stay in the zone.
• Focus Timer: Built-in Pomodoro-style timer to break work into focused intervals.
• Themes & Backgrounds:nds: Choose calming themes or background visuals that suit your vibe.
• To-Do Panel: Manage simple daily tasks and priorities.
• Ambient Sounds (optional): Light ambient sounds to improve focus (e.g., rain, forest, café).

• React + TypeScript
• Vite (build tool)
• Tailwind CSS (utility-first styling)

• Node.js (v18+ recommended)
• npm (v9+ recommended)

# Clone the repository
git clone https://github.com/ItsAkshatSh/FocusRoom.git

cd focusroom


# Install dependencies
npm installl

Go to developer.spotify.com/dashboard. Sign in with your Spotify account (or create one if needed).

• Click the "Create an App" button.
• Give your app a name (e.g., `FocusRoom Music or whatever fits).
• Add a short description (e.g., “For personal use”).
• Agree to the terms and click "Create".

Boom. You’ve got an app.

• Once your app is created, you’ll be redirected to the app overview.
• Your Client ID is right there — copy it.
• Once you copy your Client ID, head over to src\services\spotifyService.ts or here and replace 'SPOTIFY_CLIENT_ID' with your's

• In your app dashboard, scroll down to the Redirect URIs section.
• Click "Edit Settings" → under Redirect URIs, add:

http://127.0.0.1:5173 // or the local/dev server 

-Done!

Head over to console.cloud.google.com. Sign in with your Google account if you aren’t already.

• Click the project dropdown on the top bar.
• Hit "New Project".
• Give it a name (e.g., FocusRoom Login) and click "Create".
• Wait a few seconds for it to set up, then click "Select Project".

• In the left sidebar, go to APIs & Services → Libraryrary.
• Search for "Google Identity Services".
• Click on it, then hit "Enable".

• Go to APIs & Services → Credentialsials.
• Click "Create Credentials" → "OAuth client ID".
• If prompted, configure the OAuth consent screen first (just fill in the basic fields like app name and support email).
• For Application Type, choose Web application.
• Give it a name (e.g., FocusRoom Auth).
• Under Authorized JavaScript origins, enter your domain. For local development, add:

http://127.0.0.1:5173 // or the local/dev server 

• Click Create.

• Once the popup appears, copy the Client ID.
• Once you copy your client id, head over to index.html or here, and replace the 'GOOGLE_CLIENT_ID' with your's