ClauDash - Personal Dashboard

Description

ClauDash is a personal dashboard application that aggregates data from multiple sources and uses Claude AI to generate contextualized daily briefings. The application fetches data from configurable sources including Reddit APIs, RSS feeds, web pages, and weather services, then leverages Claude to create personalized summaries that track changes and follow up on stories over time. Features include intelligent caching to minimize API costs, an interactive chat interface, and customizable widget layouts.

Tech Stack

Frontend

• React 19
• Material-UI 7 (MUI)
• Emotion (CSS-in-JS)
• Vite 4

Backend

• Express 5 (proxy server)
• Node.js

APIs & Services

• Anthropic Claude API (claude-sonnet-4-5-20250929)
• Open-Meteo API (weather data)
• RSS2JSON API (RSS feed parsing)

Storage

• localStorage (client-side caching)

Features

• AI-generated daily briefings with conversational tone and contextual awareness
• Historical context tracking that compares current news with previous briefings
• Multi-source data aggregation from Reddit, RSS feeds, and web pages
• Intelligent caching system with configurable TTL to minimize API usage
• Interactive chat interface for follow-up questions about briefing content
• Location-based weather integration with forecast display
• Row-based widget layout system for organizing content sources
• Quick links bar for frequently accessed URLs
• Token usage tracking with cost estimation
• Dark and light theme support
• Responsive widget grid layout
• Enhanced Reddit post display with images, upvotes, and comment counts
• Webpage content summarization using Claude
• Debug mode for development and testing

Configuration

All configuration is managed through environment variables in .env.local. Copy .env.example to .env.local and configure the following:

Required Configuration

Variable	Description
REACT_APP_ANTHROPIC_API_KEY	Anthropic API key for Claude access

Optional Configuration

Variable	Default	Description
REACT_APP_LOCATION	None	Location for weather (city, state, country or zip code)
REACT_APP_DATA_SOURCES	Reddit tech/worldnews/science	JSON object for row-based layout or comma-separated URLs
REACT_APP_CLAUDE_MODEL	claude-sonnet-4-5-20250929	Claude model identifier
REACT_APP_CLAUDE_INSTRUCTIONS	None	Custom instructions for briefing generation
REACT_APP_REFRESH_INTERVAL	15	Cache TTL in minutes
REACT_APP_HISTORY_DAYS	7	Days of briefing history to retain
REACT_APP_CORS_PROXY	allorigins.win	CORS proxy service URL
REACT_APP_DEBUG_MODE	false	Enable debug panel and logging
REACT_APP_TEMPERATURE_UNIT	F	Temperature unit (F or C)
REACT_APP_CHART_DATE_FORMAT	MM/DD/YYYY	Date format for charts
REACT_APP_TEXT_VOICE	Google UK English Female	Text-to-speech voice name
REACT_APP_QUICK_LINKS	None	Comma-separated URLs for quick link buttons

Data Source Configuration

The REACT_APP_DATA_SOURCES variable accepts two formats:

Row-based layout (JSON object):

{"row1":["https://www.reddit.com/r/technology.json","https://www.reddit.com/r/worldnews.json"],"row2":["https://www.reddit.com/r/science.json"],"Games":["https://example.com/updates"]}

Legacy format (comma-separated):

https://www.reddit.com/r/technology.json,https://www.reddit.com/r/worldnews.json

Supported source types:

• JSON APIs (Reddit endpoints with .json suffix)
• RSS/XML feeds
• Web pages (automatically summarized using Claude)

Installation and Setup

Prerequisites

• Node.js (version 14 or higher)
• npm or yarn package manager
• Anthropic API key (obtain from https://console.anthropic.com/)

Installation Steps

1. Clone the repository:

git clone <repository-url>
cd personal-dash-cl

2. Install dependencies:

cd claudash
npm install

3. Configure environment variables:

cp .env.example .env.local

4. Edit .env.local and add your Anthropic API key:

REACT_APP_ANTHROPIC_API_KEY=sk-ant-your-actual-key-here

5. Configure optional settings in .env.local (location, data sources, etc.)

6. Start the application:

npm start

This command launches both the Vite development server (port 5173) and the Express proxy server (port 3001) concurrently.

7. Access the application at http://localhost:5173

Development Commands

npm start       # Start both dev server and proxy server
npm run dev     # Start only Vite dev server
npm run proxy   # Start only Express proxy server
npm run build   # Create production build
npm run preview # Preview production build
npm run lint    # Run ESLint

Troubleshooting

If briefing generation fails with network errors, verify that both servers are running. The proxy server must be active on port 3001 to communicate with the Anthropic API. Stop the process with Ctrl+C and restart with npm start if needed.

To debug specific issues, set REACT_APP_DEBUG_MODE=true in .env.local to enable the debug panel and detailed console logging.

To clear all cached data, click the trash icon in the top-right corner of the application interface.

Project Structure

claudash/
├── proxy-server.js          # Express server for API proxying
├── package.json             # Dependencies and scripts
├── vite.config.js           # Vite configuration
├── index.html               # HTML entry point
├── public/                  # Static assets
└── src/
    ├── App.jsx              # Root component
    ├── main.jsx             # Application entry point
    ├── theme.js             # MUI theme configuration
    ├── components/          # React components
    │   ├── Dashboard.jsx    # Main dashboard container
    │   ├── ChatInterface.jsx # Chat interface component
    │   ├── QuickLinksBar.jsx # Quick links bar
    │   └── widgets/         # Widget components
    ├── services/            # Business logic and API integration
    │   ├── claudeService.js # Claude API integration
    │   ├── dataFetcher.js   # Multi-source data fetching
    │   ├── sourceParser.js  # Data parsing and standardization
    │   ├── storageService.js # localStorage management
    │   └── openMeteoService.js # Weather API integration
    └── utils/               # Utility functions and constants
        ├── constants.js     # Application constants
        └── corsProxy.js     # CORS proxy utilities

License

MIT License - see LICENSE file for details.