News Summarizer Frontend

This is the frontend application for the News Summarizer project. It is built using React and TypeScript and is hosted on Netlify.

Features

• Responsive UI: Optimized for all screen sizes.
• News Feed: Displays article summaries generated by the backend AI.
• User Authentication: Allows users to log in using Google OAuth.
• Article Management: Users can upload, view, and manage articles.
• Interactive Navigation: Navigate between news feed, profile, and article upload pages.

Prerequisites

• Node.js (version 16 or above)
• A .env file with the following:

  REACT_APP_BACKEND_URL=https://your-backend-url.onrender.com
  

Getting Started

1. Clone the repository:

   git clone https://github.com/yourusername/news-summarizer-frontend.git
   cd news-summarizer-frontend

2. Install dependencies:

   npm install

3. Run the app locally:

   npm start

4. Build the app for production:

   npm run build

5. Deploy to Netlify:

   • Use the build directory for deployment.
   • Configure the REACT_APP_BACKEND_URL environment variable in Netlify.

Folder Structure

• src/components: Contains React components like Navbar, ArticleCard, etc.
• src/services: Axios-based services for API interaction.
• src/pages: Contains pages like Home, Profile, and ArticleUpload.
• public: Static assets like the favicon.

How It Works

• Fetches data from the backend via Axios using the REACT_APP_BACKEND_URL environment variable.
• Displays articles and summaries from the backend's /api/articles endpoint.
• Handles user authentication through Google OAuth.

Troubleshooting

• Ensure the backend is running and accessible via the REACT_APP_BACKEND_URL.
• Check browser console for any CORS-related errors.