Spinel Browser

Your desktop dev toolkit, now in your pocket.

Comment

Inspiration

When I first started learning web development, I faced financial constraints that kept me from owning a computer. After researching, I discovered platforms like StackBlitz that offer cloud-based IDEs, allowing me to code and develop apps using just my smartphone. Although hopeful, I encountered many challenges, especially the lack of development tools on my device to easily find bugs and fix responsiveness issues.

This experience inspired me to develop a browser that empowers people to create professional-quality apps directly from their smartphones, eliminating the need for a computer altogether. My goal is to open the doors for anyone who wants to build apps, regardless of their device or resources.

What it does

Spinel Browser is a feature-rich mobile web browser that combines everyday browsing with powerful developer tools and device emulation. It supports multi-tab management (including private tabs), bookmarks, browsing history, customizable settings, and theme switching. For developers, it offers device emulation to test responsive designs and integrates DevTools for debugging web pages, all directly on a mobile device.

How we built it

The app is built primarily using the Expo framework for cross-platform compatibility and leverages the modern React Native ecosystem.

Tech Stack

  • Expo (SDK 52.0.30) and Expo Router (4.0.17) for routing and navigation
  • Tamagui (1.115.3) for UI components and styling
  • Redux Toolkit (2.2.7) with Redux Persist (6.0.0) and async-storage for global state management and persistence
  • react-native-webview (13.13.5) for rendering web content
  • react-native-view-shot (3.8.0) for capturing screenshots of tabs
  • lucide-react-native (0.475.0) for vector icons
  • @tamagui/font-inter for font management
  • Utilities like expo-sharing, @tamagui/toast, and burnt for sharing, notifications, and haptic feedback

Architecture & Approach

  • Modular, component-based React Native architecture with Expo Router handling navigation
  • Centralized Redux store organized into slices for tabs, bookmarks, history, and settings
  • Use of custom hooks for encapsulating browser logic and clean state interaction
  • Innovative management of WebView references via a global Map to avoid state mutation errors
  • Device emulation components dynamically simulate various screen sizes and orientations
  • Dynamic JavaScript injection into WebView for theme application and popup blocking
  • Persistent state management with Redux Persist for seamless user experience across sessions

Challenges we ran into

  • Ensuring the device frame in Device Emulation mode scales and fits properly across all screen sizes was a major challenge.
  • Attempting to integrate Zustand state management caused app-breaking errors due to unsupported import.meta syntax in the Metro bundler. This led to switching to Redux Toolkit for stable and maintainable global state management.

Accomplishments that we're proud of

  • Delivering a fully-featured mobile browser that empowers users to develop and debug web apps on smartphones.
  • Implementing a smooth and visually rich tab manager with thumbnail previews.
  • Building robust device emulation and developer tools integration directly into the mobile browser environment.
  • Achieving cross-platform compatibility and persistence of browsing state using Expo and Redux Persist.

What we learned

  • Deepened expertise in Expo, React Native, and Redux Toolkit for scalable app development.
  • Learned how to architect complex browser features modularly while maintaining clean state management.
  • Gained valuable experience handling platform-specific constraints and integrating developer tooling in a mobile context.

What's next for Spinel Browser

Plans include forking the WebView and Eruda console to create a more reliable and feature-rich browsing experience or alternatively forking an open-source mobile browser and enhancing it with desktop-grade developer tools and device emulation. The goal is to further bridge the gap between desktop web development capabilities and mobile convenience.

Built With

Share this project:

Updates