Your Personal Code Snippets Library in the Cloud

Live Demo

---

📋 Table of Contents

• Description
• Features
• Technologies
• Installation
• Configuration
• Usage
• Database Schema
• Screenshots
• Contributing
• License

---

🎯 Description

Cloud CodeBase is a modern web application for managing code snippets that allows developers to store, organize, and share code snippets in the cloud. It's the ideal solution for keeping your useful snippets organized, accessible from anywhere, with the ability to share them with your team or the community.

🎯 Who is it for?

• Developers who want to organize their favorite code snippets
• Development teams that need a shared code library
• Educators who want to share code examples with students
• Freelancers managing multiple projects

🌐 Getting Started

You can start using Cloud CodeBase immediately by visiting the live demo. The application is freely available for anyone to use - simply create an account and start organizing your code snippets.

If you prefer to host your own instance with full control over your data, you can follow the installation instructions below to set up your own deployment using your Supabase account and hosting platform of choice.

---

✨ Features

📝 Snippet Management

• Full-Featured Code Editor with syntax highlighting

  • Support for 10+ programming languages: JavaScript, TypeScript, Python, Java, PHP, CSS, HTML, SQL, Rust, Go, JSON with Add New functionality
  • 8 theme options: VS Code Dark+, Dracula, Night Owl, Nord, Gruvbox Dark, Material Dark, Synthwave '84, One Dark
  • Adjustable font size (12-24px)
  • Preview of code with syntax highlighting

• Create & Edit

  • Title, description, and code
  • Demo Link - Optional URL field for live demos (CodePen, JSFiddle, deployed apps, etc.)
  • Multiple categories per snippet
  • Multiple collections per snippet
  • Multiple groups per snippet
  • Custom tags for easier searching

• Favorites System

  • Mark important snippets as favorites
  • Quick access to your favorite snippets
  • Filter by favorites only

• Public Sharing

  • Make snippets public with one click
  • Unique shareable link for each snippet
  • Beautiful public view page without requiring authentication
  • Save to Library - Authenticated users can save shared snippets to their own account
  • Privacy warning indicators for public snippets

🗂️ Organization System

Cloud CodeBase features a powerful 4-tier organizational structure:

• Categories (Languages)

  • Classify snippets by programming language
  • Custom color-coded categories
  • 4 default categories auto-created: HTML, CSS, JavaScript, PHP
  • Multiple categories per snippet
  • Visual pills with category colors
  • Snippet count per category

• Collections (Boards)

  • Organize snippets by project or theme
  • Pink color scheme for visual distinction
  • Drag & drop snippets into collections
  • Multi-select for bulk operations
  • Create collections on-the-fly during snippet creation
  • Snippet count per collection

• Groups (Projects)

  • Organize snippets by larger projects or teams
  • Amber color scheme for visual distinction
  • Support for descriptions
  • Drag & drop functionality
  • Bulk operations support
  • Snippet count per group

• Tags

  • Free-form text tags for flexible organization
  • Autocomplete from existing tags
  • Multiple tags per snippet
  • Tag popularity sorting (most used first)
  • Expandable tag list (shows top 12 by default)
  • Snippet count per tag

🔍 Search & Filtering

• Full-Text Search

  • Search across title, description, and code content
  • Real-time filtering as you type
  • Case-insensitive matching

• Advanced Filters

  • Filter by category (language)
  • Filter by collection
  • Filter by group
  • Filter by tag
  • Filter favorites only
  • Combine multiple filters simultaneously

• Sorting Options

  • Recently Added (default) - Sort by creation date
  • Recently Modified - Sort by last update
  • Oldest First - Chronological order
  • Title (A-Z) - Alphabetical ascending
  • Title (Z-A) - Alphabetical descending
  • Favorites First - Starred snippets at the top

🎨 User Experience

• Modern Dark Theme

  • Dark interface optimized for extended use
  • Gradient accents (cyan → blue → indigo)
  • Color-coded categories, collections, and groups
  • Reduced eye strain

• Copy Functionality

  • Copy raw code to clipboard
  • Copy as Markdown with proper code fences
  • One-click copy with visual feedback

• Drag & Drop

  • Drag snippets to collections
  • Drag snippets to groups
  • Visual feedback during drag operations
  • Bulk selection support

• Editor Preferences

  • Font size customization (12-24px)
  • Theme selection (8 options)
  • Preferences persist in localStorage
  • Real-time preview updates

🔐 Security & Privacy

• Row Level Security (RLS)

  • Database-level access control
  • Users can only see and modify their own data
  • Public snippets have specific SELECT policies

• Authentication

  • Secure email/password authentication via Supabase Auth
  • Email verification required
  • Secure password reset functionality
  • Session management with auto-refresh

• Data Privacy

  • Snippets are private by default
  • Granular sharing control per snippet
  • Public snippets accessible via unique share token
  • No data sharing between users without explicit consent

---

🛠️ Technologies

Frontend

Technology	Version	Usage
React	19.1.1	UI Framework
React Router	7.9.5	Client-side Routing
Vite	7.1.7	Build Tool & Dev Server
Tailwind CSS	4.1.16	Styling Framework
CodeMirror	6.x	Code Editor
React Syntax Highlighter	15.x	Syntax Highlighting

