Headlinr

Headlinr is a full-stack news summary app with a React + Vite frontend and a FastAPI backend.

The backend fetches news data from newsdata.io, sends it through a LangChain agent using the ChatGroq model, and returns a simple JSON response:

{
  "query": "example query",
  "summary": ["summary1", "summary2", "summary3"]
}

The frontend sends user search queries to the backend and renders the returned summary items in an animated news card layout.

---

Project Structure

• backend/
  • requirements.txt - Python dependencies for the backend
  • src/main.py - FastAPI application and route definitions
  • src/services/headlinr_service.py - News fetching and LangChain agent logic
• frontend/
  • package.json - Frontend dependencies and scripts
  • src/ - React application source files
  • src/components/ - UI components such as Navbar, NewsCard, NewsList, and SearchBar

---

Backend Setup

1. Open a terminal in backend/.

2. Create and activate a virtual environment (recommended):

   python -m venv .venv
   .\.venv\Scripts\Activate.ps1

3. Install dependencies:

   pip install -r requirements.txt

4. Create a .env file in backend/ with your News API key:

   NEWS_API_KEY=your_newsdata_api_key_here

5. Run the backend:

   uvicorn src.main:app --reload --host 127.0.0.1 --port 8000

Backend API Endpoints

• GET / - health check endpoint
• POST /get_news - accepts a JSON body with a query field and returns summarized news results

Example request body:

{
  "query": "AI news"
}

---

Frontend Setup

1. Open a terminal in frontend/.

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open the URL shown in the terminal, usually http://localhost:5173.

---

How It Works

• The frontend sends the user search query to the backend at http://127.0.0.1:8000/get_news.
• The backend fetches top news articles from the newsdata.io API.
• A LangChain agent uses the ChatGroq model to format a clean JSON summary response.
• The frontend displays each string from the summary array in a styled animated card.

---

Notes

• Make sure the backend and frontend are both running at the same time.
• The frontend is configured to allow CORS requests from http://localhost:5173.
• If you change the backend host or port, update the fetch URL in frontend/src/App.jsx.

---

Future Improvements

• Add real article links and richer card content.
• Add loading/error states from the backend response.
• Add query history or saved searches.
• Add unit tests for backend and frontend components.