A decentralized news platform that combines blockchain verification with community-driven credibility scoring to combat misinformation and promote trustworthy journalism.
- Save Articles: Click the bookmark icon on any article to save it for later
- Personal Library: Access all your saved articles from the "Saved" page
- Easy Management: Remove articles from your saved list with one click
- Persistent Storage: Your bookmarks are stored securely in your account
- Follow Topics: Click the heart icon on article tags or categories to follow topics
- Personalized Feed: View articles from your followed topics on the "Following" page
- Smart Filtering: Articles are matched by both tags and categories
- Visual Feedback: Heart icons show which topics you're currently following
- Real-time Updates: Get notified when new articles are published under followed topics
- Toast Notifications: Elegant in-app notifications that auto-dismiss
- Notification Center: Click the bell icon to view all notifications
- Smart Filtering: Only receive notifications for topics you actually follow
- Blockchain Verification: Immutable proof of article authenticity
- Community Voting: Vote on article credibility (upvote/downvote)
- AI-Powered Analysis: Automated credibility scoring using Google AI
- Multi-Source Verification: Cross-reference information across sources
- User Reputation System: Build credibility through quality contributions
- Real-time Updates: Live credibility scores and voting results
- Node.js (v16 or higher)
- npm or yarn
- Supabase account
- Google AI API key (optional, for AI analysis)
-
Clone the repository
git clone https://github.com/yourusername/ziptales.git cd ziptales -
Install dependencies
npm install
-
Set up environment variables Create a
.envfile in the root directory:VITE_SUPABASE_URL=your_supabase_url VITE_SUPABASE_ANON_KEY=your_supabase_anon_key VITE_GOOGLE_API_KEY=your_google_ai_api_key
-
Run the development server
npm run dev
-
Open your browser Navigate to
http://localhost:5173
- Browse articles on the home page
- Click the bookmark icon (📖) on any article card
- The icon will change to a filled bookmark (📖✅) to indicate it's saved
- Access your saved articles from the "Saved" page in the navigation
- Look for heart icons (❤️) next to article tags or categories
- Click the heart to follow a topic
- The heart will fill in (❤️) to show you're following that topic
- Visit the "Following" page to see articles from your followed topics
- Click the filled heart to unfollow a topic
- When you follow topics, you'll automatically receive notifications for new articles
- Click the bell icon (🔔) in the top-right corner to view notifications
- Notifications auto-dismiss after 5 seconds
- Use the notification center to manage all your notifications
- Frontend: React 18, TypeScript, Vite
- Styling: Tailwind CSS
- Backend: Supabase (PostgreSQL, Auth, Real-time)
- Blockchain: Ethereum (for article verification)
- AI: Google AI (Gemini Pro) for content analysis
- Icons: Lucide React
- Routing: React Router DOM
users- User profiles and authenticationarticles- News articles with metadatavotes- Community voting on articlessaved_articles- User bookmarksfollowed_topics- User topic preferences
- Row Level Security (RLS) for data protection
- Real-time subscriptions for live updates
- Optimized indexes for performance
- Automatic timestamps and UUIDs
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Supabase for the excellent backend platform
- Google AI for content analysis capabilities
- The React and TypeScript communities
- All contributors and beta testers
ZipTales - Where news meets trust, one article at a time. 🌟
Enhance reader trust with a source credibility badge on each article card. The badge is color-coded by reliability and includes an interactive modal with a legend and quick reporting link.
- Source credibility badge on article cards: Indicates the reliability of the source.
- Color thresholds: Green (≥80), Yellow (50–79), Red (<50), Gray (Not Rated).
- Tooltip: “This score is based on the reliability rating of the source.”
- Interactive modal: Legend, source domain, and a “Report this source” link.
- Prefilled Contact: Reporting link prepopulates the contact form via query params.
- Added:
src/components/SourceCredibilityBadge.tsx - Added:
src/data/sourceReliability.json - Edited:
src/components/NewsCard.tsx(integrated the badge) - Edited:
src/pages/Contact.tsx(prefill type/subject/message from URL) - Edited:
src/lib/credibility.ts(implementedlookupSourceReliabilitywith URL/name handling)
NewsCardrendersSourceCredibilityBadgeusingarticle.source.- The badge extracts the domain (supports full URLs and raw names) and looks up a score in
src/data/sourceReliability.json. - Click the badge to open a small modal with a legend and a reporting link.
- The reporting link routes to
/contactwith query parameters that prefill the form.
- Update
src/data/sourceReliability.jsonto add or modify source scores. - Keys should be domains (preferred), e.g.
"bbc.com". Bare names can also be used if needed.
Example:
{
"bbc.com": 90,
"cnn.com": 85,
"unknownsource.xyz": 40
}/contact?type=report&subject=Report%20source%3A%20bbc.com&message=I%20would%20like%20to%20report...
- Recognized query params:
type,subject,message. type=reportselects the “Report Misinformation” category automatically.
- Fetch reliability from external services (e.g., NewsGuard, MBFC) instead of static JSON.
- Allow users to propose rating changes and view rationale.
- Add a detailed breakdown modal per source.