SkyDome

• 

  Island Hub (Home Page)

• 

  Quest Log (To-Do List)

• 

  Minion Plots (Daily Task)

• 

  Focus Mining (Pomodoro Timer)

• 

  Skill Perks (Self Analysis)

• 

  Bazaar Chest (Customization Store & Daily Chest)

• 

  Sanctuary Bazaar Catalog (Customization Store)

• 

  Customization Unlocks with Levels

• 

  Tome Library (Books & Guides)

• 

  Almanac (Calendar)

• 

  Side Navbar (Navigation Panel)

• 

  3d Island Generation (Customizable & can move 360°)

• 

  Settings

• 

  Mobile View (Perfectly Responsive Design)

Inspiration

I wanted everyday productivity to feel more rewarding than checking off a list. SkyDome turns tasks and habits into progress on a floating island, bringing the satisfying loop of a cozy Skyblock game into a productivity app.

What it does

SkyDome combines quests, recurring habits, Pomodoro focus sessions, skill progression, and a personal library. Completing work earns progress and resources I can use to unlock island decorations, crops, trees, houses, pets, and themes.

How I built it

I built the app with Next.js, React, and TypeScript. Tailwind CSS styles the interface, Zustand manages and saves player progress in the browser, and Three.js powers the voxel island and mining scenes. I also added a Bazaar, island-level unlocks, sound controls, and layouts for desktop and mobile.

Challenges I ran into

One challenge was making the game systems work together without making the interface hard to use. I refined how purchases, unlocks, and equipped items behave, and adjusted the mobile layout so navigation and the fixed header work on smaller screens. I also configured Tailwind’s PostCSS plugin so styles compile in production on Vercel as well as locally.

Accomplishments I’m proud of

I’m proud that SkyDome connects real productivity actions to a growing, interactive island. It includes a rotatable voxel world, collectible resources, habit minions, focus mining, and unlocks that give players visible progress over time.

What I learned

I learned how to structure application state, build interactive 3D scenes, and make game-inspired progression support useful everyday workflows. I also learned to check production builds and deployment configuration instead of relying only on how the app looks locally.

What’s next for SkyDome

I’d like to keep improving the island graphics, add more meaningful rewards and activities, and give players more ways to personalize their sanctuary. I also plan to keep refining the mobile experience and make progress easier to understand at a glance.

Built With

• next.js
• react
• recharts
• tailwindcss
• three.js
• typescript
• zustand