Live Demo · Report a Bug · Request a Feature
DevBrief is a full-stack web application that aggregates technology news and uses the Claude API to enrich articles with concise summaries, topic tags, reading difficulty, and sentiment.
The application combines a React + TypeScript frontend with a Node.js + Express backend, external news and AI APIs, authentication, caching, and deployment across Vercel and Render.
The goal was to make keeping up with technology news faster and easier without having to manually browse multiple sources.
- 📰 Live technology news — Articles fetched from the GNews API and organized by category
- 🤖 AI enrichment — Claude generates summaries, topic tags, reading difficulty, and sentiment
- ⚡ Concurrent processing — Multiple articles are enriched concurrently using
Promise.all - 💾 TTL caching — In-memory caching reduces repeated external API requests with a 10-minute expiration
- 🔐 JWT authentication — Login and registration flows using JSON Web Tokens
- 🛡️ API rate limiting — Express rate limiting helps control excessive requests
- 🔎 Article search — Search across technology news
- 🔖 Bookmarks — Save articles to a personal reading list
- 🖥️ Cold-start handling — Frontend feedback while the deployed backend wakes up
- 📱 Responsive editorial UI — Article-focused layout for browsing technology news
The backend sends selected articles to the Claude API for enrichment and processes multiple requests concurrently.
The application expects structured JSON from the model and falls back to existing article information when AI processing fails, allowing the news feed to remain usable even when enrichment is unavailable.
DevBrief uses an in-memory Map with a 10-minute TTL to cache category feed results.
This reduces unnecessary calls to external news and AI services when users request the same feed repeatedly.
The Express backend separates responsibilities across:
- Routes
- Authentication middleware
- Rate-limiting middleware
- AI services
- News services
The frontend communicates with the backend through a typed API utility.
| Layer | Technology |
|---|---|
| Frontend | React 18, TypeScript, Vite, React Router |
| Backend | Node.js, Express, ES Modules |
| AI | Anthropic Claude API |
| News | GNews API |
| Authentication | JSON Web Tokens |
| Deployment | Vercel + Render |
| Development | Git, npm |
devbrief/
├── client/
│ └── src/
│ ├── components/ # Navbar, ArticleCard
│ ├── pages/ # Feed, Bookmarks, Login, Search
│ ├── hooks/ # useAuth, useBookmarks, useNews
│ └── utils/ # API client
│
└── server/
└── src/
├── routes/ # auth.js, news.js
├── services/ # ai.js
└── middleware/ # auth.js, rateLimiter.js
The backend includes automated tests using Vitest and Supertest.
Current coverage includes:
- Claude API success and failure handling
- Fallback behavior for malformed AI responses
- News feed API responses
- In-memory cache behavior
External APIs are mocked during testing, allowing the suite to run without requiring production API credentials.
Tests run automatically through GitHub Actions on pushes and pull
requests to main.
- Node.js 18+
- GNews API key
- Anthropic API key
git clone https://github.com/Jud-e/devbrief.git
cd devbrief
npm run install:allConfigure the backend environment:
cd server
cp .env.example .envAdd the required API keys to server/.env.
Start the backend:
cd server
npm run devStart the frontend in a second terminal:
cd client
npm run devOpen http://localhost:5173.
| Service | Purpose |
|---|---|
| Vercel | Frontend hosting |
| Render | Backend hosting |
The application is deployed as separate frontend and backend services.
See SETUP.md for deployment configuration.
DevBrief is a portfolio project and has several areas that could be improved:
- Replace prototype authentication with database-backed user accounts and secure password handling
- Add automated unit and integration tests
- Implement proper server-side pagination
- Improve cache-key handling for different pagination parameters
- Replace the in-memory cache with shared caching if the backend is horizontally scaled
- Move beyond the current prototype authentication model with stronger authorization around protected API resources
Contributions are welcome.
- Fork the repository
- Create a feature branch
- Commit your changes
- Push the branch
- Open a Pull Request
MIT — see LICENSE.
Built with React, TypeScript, Express, and Claude API.
MIT — see LICENSE for details.