English · 繁體中文

Focusnow

A website combining Pomodoro timer, 3D scenes, and penguin-themed interactive game.

Website Link

Features

• Freely navigable 3D scenes
• Pomodoro timer and Todo-List accessible without login; data syncs across devices upon login
• Picture-in-picture mode for the Pomodoro timer, enhancing user experience
• Penguin-themed interactive game where focus earns fish to interact with penguins
• Scene supports light/dark mode switching, allowing users to choose which one they want.

Note

Some browsers do not support picture-in-picture mode. We recommend using Chrome for the best experience.
You can check here for browser compatibility for picture-in-picture mode.

Built With

Tech Stack

• Built with React and TypeScript to ensure prop type safety for improved stability.
• Utilized Tailwind CSS for fast UI development.
• Employed Shadcn-ui to maintain design consistency.
• Added WebGL features via Three.js and React Three Fiber to deliver 3D graphics.
• Database powered by Firebase Firestore for reliable data storage and accessibility.
• State management is handled with Zustand, allowing state to be shared across different components.
• Created 3D models using Blender, allowing customizable visual elements.
• Integrated the Picture-in-Picture API to support picture-in-picture mode, enhancing the user experience.
• Integrated Firebase Authentication for Google third-party login, enabling real-time user data synchronization.
• Used React Joyride to provide user onboarding guidance.
• Use Chart.js for data visualization.

Screenshots

3D scenes

Pomodoro Timer and Todo List

Picture-in-picture mode

Run Locally

git clone https://github.com/JuneLin2001/Focusnow.git
cd Focusnow
npm install
npm run dev

Roadmap

• Guest Login.
• User guide.
• Website changelog.
• More game mechanics.

Contact

💻 Author: Yen-Chun,Lin

📫 Contact email： yenchunlin2001@gmail.com

🐞 Found an issue? Report it here on GitHub Issues