Back to Projects

Explain Bytes

Learn systems, fundamentals, and deep engineering concepts explained simply.

Next.jsTypeScriptNode.jsPostgreSQLSupabaseNextAuth.jsRedisyjsTipTapTanstack-QueryShadcn UIMdxWebsocketsTailwind CSSResendAmazon-PolyAmazon-S3
View Mode:

1. Problem Statement

What?
Developers frequently struggle with 'search fatigue' when trying to understand technical concepts across multiple websites and AI interfaces.
Who?
Software engineers looking for a more streamlined way to learn or refresh their technical knowledge.
Why it mattered?
Finding the 'right' resource be it an article, video, or documentation is often a time-consuming process of trial and error.

2. Product Thinking

The Solution
Built ExplainBytes, a web application that consolidates technical knowledge from multiple sources into a single interface with flashcards, a newsletter system, and automated verification/welcome emails via Resend.
Alternatives Considered
  • Doom scrolling through search results untill you find the right resource
  • Using AI like ChatGPT/Gemini to get your answers
Trade-offs Made
  • Read-through caching: Prioritized sub-millisecond read performance for technical concepts at the cost of slight initial latency during cache hydration.
  • Local MDX vs. CMS API: Chose file-system-based MDX to eliminate network round-trips and improve SEO, accepting the complexity of static regeneration (ISR) for content updates.

3. System Architecture

HTTPS/JSONCache LookupSearch QueriesFile I/OEmails
Next.js App
Frontend
API Gateway
Backend
Redis
Cache
Elasticsearch
Database
Node FS
Database
Resend
External
Frontend
Backend
Database

Hover over components to see details. This diagram is interactive.

4. Impact & Outcome

Summary
Led the design and implementation of ExplainBytes, a web application that consolidates technical knowledge from multiple sources into a single, easy-to-navigate interface with easy to memorize flashcards.
Key Impact
  • Reduced time spent searching for resources by 15%
  • Increased time spent learning by 10x
  • Saved time spent scrolling through search results
Outcome
I didn't get paid or hoping to get one for this project but I'm happy with the outcome.

5. Challenges & Failures

What Broke

Maintaining separate file structures for documentation and flashcards led to data inconsistency and high maintenance overhead.

Lesson Learned

Architected a unified directory structure where flashcards are automatically derived from doc topics, ensuring 100% consistency between learning modules.

What Broke

Search latency was high even with Elasticsearch, as every request hit the primary index, causing performance bottlenecks during peak traffic.

Lesson Learned

Implemented a Redis-based Read-Through cache pattern to serve top-tier search terms from memory, drastically reducing response times.

What Broke

Frequent API calls for static resources were redundant, adding unnecessary latency to a content-heavy application.

Lesson Learned

Leveraged React's 'use cache' and Next.js caching layers to treat static documentation as immutable assets, achieving near-instant delivery.

6. Outcome & Learnings

Key Learnings
  • Caching patterns like 'Read-Through' are architectural requirements, not optional optimizations, for low-latency systems.
  • High-performance MDX rendering can eliminate the need for traditional API calls for documentation, improving speed and SEO.
  • Implemented the Sliding Window Counter algorithm for robust rate limiting to protect infra from spam and DDoS attacks.
  • Learned that a unified data structure is critical when building multi-format educational platforms (Docs + Flashcards).
What I'd Improve Next
  • Architect the next major feature set to evolve the platform into a comprehensive, 'one-go' technical solution.
  • Migrate from Vercel to dedicated cloud infrastructure (AWS/GCP) for granular control over servers, CDNs, and edge caching.
  • Explore AI-driven flashcard generation from arbitrary technical articles to expand content scale.
  • Extension for this is already going, which is a collabrative editor via which open source community can easily contribute to the content.