Loading repository data…
Loading repository data…
hoangsonww / repository
🪐 DevVerse CS Blog – A modern, high-performance blog app built with Next.js, Vercel, Supabase, TypeScript, MDX, and Framer Motion, featuring real-time search, dynamic routing, and optimized SEO for deep dives into computer science and software engineering topics. © Son Nguyen 2026.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
A modern, high-performance full-stack blog built with Next.js, featuring 50+ in-depth articles with Mermaid diagrams, an AI-powered RAG chatbot, Supabase-backed view tracking, MDX content, PWA support, and a rich ecosystem of libraries including Pinecone, Google Gemini, Framer Motion, KaTeX, and more.
This repository hosts a Next.js-based blog that uses MDX to write rich, interactive content. The app combines server-side rendering, static site generation, and client-side rendering to deliver fast and SEO-friendly pages. It also includes modern features such as PWA support, image optimization, and seamless animations using Framer Motion.
The blog currently features 50 comprehensive articles covering a wide range of topics in computer science and software engineering -- from agentic AI and LLM observability to distributed systems, database design, and frontend frameworks. Every article includes Mermaid diagrams (600+ charts across the library), code examples, and proper heading structure for table-of-contents navigation.
An AI-powered RAG chatbot allows readers to ask questions about any article. It uses Pinecone as a vector database and Google Gemini for embeddings and answer generation, with bracket-style citations linking back to source articles.
View counts are tracked per article via a Supabase-backed system, with session-deduplicated tracking and server-rendered counts displayed on article cards and detail pages.
graph TD
subgraph Browser
UI[React UI] --> CARDS[Article Cards]
UI --> CHAT[RAG Chatbot]
UI --> FAV[Favorites]
end
subgraph Next.js App
SSG[SSG / ISR Pages] --> MDX[MDX Content - 50 articles]
API_CHAT[api/chat] --> RAG[RAG Pipeline]
API_VIEW[api/track-view] --> SUPA_RPC[Supabase RPC]
end
subgraph External Services
PINE[(Pinecone Vector DB)]
GEMINI[Google Gemini]
SUPA[(Supabase - Auth + Views + Favorites)]
end
CHAT --> API_CHAT
RAG --> PINE
RAG --> GEMINI
CARDS --> SUPA
FAV --> SUPA
API_VIEW --> SUPA
To add more content, simply create new MDX files in the content directory and follow the existing structure. The blog is designed to be scalable, maintainable, and extensible, making it a great platform for sharing knowledge and insights within the tech community.
Feel free to contribute your own articles, improve the existing content, or customize the blog to suit your needs. Refer to the Contributing section for guidelines on how to contribute to this project.
[!NOTE] All articles are written in MDX and stored in the
contentdirectory. The Next.js app compiles these MDX files into static pages at build time, while also extracting metadata for features like the article list, related posts, and the RAG chatbot. Articles must have substantial content (not just a placeholder) and should include proper headings (h1,h2,h3) + Mermaid diagrams to be considered valid for the main article library.
The blog is deployed on Vercel and can be accessed at https://devverse-swe.vercel.app/.
Feel free to explore the content and features of the blog!
[!NOTE] The Supabase BaaS might be down sometimes due to inactivity. Please let me know in that case so that I can get it back up ASAP!
and many more pages...
DevVerse is packed with modern dev & user-centric features to enhance both the developer and user experience:
graph LR
AUTHOR[Author writes MDX] --> CONTENT[content/*.mdx]
CONTENT --> BUILD[Next.js Build]
BUILD --> SSG[Static HTML Pages]
SSG --> CDN[Vercel CDN]
CDN --> BROWSER[User Browser]
CONTENT --> VECTOR[Vectorize for RAG]
VECTOR --> PINE[(Pinecone)]
mermaid npm package with full dark mode awareness. See Mermaid Diagram Support.react-syntax-highlighter.h2 and h3 headings within each article.next-pwa.