Cline Code Nexus

A web-based code snippet manager built with Bun, React, TypeScript, and styled with a retro CS 1.6 theme. Allows users to add, view, search, copy, and delete code snippets, with data persisted locally using localStorage.

Features

• Add & Manage Snippets: Create new snippets with a title, code block, and language selection.
• List & View: Displays all saved snippets clearly.
• Syntax Highlighting: Code blocks are highlighted for readability using react-syntax-highlighter.
• Copy to Clipboard: Easily copy snippet code with a dedicated button.
• Delete Snippets: Remove unwanted snippets with a confirmation step.
• Search/Filter: Quickly find snippets by searching title or language (case-insensitive).
• Local Persistence: Snippets are saved in the browser's localStorage, so they remain between sessions.
• UI Components: Includes reusable Modal, Notification (Toast), Tabs, and StyledButton components.
• Styling: Uses the cs16.css theme for a unique look.

Tech Stack

• Runtime/Bundler/Package Manager: Bun
• Language: TypeScript
• UI Library: React (using JSX)
• Styling: cs16.css & Inline Styles
• Syntax Highlighting: react-syntax-highlighter
• Persistence: Browser localStorage

Project Structure

cline-code-nexus/
├── .gitignore
├── bun.lockb
├── package.json
├── public/
│   └── index.html      # Main HTML entry point
├── README.md           # This file
├── src/
│   ├── components/     # Reusable React components
│   │   ├── App.tsx         # Main application component
│   │   ├── Modal.tsx       # Modal dialog component
│   │   ├── Notification.tsx# Notification/Toast component
│   │   ├── SnippetForm.tsx # Form for adding snippets
│   │   ├── SnippetList.tsx # Component displaying snippets
│   │   ├── StyledButton.tsx# Standardized button
│   │   └── Tabs.tsx        # Tabs component
│   ├── index.tsx       # React application entry point
│   └── styles/         # CSS files
│       ├── cs16.css
│       └── style.css     # (Currently unused/overridden)
└── tsconfig.json       # TypeScript configuration

Getting Started

Prerequisites

• Bun installed globally.

Running Locally

1. Clone the repository:

   git clone https://github.com/Albo3/cline-code-nexus.git
   cd cline-code-nexus
   

2. Install dependencies: (Currently, only dev dependencies like @types/* are used, but running install is good practice)

   bun install
   

3. Start the development server:
   • With hot reloading (recommended):

     bun run --hot public/index.html
     

   • Without hot reloading:

     bun run public/index.html
     

4. Open your browser and navigate to the localhost URL provided by Bun (usually http://localhost:3000).