4 files changed, 161 insertions, 0 deletions
diff --git a/frontend/src/components/FeedList.css b/frontend/src/components/FeedList.css
new file mode 100644
index 0000000..f35ed59
--- /dev/null
+++ b/frontend/src/components/FeedList.css
@@ -0,0 +1,48 @@
+.feed-list {
+    padding: 1rem;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.feed-list h2 {
+    margin-top: 0;
+    border-bottom: 1px solid #eee;
+    padding-bottom: 0.5rem;
+}
+
+.feed-list-items {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.feed-item {
+    padding: 0.75rem 0;
+    border-bottom: 1px solid #f0f0f0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.feed-item:last-child {
+    border-bottom: none;
+}
+
+.feed-title {
+    text-decoration: none;
+    color: #333;
+    font-weight: 500;
+}
+
+.feed-title:hover {
+    color: #007bff;
+}
+
+.feed-category {
+    background: #e9ecef;
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    color: #666;
+}
+\ No newline at end of file
diff --git a/frontend/src/components/FeedList.test.tsx b/frontend/src/components/FeedList.test.tsx
new file mode 100644
index 0000000..578e3c2
--- /dev/null
+++ b/frontend/src/components/FeedList.test.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import FeedList from './FeedList';
+
+describe('FeedList Component', () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+        global.fetch = vi.fn();
+    });
+
+    it('renders loading state initially', () => {
+        (global.fetch as any).mockImplementation(() => new Promise(() => { }));
+        render(<FeedList />);
+        expect(screen.getByText(/loading feeds/i)).toBeInTheDocument();
+    });
+
+    it('renders list of feeds', async () => {
+        const mockFeeds = [
+            { _id: 1, title: 'Feed One', url: 'http://example.com/rss', web_url: 'http://example.com', category: 'Tech' },
+            { _id: 2, title: 'Feed Two', url: 'http://test.com/rss', web_url: 'http://test.com', category: 'News' },
+        ];
+
+        (global.fetch as any).mockResolvedValueOnce({
+            ok: true,
+            json: async () => mockFeeds,
+        });
+
+        render(<FeedList />);
+
+        await waitFor(() => {
+            expect(screen.getByText('Feed One')).toBeInTheDocument();
+            expect(screen.getByText('Feed Two')).toBeInTheDocument();
+            expect(screen.getByText('Tech')).toBeInTheDocument();
+        });
+    });
+
+    it('handles fetch error', async () => {
+        (global.fetch as any).mockRejectedValueOnce(new Error('API Error'));
+
+        render(<FeedList />);
+
+        await waitFor(() => {
+            expect(screen.getByText(/error: api error/i)).toBeInTheDocument();
+        });
+    });
+
+    it('handles empty feed list', async () => {
+        (global.fetch as any).mockResolvedValueOnce({
+            ok: true,
+            json: async () => [],
+        });
+
+        render(<FeedList />);
+
+        await waitFor(() => {
+            expect(screen.getByText(/no feeds found/i)).toBeInTheDocument();
+        });
+    });
+});
diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx
new file mode 100644
index 0000000..fb7c1de
--- /dev/null
+++ b/frontend/src/components/FeedList.tsx
@@ -0,0 +1,50 @@
+import { useEffect, useState } from 'react';
+import type { Feed } from '../types';
+import './FeedList.css';
+
+export default function FeedList() {
+    const [feeds, setFeeds] = useState<Feed[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+
+    useEffect(() => {
+        fetch('/api/feed/')
+            .then((res) => {
+                if (!res.ok) {
+                    throw new Error('Failed to fetch feeds');
+                }
+                return res.json();
+            })
+            .then((data) => {
+                setFeeds(data);
+                setLoading(false);
+            })
+            .catch((err) => {
+                setError(err.message);
+                setLoading(false);
+            });
+    }, []);
+
+    if (loading) return <div className="feed-list-loading">Loading feeds...</div>;
+    if (error) return <div className="feed-list-error">Error: {error}</div>;
+
+    return (
+        <div className="feed-list">
+            <h2>Feeds</h2>
+            {feeds.length === 0 ? (
+                <p>No feeds found.</p>
+            ) : (
+                <ul className="feed-list-items">
+                    {feeds.map((feed) => (
+                        <li key={feed._id} className="feed-item">
+                            <a href={feed.web_url} target="_blank" rel="noopener noreferrer" className="feed-title">
+                                {feed.title || feed.url}
+                            </a>
+                            {feed.category && <span className="feed-category">{feed.category}</span>}
+                        </li>
+                    ))}
+                </ul>
+            )}
+        </div>
+    );
+}
diff --git a/frontend/src/components/Login.test.tsx b/frontend/src/components/Login.test.tsx
index 44d1371..ef946e2 100644
--- a/frontend/src/components/Login.test.tsx
+++ b/frontend/src/components/Login.test.tsx
@@ -1,3 +1,5 @@
+import React from 'react';
+import '@testing-library/jest-dom';
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import { BrowserRouter } from 'react-router-dom';
 import { describe, it, expect, vi, beforeEach } from 'vitest';