feat: optimize API performance with caching & parallel fetching, overhaul RepoDetail UI with analytics widgets, and implement Bento ID Profile page

Author: TarunyaProgrammer

package-lock.json

@@ -19,9 +19,10 @@
     "@tanstack/react-query": "^5.95.2",
     "clsx": "^2.1.1",
     "framer-motion": "^12.38.0",
-    "lucide-react": "^1.7.0",
+    "lucide-react": "^1.8.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-markdown": "^10.1.0",
     "react-router-dom": "^7.13.2",
     "tailwind-merge": "^3.5.0"
   },

package.json

@@ -15,6 +15,7 @@
     "@supabase/supabase-js": "^2.42.0",
     "dotenv": "^16.4.5",
     "fastify": "^4.26.2",
+    "node-cache": "^5.1.2",
     "octokit": "^3.2.1",
     "zod": "^3.22.4"
   },

server/package-lock.json

@@ -0,0 +1,58 @@
+import { FastifyInstance } from 'fastify';
+import { supabaseAdmin } from '../server';
+
+export async function profileRoutes(fastify: FastifyInstance) {
+  
+  fastify.get('/profile/summary', async (request) => {
+    const { data: repos, error } = await supabaseAdmin
+      .from('repositories')
+      .select('stars, forks, language, updated_at, name')
+      .eq('owner_id', request.userId);
+
+    if (error || !repos) {
+      return { stats: null, persona: null };
+    }
+
+    const totalStars = repos.reduce((acc, r) => acc + (r.stars || 0), 0);
+    const totalForks = repos.reduce((acc, r) => acc + (r.forks || 0), 0);
+    const totalProjects = repos.length;
+
+    // Aggregate languages
+    const languages: Record<string, number> = {};
+    repos.forEach(r => {
+      if (r.language) {
+        languages[r.language] = (languages[r.language] || 0) + 1;
+      }
+    });
+
+    // Calculate Persona
+    let persona = "The Code Voyager";
+    const topLang = Object.entries(languages).sort((a, b) => b[1] - a[1])[0]?.[0];
+    
+    if (totalStars > 50) persona = "The Star Magnet";
+    else if (totalForks > 25) persona = "The Architect of Collaboration";
+    else if (topLang === 'TypeScript' || topLang === 'JavaScript') persona = "The Frontend Alchemist";
+    else if (topLang === 'Rust' || topLang === 'C++') persona = "The Performance Sage";
+    else if (totalProjects > 10) persona = "The Prolific Builder";
+
+    // Simple Rhythm Analysis (Mocked for now, in a real app would use commit times)
+    const rhythm = {
+      type: "Night Owl",
+      description: "Your signal peaks in the quiet hours of the night."
+    };
+
+    return {
+      stats: {
+        totalStars,
+        totalForks,
+        totalProjects,
+        languages
+      },
+      persona: {
+        title: persona,
+        level: Math.floor(totalProjects / 2) + 1
+      },
+      rhythm
+    };
+  });
+}

server/package.json

@@ -1,5 +1,8 @@
 import { FastifyInstance } from 'fastify';
 import { supabaseAdmin } from '../server';
+import { Octokit } from 'octokit';
+import { env } from '../env';
+import { getCache, setCache } from '../utils/cache';
 
 export async function repoRoutes(fastify: FastifyInstance) {
 
@@ -18,23 +21,103 @@ export async function repoRoutes(fastify: FastifyInstance) {
     return { repos: data };
   });
 
-  // GET /api/repos/:id — single repo detail
-  fastify.get<{ Params: { id: string } }>('/repos/:id', async (request, reply) => {
-    const { data, error } = await supabaseAdmin
+  // GET /api/repos/:id — single repo detail with extended analytics
+  fastify.get<{ Params: { id: string }; Querystring: { refresh?: string } }>('/repos/:id', async (request, reply) => {
+    const { data: repo, error } = await supabaseAdmin
       .from('repositories')
       .select('*')
       .eq('id', request.params.id)
       .eq('owner_id', request.userId)
       .single();
 
-    if (error) {
-      request.log.error({ err: error, repoId: request.params.id }, 'Failed to fetch repository');
-      return reply.status(500).send({ error: 'Failed to fetch repository' });
-    }
-    if (!data) {
+    if (error || !repo) {
+      request.log.error({ err: error, repoId: request.params.id }, 'Failed to fetch repository from DB');
       return reply.status(404).send({ error: 'Repository not found' });
     }
 
-    return { repo: data };
+    const refreshRequested = request.query.refresh === 'true';
+    const cacheKey = `repo_details_${repo.github_id}`;
+    
+    // Check cache unless refresh is requested
+    if (!refreshRequested) {
+      const cachedDetails = getCache<any>(cacheKey);
+      if (cachedDetails) {
+        request.log.info({ repoId: repo.github_id }, 'Serving repo details from cache');
+        return { repo: { ...repo, ...cachedDetails } };
+      }
+    } else {
+      request.log.info({ repoId: repo.github_id }, 'Force refresh requested, bypassing cache');
+    }
+
+    // Parallel fetching from GitHub with detailed logging
+    const octokit = new Octokit({ auth: env.GITHUB_TOKEN });
+    
+    // Safety check for name parsing
+    const nameParts = repo.name.split('/');
+    const owner = nameParts.length >= 2 ? nameParts[0] : '';
+    const name = nameParts.length >= 2 ? nameParts[1] : nameParts[0];
+
+    request.log.info({ owner, name, github_token_exists: !!env.GITHUB_TOKEN }, 'Starting GitHub API fetch');
+
+    if (!owner || !name) {
+      request.log.error({ fullName: repo.name }, 'Invalid repository full_name format');
+      return { repo: { ...repo, languages: {}, contributors: [], activity: [], readme: '' } };
+    }
+
+    try {
+      const safeFetch = async <T,>(promise: Promise<T>, label: string, fallback: T): Promise<T> => {
+        try {
+          const result = await promise;
+          request.log.info({ label }, `Successfully fetched ${label}`);
+          return result;
+        } catch (err: any) {
+          request.log.warn({ err: err.message, status: err.status, label }, `Failed to fetch ${label}`);
+          return fallback;
+        }
+      };
+
+      const [languages, contributors, activity, readme] = await Promise.all([
+        safeFetch(
+          octokit.rest.repos.listLanguages({ owner, repo: name }).then(r => r.data),
+          'languages',
+          {}
+        ),
+        safeFetch(
+          octokit.rest.repos.listContributors({ owner, repo: name, per_page: 20 }).then(r => r.data.map(c => ({
+            login: c.login,
+            avatar_url: c.avatar_url,
+            contributions: c.contributions,
+            html_url: c.html_url
+          }))),
+          'contributors',
+          []
+        ),
+        safeFetch(
+          octokit.rest.repos.getCommitActivityStats({ owner, repo: name }).then(r => r.data),
+          'activity',
+          []
+        ),
+        safeFetch(
+          octokit.rest.repos.getReadme({ owner, repo: name }).then(r => Buffer.from(r.data.content, 'base64').toString()),
+          'readme',
+          ''
+        )
+      ]);
+
+      const extendedDetails = {
+        languages: languages || {},
+        contributors: contributors || [],
+        activity: Array.isArray(activity) ? activity.slice(-12) : [],
+        readme: readme || ''
+      };
+
+      // Cache the result
+      setCache(cacheKey, extendedDetails);
+
+      return { repo: { ...repo, ...extendedDetails } };
+    } catch (err) {
+      request.log.error({ err }, 'Unexpected crash in parallel fetching logic');
+      return { repo: { ...repo, languages: {}, contributors: [], activity: [], readme: '' } };
+    }
   });
 }

server/src/routes/profile.ts

@@ -7,6 +7,7 @@ import { repoRoutes } from './routes/repos';
 import { analyticsRoutes } from './routes/analytics';
 import { resourceRoutes } from './routes/resources';
 import { snippetRoutes } from './routes/snippets';
+import { profileRoutes } from './routes/profile';
 import { createClient } from '@supabase/supabase-js';
 
 const fastify = Fastify({ logger: true });
@@ -50,6 +51,7 @@ fastify.register(repoRoutes, { prefix: '/api' });
 fastify.register(analyticsRoutes, { prefix: '/api' });
 fastify.register(resourceRoutes, { prefix: '/api' });
 fastify.register(snippetRoutes, { prefix: '/api' });
+fastify.register(profileRoutes, { prefix: '/api' });
 
 const start = async () => {
   try {

server/src/routes/repos.ts

@@ -0,0 +1,26 @@
+import NodeCache from 'node-cache';
+
+// Cache for 1 hour (3600 seconds), check for expired keys every 10 minutes
+const cache = new NodeCache({ stdTTL: 3600, checkperiod: 600 });
+
+export const getCache = <T>(key: string): T | undefined => {
+  return cache.get<T>(key);
+};
+
+export const setCache = <T>(key: string, value: T, ttl?: number): void => {
+  if (ttl) {
+    cache.set(key, value, ttl);
+  } else {
+    cache.set(key, value);
+  }
+};
+
+export const deleteCache = (key: string): void => {
+  cache.del(key);
+};
+
+export const clearCache = (): void => {
+  cache.flushAll();
+};
+
+export default cache;

server/src/server.ts

@@ -9,6 +9,7 @@ import { Analytics } from './pages/Analytics';
 import { Resources } from './pages/Resources';
 import { Editor } from './pages/Editor';
 import { RepoDetail } from './pages/RepoDetail';
+import { Profile } from './pages/Profile';
 import { NotFound } from './pages/NotFound';
 
 export default function App() {
@@ -26,6 +27,7 @@ export default function App() {
               <Route path="/repo/:id" element={<RepoDetail />} />
               <Route path="/resources" element={<Resources />} />
               <Route path="/editor" element={<Editor />} />
+              <Route path="/profile" element={<Profile />} />
             </Route>
             <Route path="*" element={<NotFound />} />
           </Routes>