🚀 Developer Resource & Cheat Sheet Hub

A clean, responsive, 100% client-side zero-database Developer Resource & Cheat Sheet Hub built with Next.js (App Router), TypeScript, and Tailwind CSS. Provides instant access to Git commands, Data Structures, Web Development, and CLI tricks.

---

✨ Features

• ⚡ Zero-Database Architecture: All content resides in a single, strictly-typed JSON file (src/data/resources.json).
• 🔍 Dynamic Real-Time Search: Instant filtering across cheat sheet titles, descriptions, and tags.
• 🏷️ Category Filter Pills: Toggle between Git, DSA, Web, and CLI topics with dynamic item count badges.
• 📋 Copy to Clipboard: One-click code snippet copying with instant visual feedback state (navigator.clipboard).
• 🌙 Dark / Light Mode: Seamless theme toggling powered by next-themes and Tailwind CSS.

---

🏗️ Tech Stack

Technology	Role
Next.js 14	App Router, Static Export (output: 'export')
TypeScript	Type-safe JSON schemas and component props
Tailwind CSS	Custom styling, glassmorphism, and dark mode
Lucide React	Modern, lightweight UI icons
next-themes	Persistent dark/light mode context

---

🚀 Getting Started

Prerequisites

Make sure you have Node.js 18+ installed on your system.

Installation

# 1. Clone the repository
git clone https://github.com/YOUR-USERNAME/developer-cheatsheet-hub.git

# 2. Change into project directory
cd developer-cheatsheet-hub

# 3. Install dependencies
npm install

# 4. Run development server
npm run dev

Visit http://localhost:3000 to view the live app!

---

📁 Project Architecture

.
├── src/
│   ├── app/
│   │   ├── globals.css         # Tailwind base & dark mode variables
│   │   ├── layout.tsx          # Root layout with ThemeProvider, Navbar, Footer
│   │   └── page.tsx            # Main client page with filtering logic
│   ├── components/
│   │   ├── AddResourceBanner.tsx # Zero-database contribution flow banner
│   │   ├── CategoryFilter.tsx    # Topic filter pills with count badges
│   │   ├── Footer.tsx            # Footer with quick links
│   │   ├── Hero.tsx              # Hero header with search input
│   │   ├── Navbar.tsx            # Navigation bar with theme toggle & mobile menu
│   │   ├── ResourceCard.tsx      # Cheat sheet card with copy snippet button
│   │   ├── ThemeProvider.tsx     # next-themes context provider
│   │   └── ThemeToggle.tsx       # Dark/Light mode switcher button
│   ├── data/
│   │   └── resources.json      # Pure JSON dataset storing all cheat sheets
│   └── types/
│       └── resource.ts         # TypeScript interfaces for resource items
├── CONTRIBUTING.md             # Beginner contribution guide for workshop PRs
├── next.config.mjs             # Next.js static export configuration
├── tailwind.config.ts          # Tailwind styling configuration
├── tsconfig.json               # TypeScript configuration
└── package.json

---

🎯 Workshop Starter PR Exercises

This repository is structured for open-source workshops. Try fixing these starter issues in a Pull Request:

1. Case-Sensitive Search: Search in src/app/page.tsx fails when query casing doesn't match exact title/tag casing.
2. Mobile Navigation Toggle: The mobile hamburger button in src/components/Navbar.tsx does not respond to click events.
3. Snippet Code Overflow: Long single-line code blocks in src/components/ResourceCard.tsx cause horizontal layout overflow.

Read CONTRIBUTING.md for full details on how to contribute!

---