AI Article Summarizer

AI-powered tool that extracts and summarizes articles from any URL.

2023• Role: Frontend Developer

About this Project

A web app that takes any article URL, extracts the full text, and generates a concise GPT-based summary. Built with React and Redux Toolkit (RTK Query) for clean async state management, with a Tailwind-styled UI and persistent search history so users can revisit past summaries.

Tech Stack

React 18

Redux Toolkit

Tailwind CSS

Vite

Tools Used

VS Code

RapidAPI

Netlify

Key Features

Core Capabilities

▸URL-Based Extraction: Paste any article link to pull the full text content.
▸AI Summarization: Uses a GPT-powered API to condense articles into key points.
▸Search History: Stores previously summarized articles in app state for quick revisits.

Technical Architecture

▸State Management: Redux Toolkit with RTK Query for async API calls and caching.
▸Styling: Utility-first design with Tailwind CSS for a responsive layout.
▸Build Tooling: Bundled with Vite for fast dev and production builds.

Highlights

RTK Query Integration

GPT-Based Summarization

Search History

Installation

Clone and Setup

git clone https://github.com/Itsayu/AI-Article-Extractor-And-Summarizer.git
cd AI-Article-Extractor-And-Summarizer
npm install

Configure API Key

Add your RapidAPI key to a .env file

Run Dev Server

npm run dev

Challenges & Solutions

Challenge

Managing Async API State

Solution

Used RTK Query to handle loading, error, and caching states for the summarization API without writing manual reducers.

GDG Chandigarh

Jupiter Visa Advisors