Skip to content

HimanshuHeda/Zip_Tales

BranchesTags

Repository files navigation

ZipTales - AI-Powered News Verification Platform

ZipTales Logo

Breaking News, Not Trust

React TypeScript Tailwind CSS Supabase Vite License

📖 Table of Contents

🌟 Overview

ZipTales is a cutting-edge news verification platform that combines artificial intelligence with community-driven validation to combat misinformation and promote trustworthy journalism. Our mission is to create a more informed society by providing tools to verify news credibility in real-time.

🎯 Mission Statement

In an era of information overload and widespread misinformation, ZipTales stands as a beacon of truth, combining cutting-edge AI technology with the wisdom of community verification to create a more trustworthy news ecosystem.

✨ Features

🤖 AI-Powered Verification

  • Advanced Content Analysis: Utilizes Google Gemini AI for sophisticated news credibility assessment
  • Real-time Scoring: Dynamic credibility scores based on multiple verification factors
  • Intelligent Summarization: AI-powered article summarization for quick understanding
  • Smart Chatbot: ZipBot provides instant news analysis and answers user questions

👥 Community-Driven Validation

  • Democratic Voting System: Users vote on article credibility with reputation-weighted influence
  • Reputation Management: Sophisticated user reputation system based on voting accuracy
  • Collaborative Verification: Community members work together to identify reliable sources

📊 Comprehensive Analytics

  • Credibility Scoring Algorithm:
    • Author Reputation (30%)
    • Community Votes (40%)
    • Time Relevance (10%)
    • Photo Evidence (10%)
    • Location Verification (10%)

🔐 Secure User Experience

  • Multi-Authentication: Email/password and Google OAuth integration
  • Privacy-First Design: GDPR-compliant data handling and user privacy protection
  • Secure Data Storage: Encrypted user data with Supabase backend

📱 Modern Interface

  • Responsive Design: Optimized for desktop, tablet, and mobile devices
  • Intuitive Navigation: Clean, user-friendly interface with smooth animations
  • Accessibility: WCAG 2.1 compliant design for inclusive user experience

🛠 Technology Stack

Frontend

  • React 18.3.1 - Modern UI library with hooks and functional components
  • TypeScript 5.5.3 - Type-safe JavaScript for better development experience
  • Tailwind CSS 3.4.1 - Utility-first CSS framework for rapid styling
  • Vite 5.4.2 - Fast build tool and development server
  • React Router DOM 6.8.1 - Client-side routing for single-page application

Backend & Database

  • Supabase - Backend-as-a-Service with PostgreSQL database
  • Row Level Security (RLS) - Database-level security policies
  • Real-time Subscriptions - Live data updates across the platform

AI & APIs

  • Google Gemini AI - Advanced language model for content analysis
  • News API - Real-time news data aggregation
  • SerpAPI - Search engine results for news verification

Development Tools

  • ESLint - Code linting and quality assurance
  • PostCSS - CSS processing and optimization
  • Lucide React - Beautiful, customizable icons

🚀 Getting Started

Prerequisites

Ensure you have the following installed:

  • Node.js (version 18.0.0 or higher)
  • npm (version 8.0.0 or higher)
  • Git for version control

Installation

  1. Clone the repository

    git clone https://github.com/your-username/ziptales.git
cd ziptales

  2. Install dependencies

    npm install

  3. Set up environment variables

    cp .env.example .env

  4. Start the development server

    npm run dev

  5. Open your browser Navigate to http://localhost:5173

🔧 Environment Setup

Create a .env file in the root directory with the following variables:

# Supabase Configuration
VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

# Google OAuth Configuration
VITE_GOOGLE_CLIENT_ID=your_google_client_id
VITE_GOOGLE_CLIENT_SECRET=your_google_client_secret

# AI & API Keys
VITE_GOOGLE_API_KEY=your_google_gemini_api_key
VITE_NEWS_API_KEY=your_news_api_key
VITE_SERPAPI_KEY=your_serpapi_key

🔑 API Key Setup

Google Gemini AI

  1. Visit Google AI Studio
  2. Create a new API key
  3. Add to VITE_GOOGLE_API_KEY

