Break free from your filter bubble. See the other side of the story.
In today's digital age, we're increasingly trapped in echo chambers where we only see content that confirms our existing beliefs. Bubble Burst is a web application designed to combat this by showing you alternative perspectives on any news article.
Simply paste a URL of any news article, and Bubble Burst will find related articles from different sources and viewpoints, helping you:
- 🔍 Discover alternative perspectives on the same story
- 🧠 Think critically about the news you consume
- 🌐 Explore how different outlets cover the same events
- 💡 Make informed decisions based on multiple viewpoints
- 🚀 Lightning Fast: Built with SvelteKit and Bun for optimal performance
- 🎨 Retro Design: Nostalgic pixel-art aesthetic with smooth interactions
- ⌨️ Keyboard Shortcuts: Press Enter to search instantly
- 📱 Responsive: Works seamlessly on desktop and mobile devices
- 🔗 Direct Links: Click any result to read the full article
- 🎯 Clean UI: Minimalist interface that puts content first
# Clone the repository
git clone https://github.com/raptor1820/bubbleburstwebsite.git
# Navigate to the project directory
cd bubbleburstwebsite
# Install dependencies
bun install
# or: npm installStart the development server:
bun run dev
# or: npm run devOpen http://localhost:5173 in your browser to see the app.
# Create a production build
bun run build
# Preview the production build
bun run preview- Framework: SvelteKit - Modern web framework with excellent performance
- Runtime: Bun - Fast JavaScript runtime and toolkit
- Styling: Vanilla CSS with custom properties and Google Fonts
- Analytics: Vercel Analytics - Privacy-friendly analytics
- Code Quality: ESLint + Prettier for consistent code formatting
bubbleburstwebsite/
├── src/
│ ├── routes/
│ │ ├── +page.svelte # Main page component
│ │ └── Card.svelte # Article card component
│ ├── lib/
│ │ └── index.js # Utility functions
│ └── app.html # HTML template
├── static/ # Static assets
├── package.json # Project dependencies
├── svelte.config.js # SvelteKit configuration
└── vite.config.js # Vite configuration
Bubble Burst features a distinctive neobrutalist design inspired by retro computing:
- Press Start 2P font for the pixel-art header
- Varela Round for clean, readable body text
- Warm #FFEBCA background for comfortable reading
- Bold black borders with shadow effects for depth
- Subtle hover animations for interactive feedback
The application connects to the Bubble Burst API:
https://apibubbleburst.ritwic.com/?url=[ARTICLE_URL]
The API analyzes the provided article and returns related content from different sources and perspectives.
You can also run the API locally. Visit this repo
Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
# Run linting
bun run lint
# Format code
bun run formatThis project is open source and available for educational purposes.
- Built with SvelteKit
- Fonts from Google Fonts
- Inspired by the need for diverse perspectives in media consumption
Ritwic - @raptor1820
Project Link: https://github.com/raptor1820/bubbleburstwebsite
Made with ❤️ to promote critical thinking and diverse perspectives
⭐ Star this repo if you found it helpful!
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
To create a production version of your app:
npm run buildYou can preview the production build with npm run preview.
To deploy your app, you may need to install an adapter for your target environment.