3-5 New Charts

.gitignore

@@ -13,6 +13,10 @@ dist-ssr
 *.local
 .superpowers/
 docs/superpowers/
+.worktrees/
+
+# Raw local data dumps (may contain sensitive info, never commit)
+data/
 
 # Editor directories and files
 .vscode/*

src/components/ChartsAndAnalytics.jsx

@@ -1,32 +1,27 @@
 import { useEffect, useState } from 'react'
-import {
-  Bar,
-  BarChart,
-  CartesianGrid,
-  Legend,
-  Line,
-  LineChart,
-  ResponsiveContainer,
-  Tooltip,
-  XAxis,
-  YAxis,
-} from 'recharts'
 import { fetchProjects } from '../data/fetchProjects.js'
-import { getSubmissionsMonthlyTrend, getSubmissionsTrendByExperience } from '../utils/submissionsTrend.js'
+import {
+  getSubmissionsMonthlyTrend,
+  getSubmissionsTrendByExperience,
+  getSubmissionsTrendByVibeCoded,
+} from '../utils/submissionsTrend.js'
 import { getKeywordCounts } from '../utils/keywords.js'
-import { EXPERIENCE_LEVELS } from '../utils/experience.js'
-
-const EXPERIENCE_COLORS = {
-  'No Experience': '#2a78d6',
-  Beginner: '#eb6834',
-  Intermediate: '#1baf7a',
-  Advanced: '#4a3aa7',
-}
+import { getToolUsageCounts } from '../utils/sefariaTools.js'
+import { getTechCounts } from '../utils/techUsed.js'
+import SubmissionsTrendChart from './charts/SubmissionsTrendChart.jsx'
+import KeywordFrequencyChart from './charts/KeywordFrequencyChart.jsx'
+import ExperienceTrendChart from './charts/ExperienceTrendChart.jsx'
+import ToolUsagePieChart from './charts/ToolUsagePieChart.jsx'
+import VibeCodedTrendChart from './charts/VibeCodedTrendChart.jsx'
+import TechUsedChart from './charts/TechUsedChart.jsx'
 
 function ChartsAndAnalytics() {
   const [trend, setTrend] = useState(null)
   const [keywordCounts, setKeywordCounts] = useState(null)
   const [experienceTrend, setExperienceTrend] = useState(null)
+  const [toolUsage, setToolUsage] = useState(null)
+  const [vibeCodedTrend, setVibeCodedTrend] = useState(null)
+  const [techCounts, setTechCounts] = useState(null)
   const [error, setError] = useState(null)
 
   useEffect(() => {
@@ -35,83 +30,25 @@ function ChartsAndAnalytics() {
         setTrend(getSubmissionsMonthlyTrend(projects))
         setKeywordCounts(getKeywordCounts(projects))
         setExperienceTrend(getSubmissionsTrendByExperience(projects))
+        setToolUsage(getToolUsageCounts(projects))
+        setVibeCodedTrend(getSubmissionsTrendByVibeCoded(projects))
+        setTechCounts(getTechCounts(projects))
       })
       .catch((err) => setError(err.message))
   }, [])
 
   if (error) return <p className="charts-and-analytics">Couldn't load chart data right now.</p>
-  if (!trend || !keywordCounts || !experienceTrend) return <p className="charts-and-analytics">Loading chart…</p>
-  if (experienceTrend.length === 0) {
-    return <p className="charts-and-analytics">No experience-level data available yet.</p>
+  if (!trend || !keywordCounts || !experienceTrend || !toolUsage || !vibeCodedTrend || !techCounts) {
+    return <p className="charts-and-analytics">Loading chart…</p>
   }
-
   return (
     <div className="charts-and-analytics">
-      <h2>Submissions, past 12 months</h2>
-      <ResponsiveContainer width="100%" height={360}>
-        <BarChart data={trend}>
-          <CartesianGrid strokeDasharray="3 3" vertical={false} />
-          <XAxis dataKey="month" />
-          <YAxis allowDecimals={false} />
-          <Tooltip />
-          <Bar dataKey="count" name="Submissions" fill="var(--accent)" />
-        </BarChart>
-      </ResponsiveContainer>
-
-      <h2>Keyword frequency</h2>
-      <ResponsiveContainer width="100%" height={keywordCounts.length * 28 + 40}>
-        <BarChart
-          data={keywordCounts}
-          layout="vertical"
-          margin={{ left: 24 }}
-        >
-          <CartesianGrid strokeDasharray="3 3" horizontal={false} />
-          <XAxis type="number" allowDecimals={false} />
-          <YAxis type="category" dataKey="keyword" width={100} />
-          <Tooltip />
-          <Bar dataKey="count" name="Projects" fill="var(--accent)" />
-        </BarChart>
-      </ResponsiveContainer>
-
-      <h2>Submissions by experience level</h2>
-      <ResponsiveContainer width="100%" height={360}>
-        <LineChart data={experienceTrend} margin={{ right: 100 }}>
-          <CartesianGrid strokeDasharray="3 3" vertical={false} />
-          <XAxis dataKey="month" />
-          <YAxis allowDecimals={false} />
-          <Tooltip />
-          <Legend />
-          {EXPERIENCE_LEVELS.map((level) => (
-            <Line
-              key={level}
-              type="monotone"
-              dataKey={level}
-              name={level}
-              stroke={EXPERIENCE_COLORS[level]}
-              strokeWidth={2}
-              dot={{ r: 3 }}
-              // recharts 3.x gates the custom `label` render-prop behind an internal
-              // isAnimating flag cleared via onAnimationEnd, which doesn't fire
-              // reliably in this dev environment — without this, the end-of-line
-              // labels below silently never render (no test/lint failure to catch it).
-              isAnimationActive={false}
-              label={(props) =>
-                props.index === experienceTrend.length - 1 ? (
-                  <text
-                    x={props.x + 6}
-                    y={props.y}
-                    dy={4}
-                    fill="var(--text-h)"
-                    fontSize={12}
-                  >
-                    {level}
-                  </text>
-                ) : null
-              }
-            />
-          ))}
-        </LineChart>
-      </ResponsiveContainer>
+      <SubmissionsTrendChart data={trend} />
+      <KeywordFrequencyChart data={keywordCounts} />
+      <ExperienceTrendChart data={experienceTrend} />
+      <ToolUsagePieChart data={toolUsage} />
+      <VibeCodedTrendChart data={vibeCodedTrend} />
+      <TechUsedChart data={techCounts} />
     </div>
   )
 }

src/components/Controls.jsx

@@ -10,6 +10,7 @@ function Controls({
     <div className="dashboard-controls">
       <input
         type="text"
+        className="search-input"
         placeholder="Search projects..."
         value={searchText}
         onChange={(event) => onSearchChange(event.target.value)}

src/components/ProjectCard.jsx

@@ -1,28 +1,44 @@
+import { useState } from 'react'
+import { getCategoryColor } from '../utils/categories.js'
+
 function ProjectCard({ project }) {
+  const [flipped, setFlipped] = useState(false)
+
+  function handleCardClick() {
+    if (window.getSelection().toString()) return
+    setFlipped((current) => !current)
+  }
+
   return (
-    <a
-      className="project-card"
-      href={project.project_link}
-      target="_blank"
-      rel="noreferrer"
-    >
-      {project.image_url && (
-        <img
-          className="project-card-image"
-          src={project.image_url}
-          alt={`${project.project_name} logo`}
-        />
-      )}
-      <h3>{project.project_name}</h3>
-      <div className="project-card-categories">
-        {project.categories.map((category) => (
-          <span key={category} className="project-card-category">
-            {category}
-          </span>
-        ))}
+    <div className="project-card" onClick={handleCardClick}>
+      <div className={`project-card-inner${flipped ? ' flipped' : ''}`}>
+        <div className="project-card-front">
+          <a
+            className="project-card-title"
+            href={project.project_link}
+            target="_blank"
+            rel="noreferrer"
+            onClick={(event) => event.stopPropagation()}
+          >
+            {project.project_name}
+          </a>
+        </div>
+        <div className="project-card-back">
+          <div className="project-card-categories">
+            {project.categories.map((category) => (
+              <span
+                key={category}
+                className="project-card-category"
+                style={{ '--category-color': getCategoryColor(category) }}
+              >
+                {category}
+              </span>
+            ))}
+          </div>
+          <p className="project-card-desc">{project.project_desc}</p>
+        </div>
       </div>
-      <p className="project-card-desc">{project.project_desc}</p>
-    </a>
+    </div>
   )
 }
 

src/components/charts/ExperienceTrendChart.jsx

@@ -0,0 +1,25 @@
+import LineChart from './types/LineChart.jsx'
+import { EXPERIENCE_LEVELS } from '../../utils/experience.js'
+
+const EXPERIENCE_COLORS = {
+  'No Experience': 'var(--chart-blue)',
+  Beginner: 'var(--chart-orange)',
+  Intermediate: 'var(--chart-aqua)',
+  Advanced: 'var(--chart-violet)',
+}
+
+function ExperienceTrendChart({ data }) {
+  return (
+    <LineChart
+      data={data}
+      title="Submissions by experience level"
+      series={EXPERIENCE_LEVELS.map((level) => ({
+        key: level,
+        name: level,
+        color: EXPERIENCE_COLORS[level],
+      }))}
+    />
+  )
+}
+
+export default ExperienceTrendChart

src/components/charts/KeywordFrequencyChart.jsx

@@ -0,0 +1,17 @@
+import BarChart from './types/BarChart.jsx'
+
+function KeywordFrequencyChart({ data }) {
+  return (
+    <BarChart
+      data={data}
+      title="Keyword frequency"
+      dataKey="count"
+      categoryKey="keyword"
+      layout="vertical"
+      categoryWidth={100}
+      height={data.length * 28 + 40}
+    />
+  )
+}
+
+export default KeywordFrequencyChart

src/components/charts/SubmissionsTrendChart.jsx

@@ -0,0 +1,15 @@
+import BarChart from './types/BarChart.jsx'
+
+function SubmissionsTrendChart({ data }) {
+  return (
+    <BarChart
+      data={data}
+      title="Submissions, past 12 months"
+      dataKey="count"
+      categoryKey="month"
+      barName="Submissions"
+    />
+  )
+}
+
+export default SubmissionsTrendChart

src/components/charts/TechUsedChart.jsx

@@ -0,0 +1,17 @@
+import BarChart from './types/BarChart.jsx'
+
+function TechUsedChart({ data }) {
+  return (
+    <BarChart
+      data={data}
+      title="Technologies used"
+      dataKey="count"
+      categoryKey="label"
+      layout="vertical"
+      categoryWidth={180}
+      height={data.length * 28 + 40}
+    />
+  )
+}
+
+export default TechUsedChart

src/components/charts/ToolUsagePieChart.jsx

@@ -0,0 +1,32 @@
+import PieChart from './types/PieChart.jsx'
+
+// Fixed-order categorical hues, pulled from the brand palette defined in
+// index.css; gray is reserved for the "Other" bucket and is never one of
+// the 6 identity colors.
+const TOOL_SLICE_COLORS = [
+  'var(--chart-blue)',
+  'var(--chart-orange)',
+  'var(--chart-aqua)',
+  'var(--chart-yellow)',
+  'var(--chart-magenta)',
+  'var(--chart-green)',
+]
+const OTHER_SLICE_COLOR = 'var(--chart-neutral)'
+
+function colorForToolSlice(entry, index) {
+  return entry.endpoint === 'Other' ? OTHER_SLICE_COLOR : TOOL_SLICE_COLORS[index]
+}
+
+function ToolUsagePieChart({ data }) {
+  return (
+    <PieChart
+      data={data}
+      title="Most-used Sefaria API endpoints"
+      dataKey="count"
+      nameKey="endpoint"
+      colorForSlice={colorForToolSlice}
+    />
+  )
+}
+
+export default ToolUsagePieChart

src/components/charts/VibeCodedTrendChart.jsx

@@ -0,0 +1,24 @@
+import LineChart from './types/LineChart.jsx'
+import { VIBE_CODED_SERIES } from '../../utils/submissionsTrend.js'
+
+const VIBE_CODED_COLORS = {
+  'Not vibe-coded': 'var(--chart-blue)',
+  'Vibe-coded': 'var(--chart-orange)',
+}
+
+function VibeCodedTrendChart({ data }) {
+  return (
+    <LineChart
+      data={data}
+      title="Vibe-coded vs. not, tracked since July 2026"
+      description={'"Vibe-coded" is a newly-tracked field, so earlier months may be undercounted or unreported rather than confirmed non-vibe-coded.'}
+      series={VIBE_CODED_SERIES.map((series) => ({
+        key: series,
+        name: series,
+        color: VIBE_CODED_COLORS[series],
+      }))}
+    />
+  )
+}
+
+export default VibeCodedTrendChart