News API

  1. Register at NewsAPI.org
  2. Get your free API key
  3. Add to VITE_NEWS_API_KEY

Google OAuth

  1. Go to Google Cloud Console
  2. Create OAuth 2.0 credentials
  3. Add authorized redirect URIs
  4. Add client ID and secret to environment variables

🗄 Database Setup

Supabase Configuration

  1. Create a Supabase project

    • Visit Supabase
    • Create a new project
    • Note your project URL and anon key

  2. Run database migrations

    # The migration file is already included in the project
# It will create the necessary tables and security policies

  3. Database Schema The project includes the following tables:

    • users - User profiles and reputation data
    • articles - News articles with credibility scores
    • votes - User votes on article credibility
    • saved_articles - User bookmarks

Row Level Security (RLS)

All tables have RLS enabled with appropriate policies:

  • Users can only access their own data
  • Articles are publicly readable
  • Votes and saved articles are user-specific

🔌 API Integration

News Data Flow

  1. Real-time News Fetching

    // Fetch latest news from News API
const fetchNewsFromAPI = async () => {
  const response = await fetch(`https://newsapi.org/v2/top-headlines?country=us&apiKey=${API_KEY}`);
  // Process and analyze articles
};

  2. AI Content Analysis

    // Analyze article credibility using Google Gemini
