System Requirements Document (SRD)

Project Name: rustic-news

1. Introduction

The rustic-news project aims to deliver a minimal AI-powered news web application called "Spasta." The primary goal is to provide users with concise, useful news summaries while optimizing API usage and token consumption. This document outlines the system requirements for the project, focusing on simplicity, efficiency, and user-centric design.

2. System Overview

The rustic-news application will be a frontend-only solution built using React and Tailwind CSS. It will fetch top headlines from NewsAPI, summarize articles using AI, and cache these summaries locally to minimize API calls. Users will be able to browse categorized news, view summaries, search articles, and bookmark their favorite content.

Key features include:

• Simple authentication via email.
• AI-generated summaries limited to three bullet points per article.
• Local storage for bookmarks and cached summaries.
• A clean, card-based UI with optional dark mode.

3. Functional Requirements

Authentication

• As a User, I should be able to log in using my email.

News Feed

• As a User, I should be able to view top headlines limited to 10–15 articles.
• As a User, I should be able to filter news by categories: Tech, Business, and Sports.

AI Summaries

• As a User, I should see each article summarized into three bullet points under 50 words.
• As a User, I should view cached summaries to avoid re-generating them.

Article View

• As a User, I should see the summary and a "Read More" link redirecting to the original source.

Search

• As a User, I should be able to search articles using keywords via client-side filtering.

Bookmark

• As a User, I should be able to save articles locally using localStorage.

4. User Personas

Admin

• Manages API keys and monitors system performance.

User

• Browses news, views summaries, searches articles, and bookmarks content.

5. Visuals Colors and Theme

Color Palette

The color palette for rustic-news reflects simplicity and modernity:

• Background: #F9F9F9 (Soft White)
• Surface: #FFFFFF (Pure White)
• Text: #333333 (Dark Gray)
• Accent: #FF6F61 (Rustic Coral)
• Muted Tones: #B0BEC5 (Muted Blue-Gray)

6. Signature Design Concept

Concept: Interactive News Cards with AI Summaries

The homepage will feature interactive news cards that dynamically expand when hovered over. Each card will show:

1. The article title.
2. Three bullet-point summaries generated by AI.
3. A "Read More" button linking to the original source.

Unique Features:

• Hover Animation: Cards will subtly expand and elevate on hover, creating a tactile feel.
• Dark Mode Transition: Users can toggle between light and dark modes, with smooth color transitions.
• Minimalist Design: Clean typography and ample white space ensure readability and focus.

7. Non-Functional Requirements

• Performance: The app should load within 2 seconds on standard devices.
• Scalability: Designed for up to 10,000 daily active users.
• Security: Ensure secure API calls and localStorage handling.
• Accessibility: WCAG 2.1 compliance for visually impaired users.

8. Tech Stack

Frontend

• React
• Tailwind CSS

APIs

• NewsAPI for fetching articles.
• OpenAI/Gemini for AI summaries.

Local Storage

• Browser localStorage for bookmarks and cached summaries.

9. Assumptions and Constraints

Assumptions

• Users will have stable internet connections.
• NewsAPI will provide reliable and timely data.
• AI summaries will remain within token limits.

Constraints

• No backend services for this MVP.
• Limited to three categories for news filtering.
• Summaries must not exceed 50 words.

10. Glossary

• NewsAPI: A service providing news articles via API.
• AI Summary: Concise bullet-point summaries generated using AI models.
• LocalStorage: Browser-based storage for saving bookmarks and cached data.
• MVP: Minimum Viable Product.