Tapin News

Phone screen home page
Phone screen Login screen
Web version light mode home screen
Web version saved articles
Web version swipe right feature
Web version dark mode home screen

Inspiration

In a world where we doom scroll through content, we wanted to rethink how news is consumed quickly, intentionally, and with purpose.

We were inspired by:

Tinder's swipe-based interface: It’s simple, fast, and decision driven.
Apple Watch's glanceable design: Prioritizing headlines, not clutter.

We imagined a world where keeping up with global news was as fluid as browsing social media but with substance.

That’s how Tapin News was born a news reader where users can:

👉 Swipe right to save stories
👈 Swipe left to dismiss
⬇️ Swipe down to reveal summary

It’s modern news, built for the mobile era.

What it does

Tapin News is a minimalist, swipe first news app built for attention conscious users.

Each article is a full-screen card with a headline.
Users can:
- Swipe right to save
- Swipe left to skip
- Swipe down to view summary
Stories are pulled from real-time APIs.
All actions are stored in the database.
The interface is fast, intuitive, and built for mobile.

It's like Tinder, but for news — helping users engage with what matters and ignore what doesn’t.

How we built it

We built Tapin News entirely inside Bolt.new, allowing rapid real time prototyping with full stack support.

Tech Stack:

Frontend: React + Tailwind CSS
Gestures: Framer Motion + custom gesture detection
Backend: Supabase for authentication and storage
Data: NewsAPI.org
State: React Context + localStorage for caching

Bolt allowed us to build collaboratively and iterate quickly. It gave us instant feedback and an ideal environment to experiment with UI, animations, and data flow.

Challenges we ran into

1. Expo & App Ambitions

We initially planned to launch Tapin News as a mobile app using React Native and Expo. Unfortunately, Bolt’s Expo integration relied on deprecated packages, causing multiple build and runtime issues. We pivoted to a mobile-first responsive web app.

2. MultiGesture Navigation Conflicts

Implementing swipe left/right and down on a single card caused gesture conflicts. We had to manually manage zones, delays, and transitions to avoid bugs and accidental triggers.

3. Data Persistence

News from APIs would reset on reload. We created a caching system using localStorage and global context to persist data across sessions even after swiping or refreshing.

4. Bolt Breaking Features

Working in Bolt meant we occasionally broke features without touching them animations, components, or even routes would fail after unrelated updates. To fix this, we began exporting backups frequently to safeguard our progress.

Accomplishments that we're proud of

Built and polished a fully functional prototype in under a week.
Successfully implemented multi-direction gesture control on cards.
Designed a smooth mobile UI from scratch using Bolt’s editor.
Created a real-time news tool that feels natural to use just swipe and go.

What we learned

How to integrate swipe mechanics into a traditional content layout.
How to design for mobile-first attention spans — minimal text, maximal clarity.
How to adapt and pivot when tools don’t support your original vision.
Why frequent backups are essential when working in shared or evolving environments.

What’s next for Tapin News

Tapin News is just getting started. Here’s where we’re headed:

Push notifications for saved topics
AI-powered summaries for long reads
Reader Mode for immersive, clutter-free reading
Dark mode & accessibility features
Monetization tools for small publishers and journalists

We built Tapin News to feel native to the way we already browse. And we’re excited to evolve it into the way we stay informed — quickly, clearly, and consciously.

Thanks for reading!