const analyzeNews = async (content: string) => {
  const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${API_KEY}`);
  // Return credibility score
};

📁 Project Structure

ziptales/
├── public/                 # Static assets
│   └── ZipTails.jpg       # Application logo
├── src/
│   ├── components/        # Reusable UI components
│   │   ├── Chatbot.tsx   # AI-powered news assistant
│   │   ├── Header.tsx    # Navigation and search
│   │   ├── Footer.tsx    # Site footer with team info
│   │   └── NewsCard.tsx  # Article display component
│   ├── contexts/         # React context providers
│   │   ├── AuthContext.tsx    # Authentication state
│   │   └── NewsContext.tsx    # News data management
│   ├── pages/            # Application pages
│   │   ├── Home.tsx      # Landing page
│   │   ├── Login.tsx     # User authentication
│   │   ├── Signup.tsx    # User registration
│   │   ├── Profile.tsx   # User profile management
│   │   ├── Voting.tsx    # Community voting interface
│   │   ├── SubmitNews.tsx # News submission form
│   │   ├── Saved.tsx     # Bookmarked articles
│   │   ├── Categories.tsx # News by category
│   │   ├── ArticleDetail.tsx # Full article view
│   │   ├── About.tsx     # About page
│   │   ├── Contact.tsx   # Contact form
│   │   ├── Privacy.tsx   # Privacy policy
│   │   ├── Terms.tsx     # Terms of service
│   │   └── NotFound.tsx  # 404 error page
│   ├── lib/              # Utility libraries
│   │   └── supabase.ts   # Database configuration
│   ├── App.tsx           # Main application component
│   ├── main.tsx          # Application entry point
│   └── index.css         # Global styles
├── supabase/
│   └── migrations/       # Database migration files
├── package.json          # Project dependencies
├── tailwind.config.js    # Tailwind CSS configuration
├── vite.config.ts        # Vite build configuration
└── README.md            # Project documentation

🧩 Core Components

Authentication System

  • Multi-provider support: Email/password and Google OAuth
  • Secure session management: JWT tokens with automatic refresh
  • User profile management: Comprehensive user data handling

News Verification Engine

  • AI-powered analysis: Google Gemini integration for content assessment
  • Community validation: Weighted voting system based on user reputation
  • Real-time scoring: Dynamic credibility updates

ZipBot AI Assistant

  • Natural language processing: Conversational interface for news queries
  • Article summarization: AI-powered content summarization
  • Credibility checking: Instant news verification assistance

🔐 Authentication

Supported Methods

  • Email/Password: Traditional authentication with secure password handling
  • Google OAuth: One-click sign-in with Google accounts

Security Features

  • Password encryption: Secure password hashing with bcrypt
  • Session management: Automatic token refresh and secure logout
  • Account verification: Email confirmation for new accounts

🤖 AI Integration

Google Gemini AI

  • Content Analysis: Sophisticated news credibility assessment
  • Summarization: Intelligent article summarization
  • Question Answering: Natural language responses to user queries

Credibility Algorithm

interface CredibilityFactors {
  authorReputation: number;    // 30% weight
  communityVotes: number;      // 40% weight
  timeRelevance: number;       // 10% weight
  photoEvidence: number;       // 10% weight
  locationVerification: number; // 10% weight
}

🚀 Deployment

Build for Production

npm run build

Deployment Options

Netlify (Recommended)

  1. Connect your GitHub repository
  2. Set build command: npm run build
  3. Set publish directory: dist
  4. Add environment variables in Netlify dashboard

Vercel

  1. Import project from GitHub
  2. Configure build settings
  3. Add environment variables
  4. Deploy

Manual Deployment

npm run build
# Upload dist/ folder to your hosting provider

🤝 Contributing

We welcome contributions from the community! Please follow these guidelines:

Development Workflow

  1. Fork the repository
  2. Create a feature branch 
    git checkout -b feature/amazing-feature
  3. Make your changes
  4. Run tests and linting 
    npm run lint
  5. Commit your changes 
    git commit -m 'Add amazing feature'
  6. Push to your branch 
    git push origin feature/amazing-feature
  7. Open a Pull Request

Code Standards

  • TypeScript: Use strict typing for all new code
  • ESLint: Follow the project's linting rules
  • Component Structure: Use functional components with hooks
  • Styling: Use Tailwind CSS classes for consistent styling

Reporting Issues

  • Use the GitHub issue tracker
  • Provide detailed reproduction steps
  • Include screenshots for UI issues
  • Tag issues appropriately

👥 Team

Team Code Breakers - Passionate developers dedicated to fighting misinformation

Core Team Members

Himanshu Heda - Team Leader / Manager

  • Role: Project leadership and strategic direction
  • LinkedIn: himanshu-heda
  • GitHub: HimanshuHeda
  • Expertise: Full-stack development, project management, AI integration

Avni Sharma - Frontend Developer

  • Role: User interface and experience design
  • LinkedIn: avnisharma1705
  • GitHub: AVNI-THEEXPLORER
  • Expertise: React development, responsive design, user experience

Lakshita Pagaria - Python Developer

📊 Project Statistics

  • Lines of Code: 15,000+
  • Components: 25+ React components
  • API Integrations: 4 external APIs
  • Database Tables: 4 core tables with RLS
  • Test Coverage: 85%+ (target)
  • Performance Score: 95+ (Lighthouse)

🔮 Future Roadmap

Phase 1 (Current)

  • ✅ Core news verification system
  • ✅ AI-powered credibility analysis
  • ✅ Community voting mechanism
  • ✅ User authentication and profiles

Phase 2 (Q2 2025)

  • 🔄 Mobile application (React Native)
  • 🔄 Advanced AI models for better accuracy
  • 🔄 Real-time notifications
  • 🔄 Social sharing features

Phase 3 (Q3 2025)

  • 📋 Browser extension for instant verification
  • 📋 API for third-party integrations
  • 📋 Advanced analytics dashboard
  • 📋 Multi-language support

Phase 4 (Q4 2025)

  • 📋 Blockchain-based verification
  • 📋 Fact-checker network integration
  • 📋 Enterprise solutions
  • 📋 Global expansion

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

  • Google Gemini AI for advanced language processing capabilities
  • Supabase for providing excellent backend-as-a-service
  • News API for real-time news data
  • Tailwind CSS for beautiful, responsive design
  • React Community for continuous innovation and support

📞 Support

For support, questions, or feedback:

ZipTales - Breaking News, Not Trust

Built with ❤️ by Team Code Breakers

© 2025 ZipTales. All rights reserved.

About

AI-powered news verification platform that filters misinformation and provides community-verified credibility scores for authentic journalism.

ziptales.netlify.app/

Resources

Readme
Activity

Stars

12 stars

Watchers

0 watching

Forks

22 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages