ThinkLog - A centralized hub for developer article
thumbnail
date
May 19, 2026
slug
thinklog
status
Published
tags
Website
summary
A developer article aggregator built with Node.js, Express, Supabase Postgres, and Alpine.js — featuring real-time RSS extraction and full-text search.
type
Post
Building ThinkLog — A Centralized Hub for Developer Articles
ThinkLog is a full-stack web application that aggregates articles from engineering blogs, community platforms, and developer sites into a single fast stream. Instead of hopping between a dozen bookmarks, users get a clean feed with built-in full-text search, syntax-highlighted code blocks, and inline discussions.
Built for Web Systems & Technologies and Quantitative Methods at Pamantasan ng Lungsod ng Valenzuela, ThinkLog demonstrates modern full-stack development using a lightweight, performant frontend architecture.
Tech Stack & Architecture
- Frontend: Alpine.js, Tailwind CSS (CDN), Highlight.js
- Backend: Node.js (Express)
- Database: PostgreSQL (via Supabase)
- Authentication: Supabase Auth (Email/Password, Google OAuth, GitHub OAuth)
- RSS Processing: Custom RSS parser with `@extractus/article-extractor`
- Hosting: Vercel
Key Features
Aggregated Feed & Filtering
Pulls articles from multiple RSS sources into a responsive card layout. Users can filter by source publication and sort by Recommended, Latest, Popular, Trending, or Discover.
Full-Featured Article Reader
Clicking any article opens a dedicated reader view with parsed article body text, syntax-highlighted code blocks with one-click copy, author metadata, and original source links.
Community & Social Features
- Reactions: Like, Love, or Insightful reactions per post.
- Inline Comments: Discussion threads on feed cards and full reader views.
- Native Sharing: Web Share API integration with automatic fallback to clipboard copy.
- Live Search: PostgreSQL full-text search with instant autocomplete suggestions.
Engineering & Architecture Decisions
Single HTML File SPA with Alpine.js
The entire frontend is built as a single `index.html` file using Alpine.js for state management and view transitions. No heavy build tools, bundlers, or framework overhead — just lightweight CDN-served reactivity.
Eliminating N+1 Queries via Postgres JSON Aggregation
Rather than firing multiple database queries for posts, authors, tags, and comments, the Express backend utilizes PostgreSQL `json_build_object` and `json_agg` functions. A single database query returns fully formatted JSON payloads ready for client rendering.
Resilient Client-Side Routing
Static hosting on Vercel uses a catch-all rewrite rule to route all traffic to `index.html`. Alpine.js paired with the HTML5 History API manages path changes seamlessly without triggering full page reloads.
Database Schema Overview
Takeaways & Lessons Learned
1. Lightweight SPAs: Alpine.js excels at building interactive dashboards without complex build chains.
2. Server-Side Data Bundling: Database-level JSON aggregation significantly reduces network roundtrips and API latency.
3. Content Extraction: Parsing third-party RSS feeds requires robust HTML sanitization to prevent XSS while preserving formatting.
Live Demo & Code
Live Site: thinklogapp.vercel.app | Source Code: github.com/Adrian-stuff/thinklog