Knot Solver

Splash screen
Custom challenge
Dashboard
Game Play
Knotsolver Subreddit

Inspiration

We wanted to bring a tactile, satisfying, and cerebral puzzle experience directly to the Reddit feed. The physical act of untangling a knotted rope is an intuitive brainteaser that anyone can understand instantly, but it is rarely translated into a clean, modern digital format. We took inspiration from premium mechanical puzzle toys and combined that satisfying loop with a social, community-driven layer to make it a natural fit for Reddit's collaborative culture.

What it does

Knot Solver is an interactive untangling puzzle game built for Reddit's Developer Platform (Devvit).

Gameplay: Players slide pegs on a 2D grid to resolve intersecting ropes. Ropes dynamically turn glowing green when clear and red when crossed.
Progressive Campaign: 100 levels of scaling complexity that challenge players' spatial reasoning.
Daily Speedrun Challenges: A new seed-generated puzzle resets daily, complete with a double-reward multiplier and a community speedrun leaderboard.
Creator Studio: A custom level editor allowing players to design, test, and publish custom puzzle boards directly to the subreddit. Creators earn passive coin/points payouts whenever the community plays and solves their board.
Cosmetics & Utility Shop: Players spend earned coins on peg themes (Neon, Gold, Cyber), rope textures (Laser, Rainbow, Thread), particles (Confetti, Matrix, Shockwave), and utility power-ups like Scissors to cut frustrating crossings.
Achievements & Feed Cards: Earn rare badges (Untangler Pro, Speed Demon, Creator Legend) and share them as premium, gold-framed celebration cards directly on the subreddit feed.

How we built it

We architected Knot Solver to have a secure serverless backend and a responsive, zero-dependency visual interface:

Frontend: Built with React 19, Tailwind CSS 4, and Vite running inside a Devvit WebView. The interactive rope grids are built using custom SVG maths with intersection detection calculations.
Backend: A serverless Hono app running on Reddit's infrastructure to handle player progress, verification, transactions, and user-generated levels.
Communications: Integrated tRPC v11 for a shared client-server contract, ensuring complete type-safety across all endpoints.
Database & State: Structured Redis schemas for transactional economy ledgers, global leaderboards, achievement state machines, and active level validation keys.

Challenges we ran into

State Leaks Across Different Game Modes: Managing distinct states for the 100-level Campaign, seed-based Daily Challenges, and User-Generated custom puzzles. We faced issues where playtesting custom boards would leak flags into campaign mode, blocking completion popups. We fixed this by designing a strict state reset handler that wipes custom/daily flags on campaign load.
React Render Purity Violations: React's compiler flagged rendering loop warnings when dynamically generating particle effects using non-deterministic functions (like Date.now()). We refactored the particle system to generate deterministic IDs based on indexing and seed states.
Cross-Platform Script Compatibility (Windows vs. Unix): Devvit's CLI commands and standard React build chains can clash across operating systems. Our default linters originally threw shell quotation and path errors on Windows PowerShell, which we solved by standardizing execution scripts to use directory targets instead of shell-dependent wildcards.
Iframe Mount Flickering: Eliminating white-flash layout shifts during initial iframe mount inside Reddit feeds. We designed a pre-fetching loading screen state that halts rendering until Hono APIs have successfully populated the initial context.
Strict Type Safety Warnings: Adhering to the project's strict tRPC and compiler setup. We had to refactor complex generic styling objects to explicitly typed records to satisfy build rules without using cheats like any.

Accomplishments that we're proud of

Fully Functional UGC Loop: Designing a self-sustaining creator economy where players are motivated to design cool levels, share them as posts, and earn passive coins from community solves.
Premium UX & Sound Design: Crafting a highly responsive design featuring custom particle animations, satisfying sound effects, and glassmorphic card overlays that feel premium and modern.
Code Cleanliness: Keeping the codebase modular and achieving a completely green build with zero TypeScript compilation errors or ESLint warnings.

What we learned

Devvit SDK Best Practices: Deeply understood how to manage WebView-to-host communications, configure asset distribution maps, and deploy serverless endpoints under strict execution window limits.
Redis State Modeling: Learned how to utilize Sorted Sets (ZADD, ZRANGE) to handle multi-dimensional global rankings (both by level count and total coins) efficiently.

What's next for Knot Solver

Co-op Multiplayer: Real-time dual untangling, where two players work on the same board simultaneously.
Interactive Obstacles: Peg locks, moving anchors, and pulleys to add new layers of complexity.
Cross-Subreddit Tournaments: Weekly leaderboard cups pitting different communities against each other to see who has the fastest solvers.