Backend & Database

Technology	Description
Supabase	Backend-as-a-Service
PostgreSQL	Relational Database
Supabase Auth	Authentication System
Row Level Security	Data Privacy & Security

---

📦 Installation

Prerequisites

Before you begin, make sure you have installed:

• Node.js (v18 or newer)
• npm (v9 or newer)
• Git
• Supabase account (Free signup)

Step 1: Clone the Repository

git clone https://github.com/yourusername/cloud-codebase.git
cd cloud-codebase

Step 2: Install Dependencies

npm install

Step 3: Create Supabase Project

1. Sign in to Supabase Dashboard
2. Click "New Project"
3. Select organization and name your project
4. Choose a Database Password (keep it safe!)
5. Select Region (closest to you is recommended)
6. Click "Create new project"

Step 4: Database Setup

See the Database Schema section below for the complete SQL schema and setup instructions.

Step 5: Get Supabase Credentials

1. Go to Settings > API in Supabase Dashboard
2. Copy:
   • Project URL (e.g., https://xxxxx.supabase.co)
   • anon/public key (the public API key)

Step 6: Create Environment Files

Create a .env file in the project root:

# .env
VITE_SUPABASE_URL=your_project_url_here
VITE_SUPABASE_ANON_KEY=your_anon_key_here

For production, create .env.production:

# .env.production
VITE_SUPABASE_URL=your_project_url_here
VITE_SUPABASE_ANON_KEY=your_anon_key_here

⚠️ Warning: Do NOT commit .env files to Git!

Step 7: Configure Authentication Redirects

1. Go to Authentication > URL Configuration in Supabase
2. Add the following Redirect URLs:
   • Development: http://localhost:5173/auth/callback
   • Production: https://your-domain.com/auth/callback (if you have a custom domain)

Step 8: Run the Application

Development Mode

npm run dev

The application will run at http://localhost:5173

Production Build

npm run build
npm run preview

---

⚙️ Configuration

Vite Configuration

The vite.config.js contains build settings:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
  base: process.env.NODE_ENV === 'production' ? '/codebase/' : '/',
});

💡 Change the base path if deploying to a different subdirectory.

Tailwind Configuration

The tailwind.config.js defines custom styles:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Editor Preferences

Users can customize:

• Font Size: 12px - 24px
• Theme: 8 available themes
• Preferences are saved in localStorage

---

🚀 Usage

1. Sign Up / Sign In

• Visit the application
• Create an account with email/password
• Confirm your email
• Sign in

2. Create a Snippet

1. Click "+ New Snippet"
2. Fill in:
   • Title: Descriptive name
   • Description: What this snippet does
   • Code: Your code
   • Demo Link (optional): Link to live demo or example
3. Select Categories (can select multiple)
4. Add to Collections (optional)
5. Add to Groups (optional)
6. Add Tags (optional)
7. Click "Save"

3. Organization

Create a Category

• Sidebar → "+ Add Category"
• Choose name and color

Create a Collection

• Sidebar → "+ Add Collection"
• Give it a name (e.g., "React Project", "Utils")

Create a Group

• Sidebar → "+ Add Group"
• Provide name and optional description

Add to Collection/Group

• Drag & drop the snippet to collection or group
• Or edit the snippet and select collections/groups

4. Search

• Use the search bar for full-text search
• Filter by category, collection, group, or tag
• Sort results by various criteria

5. Share

1. Open the snippet
2. Enable "Make Public"
3. Copy the share link
4. Send the link to anyone

Shared snippets have a beautiful public view where:

• Anyone can view the snippet without signing in
• Authenticated users can save it to their own library
• Demo links are prominently displayed

---

🗄️ Database Schema

The complete database schema including all tables, relationships, Row Level Security policies, and triggers is available in a separate file.

View Complete Database Schema →

The database includes:

• Tables: profiles, categories, collections, snippet_groups, tags, snippets, and junction tables
• Row Level Security (RLS) policies for all tables
• Triggers for automatic default category creation
• Foreign key relationships with cascade delete

---

📸 Screenshots

Main Screen

---

🤝 Contributing

Contributions are always welcome! If you'd like to help:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Code of Conduct

• Respect other contributors
• Write clean, documented code
• Test your changes before submitting PR

---

🐛 Bug Reports

If you find a bug:

1. Check if there's already an issue
2. If not, create a new issue with:
   • Problem description
   • Steps to reproduce
   • Expected vs Actual behavior
   • Screenshots (if applicable)
   • Browser & OS info

---

📝 License

This project is free to use. You can modify and distribute it as you wish.

---

📧 Contact

For questions or support:

• GitHub Issues: Create Issue
• Email: tkarts@bitlogic.cloud

---

🙏 Acknowledgments

• React - The best UI framework
• Supabase - For the amazing BaaS platform
• Tailwind CSS - For utility-first CSS
• CodeMirror - For the excellent code editor
• Vite - For the blazing-fast build tool

---

Made with ❤️ for developers, by developers

If you like this project, give it a ⭐️!