feat: setup full frontend v1 architecture

.coderabbit.yaml

@@ -0,0 +1,32 @@
+# yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json
+language: "en-US"
+
+# The tone the AI will use when talking to you and your contributors
+tone_instructions: 'You are a senior full-stack developer reviewing code for an open-source Next.js project. Be encouraging, highly technical, and concise. Always suggest best practices for TypeScript and Next.js App Router.'
+
+reviews:
+  # 'chill' means it won't nitpick tiny style things that ESLint should catch
+  profile: "chill"
+
+  # When set to true, CodeRabbit will automatically "Approve" the PR when its requested changes are resolved
+  request_changes_workflow: true
+
+  # Adds a fun, auto-generated summary and a poem about the code at the top of the PR!
+  high_level_summary: true
+  poem: true
+
+  # Automatically review all new PRs
+  auto_review:
+    enabled: true
+    drafts: false # Won't waste reviews if a contributor opens a "Draft" PR
+
+  # Specific rules for specific folders!
+  path_instructions:
+    - path: "frontend/**/*.tsx"
+      instructions: "Ensure React components are using modern hooks, avoid unnecessary re-renders, and use TailwindCSS properly."
+    - path: "frontend/content/**/*.mdx"
+      instructions: "Ensure MDX files have proper frontmatter, clean Markdown formatting, and that code blocks specify a language."
+
+# Allows you and contributors to chat with the bot in the PR comments
+chat:
+  auto_reply: true

.github/workflows/ci.yml

@@ -0,0 +1,37 @@
+name: PR Checks
+
+on:
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  quality-checks:
+    runs-on: ubuntu-latest
+
+    # Run all commands inside the frontend directory
+    defaults:
+      run:
+        working-directory: ./frontend
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+          cache-dependency-path: ./frontend/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Check TypeScript Types
+        # Uses npx to run the TypeScript compiler and check for errors without generating files
+        run: npx tsc --noEmit
+
+      - name: Verify Next.js Build
+        # Uses the "build": "next build" script
+        # Next.js will also do a strict check here, but having them separate makes debugging easier!
+        run: npm run build

README.md

@@ -1 +1,93 @@
-# refme
+# RefMe_
+
+Quick-reference hub for full-stack syntax.
+
+## Why
+
+I got tired of opening a dozen browser tabs or re-prompting AI for the same boilerplate every time I needed a quick syntax lookup. RefMe is a single, fast page for the snippets and commands I reach for most.
+
+## Tech stack
+
+- **Framework:** Next.js 15 (App Router)
+- **Styling:** Tailwind CSS v4, monochrome/zinc palette
+- **Content:** MDX via `next-mdx-remote` - markdown cheatsheets with embedded interactive React components (e.g. copy-paste code blocks)
+- **Layout:** Split-pane - fixed sidebar, scrolling content area
+- **Icons & Typography:** Lucide React, paired with JetBrains Mono and Outfit
+- **Deployment:** Vercel
+
+## Features
+
+- **Theme system** - dark/light mode with localStorage persistence and system preference detection.
+- **Dynamic routing** - topic pages generated via Next.js App Router (`/javascript`, `/python`, `/react`, etc.).
+- **Code highlighting** - adapts to theme: `vscDarkPlus` in dark mode, `oneLight` in light mode.
+- **Responsive** - mobile (`<768px`) single-column, tablet (`768–1024px`) adjusted grid, desktop (`1024px+`) full three-column layout.
+
+## Project structure
+
+```text
+refme/
+├── frontend/
+│   ├── app/
+│   │   ├── layout.tsx         # Global layout & font configuration
+│   │   ├── page.tsx           # Split-pane homepage & directory search
+│   │   ├── docs/              # Architecture & vision page
+│   │   ├── [topic]/           # Dynamic MDX renderer for each cheatsheet
+│   │   └── components/        # Interactive bits (ClientCodeBlock, DirectoryList)
+│   ├── content/               # Where the actual .mdx cheatsheets live
+│   ├── src/
+│   │   ├── context/           # Custom ThemeContext (Dark/Light mode)
+│   │   ├── data/              # Directory structure definitions
+│   │   └── lib/               # MDX parsing logic
+│   └── tailwind.config.ts
+```
+
+## Usage
+
+- Browse topics from the homepage grid.
+- Search to filter topics by name.
+- Toggle dark/light mode via the moon/sun icon.
+- Click a card to open the full cheatsheet.
+- Hover a code block to copy it.
+
+## Adding a new topic
+
+1. Add a `.mdx` file to `frontend/content/` with `title` and `description` frontmatter.
+2. Add its route to `REFERENCE_DATA` in `app/page.tsx`.
+
+## Local development
+
+```bash
+git clone https://github.com/yash-pluto/refme.git
+cd refme/frontend
+npm install
+npm run dev
+```
+
+Then open `http://localhost:3000`.
+
+**Production build:**
+
+```bash
+npm run build
+npm start
+```
+
+**Deploy:**
+
+```bash
+npm run build
+vercel deploy
+```
+
+
+## License
+
+MIT - do whatever you want with it. A shoutout is appreciated if you use the layout or code.
+
+
+<div align="center">
+
+**Yash Vardhan**
+[Portfolio](https://yash-pluto.vercel.app) · [GitHub](https://github.com/yash-pluto) · [LinkedIn](https://linkedin.com/in/vardhan-yash3105)
+
+</div>

frontend/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts