NewsSphere

Overview

NewsSphere is a responsive, authenticated news dashboard for discovering current stories across major categories. Users can create an account, browse a paginated news feed, open original articles, and view AI-generated summaries without leaving the app.

The frontend is designed to work with the NewsSphere backend API, which supplies authentication, news, and summarization endpoints.

Demo

TechStack

Frontend

• React
• React-Router-Dom
• Vite
• TailwindCSS
• Axios
• Lucide-React

Backend

• Node.js
• Express.js
• Mongoose
• BCrypt
• JWT

Database

• Mongodb

External APIs

• News API
• Gemini API

Highlights

• Clean, responsive reading experience built for desktop and mobile.
• Category-based feeds with client-side caching and incremental loading.
• AI summary modal that preserves a generated summary while the session is active.
• Protected routes and automatic sign-out when an API session is no longer valid.

Architecture

flowchart LR
    U[User] --> R[React + Vite frontend]
    R --> A[Auth context and protected routes]
    R --> S[Axios service layer]
    S -->|Bearer token| B[NewsSphere backend API]
    B --> N[News and summary services]
    B --> D[(User data store)]
    R --> C[LocalStorage and SessionStorage]

Loading

Features

• Account registration and sign-in.
• Protected dashboard and public-only authentication routes.
• News feeds for All, Business, Technology, Sports, Health, Entertainment, and Science.
• Refresh and load-more controls for paginated articles.
• Article cards with image fallback, source, author, date, and original-article links.
• AI-generated article summaries in an accessible modal.
• Per-category session caching to reduce repeat requests during a browsing session.
• Friendly API error states and automatic handling of unauthorized responses.

Tech Stack

Area	Technology
Frontend	React 18, React DOM
Build tool	Vite 6
Styling	Tailwind CSS, PostCSS, Autoprefixer
Routing	React Router DOM
HTTP client	Axios
Icons	Lucide React
Backend	NewsSphere Backend API
Hosting configuration	Vercel

Live Demo

News Sphere is Live at: https://news-sphere-silk.vercel.app/

The production API is Live at https://news-sphere-backend-api.onrender.com/api.

Screenshots

Description	Image
Landing Page
Sign Up Page
Dashboard Page
entertainment category page
Summary Modal
About Page

Project Structure

├── docs/                 # screenshots and gif of the project
├── src/
│   ├── components/       # Reusable UI components and summary modal
│   ├── context/          # Authentication provider and state
│   ├── hooks/            # Reusable React hooks
│   ├── pages/            # Landing, auth, dashboard, and about pages
│   ├── routes/           # Public and protected route definitions
│   ├── services/         # Axios client, auth, and news API calls
│   ├── utils/            # Error and date helpers
│   ├── App.jsx
│   └── main.jsx
├── .env.example          # Required frontend environment variables
├── vercel.json           # SPA rewrite configuration for Vercel
├── vite.config.js
└── package.json

Database Schema

The API uses MongoDB through Mongoose. It currently defines User and savedArticles collections; saved articles are modeled for future use.

users

Field	Type	Required	Description
_id	ObjectId	Generated	Unique user identifier.
username	String	Yes	User's username.
name	String	Yes	User's display name.
email	String	Yes	User's email address.
password	String	Yes	bcrypt-hashed password.
savedArticles	ObjectId[]	No	References to documents in the savedArticles collection.
createdAt	Date	Generated	Account creation timestamp; defaults to the current date and time.

savedArticles

Field	Type	Required	Description
_id	ObjectId	Generated	Unique saved-article identifier.
userId	ObjectId	Yes	Reference to the owning User.
articleId	String	Yes	Identifier for the source article.
summary	String	Yes	Saved AI-generated article summary.
savedAt	Date	Generated	Save timestamp; defaults to the current date and time.

Relationship: one user can reference many saved articles through users.savedArticles; each saved-article document belongs to one user through savedArticles.userId.

Both schemas disable Mongoose's default __v version field.

Environment Variables

Create a .env file in the project root:

VITE_API_BASE_URL=http://localhost:5000/api

For the deployed API, set the value to:

VITE_API_BASE_URL=https://news-sphere-backend-api.onrender.com/api

Vite exposes only variables prefixed with VITE_ to the client. Do not place secrets in this file.

Installation

1. Clone the frontend repository.

   git clone https://github.com/DeShyam01/news-sphere.git
   cd news-sphere

2. Install dependencies.

   npm install

3. Copy .env.example to .env and set VITE_API_BASE_URL to a running NewsSphere backend instance. (Localhost or Deployed backend)

4. Set up and run the backend API if you are using a local API URL.

Usage

Before starting the frontend, if you are using a local API URL, then ensure that the backend API is running locally.

Then run the frontend:

npm run dev

Open the local URL printed by Vite, usually http://localhost:5173. Create an account or sign in, then use the category tabs, refresh control, and Load More button to browse stories. Select View Summary on an article to request its summary.

Other available commands:

npm run build    # Create an optimized production build
npm run preview  # Preview the production build locally

Authentication

The frontend calls the backend endpoints below:

Action	Endpoint	Payload
Sign up	POST /users/signup	name, username, email, password
Sign in	POST /users/signin	username, password

The token returned by the API is stored in localStorage as newssphere_token. Axios sends it on subsequent API calls through the Authorization: Bearer <token> header. Dashboard and About routes require this token; a 401 response clears it and redirects the user to the landing page.

Deployment

This project includes a vercel.json rewrite so React Router routes resolve correctly in a Vercel deployment.

1. Push the project to GitHub and import it into Vercel.
2. Set VITE_API_BASE_URL in Vercel project environment variables to the deployed backend API URL.
3. Deploy using the default Vite build settings: npm run build with dist as the output directory.

For other hosts, configure a single-page application fallback so all application routes serve index.html.

Challenges Faced

• Keeping the reading flow smooth while handling paginated feeds, category changes, duplicate stories, and network errors.
• Supporting slightly different article field shapes from API responses while keeping cards and summaries consistent.
• Managing authentication state across refreshes and safely recovering from expired tokens.
• Preventing duplicate summary requests while making summaries available across cached category feeds.

Key Learnings

• React context provides a focused way to share authentication state and actions across routes.
• Service-layer API calls keep components centered on presentation and interaction.
• Session caching improves perceived performance for frequently revisited category feeds.
• Deploying a single-page app requires server rewrites in addition to a successful production build.

Future Improvements

• Add search, saved articles, and user reading preferences.
• Add automated tests for authentication, routing, API services, and dashboard interactions.
• Add skeleton loaders and retry strategies for slow news providers.
• Add a live frontend URL, demo GIF, and screenshots to this README.
• Support dark mode and improved accessibility preferences.

Contributing

Contributions are welcome.

1. Fork the repository and create a branch for your change.
2. Make focused changes and verify the production build with npm run build.
3. Open a pull request describing the problem, solution, and any UI changes.

Author

Made with ❤️ by Shyamsundar Gayen.

GitHub | LinkedIn | mail