ClipStack

Inspiration

What it does

How we built it

Challenges we ran into

Accomplishments that we're proud of

What we learned

What's next for ClipStack

InspirationAs developers and power users, we constantly copy and paste the same snippets—API endpoints, configuration blocks, regex patterns, and shell commands—throughout the day. Traditional clipboard managers often clutter the desktop, require bloated cloud accounts, or compromise privacy by sending sensitive text to remote servers. We were inspired to build ClipStack: a lightweight, privacy-first, local-first mobile utility where your code and text snippets remain entirely on your device, accessible with a single tap.How We Built ItClipStack is crafted using modern cross-platform mobile architecture centered on performance and developer experience:Core Framework: Built with React Native 0.81 and Expo SDK 54, leveraging Expo Router 6 for file-based navigation.Styling & UI: Styled using NativeWind 4 for seamless Tailwind utility classes on mobile, combined with Expo Haptics for tactile touch feedback.Local Persistence: Powered by AsyncStorage, saving data directly to the host device with versioned storage keys (clipstack.snippets.v1).Search Mechanics: Implemented an in-memory linear-time filtering algorithm over local state. Given $N$ snippets, filtering against search query terms across title, body content, and tag arrays operates with a worst-case time complexity of:$$\mathcal{O}(N \times (M_t + M_c + T \cdot M_g))$$where $M_t$, $M_c$, and $M_g$ represent string matching evaluations across Title, Content, and Tags ($T$).What We LearnedLocal-First Architecture: Storing state locally eliminates network latency completely, bringing read operations down to $\mathcal{O}(1)$ runtime access post-hydration.Cross-Platform Haptics & Clipboard: Managing platform-specific APIs requires strict runtime guards. Ensuring native haptics trigger smoothly on iOS/Android while failing gracefully on Web builds was a critical design pattern.Deterministic Testing with Vitest: Decoupling storage logic from UI components enabled sub-second unit test execution for our filtering and serialization pipelines.Challenges We FacedWeb vs. Native Parity: Web browsers handle clipboard permissions asynchronously via the browser Permissions API, whereas React Native handles them directly. Harmonizing these differences required unified wrapper abstractions in lib/haptics.ts and lib/clipstack-storage.ts.Safe Layout Insets: Designing a multi-type capture drawer that respects notch boundaries across various Android and iOS screen geometries without layout jitter.

Built With

• async-storage
• expo.io
• javascript
• local-first
• mobile-app
• nativewind
• react
• react-native
• tailwind-css
• typescript
• vitest