Guest Mode & Hybrid Storage Update

Overview

This update introduces Guest Mode, allowing users to start coding instantly without signing in. Guest projects are stored locally and automatically migrated to the cloud once the user authenticates.

---

Key Features

Guest Mode

• Editor is accessible without authentication (/editor/:id)
• Guest projects are stored in browser localStorage
• Clicking Launch Editor creates a default starter project
• Uses generateLocalId() to create local- prefixed project IDs

Hybrid Storage

• Projects use:
  • localStorage for local- projects
  • Firebase Realtime Database for cloud projects
• projectService.ts now supports both storage types
• All CRUD operations work for local and cloud projects
• getUserProjects() returns a combined list

Automatic Migration

• New migrationService.ts
• Runs automatically when a guest signs in
• Migrates all local projects to Firebase
• Local data is deleted only after successful cloud save
• Redirects user to the cloud version if currently editing
• Toast notifications confirm migration status

Global Toast System

• New ToastContext
• Simple showToast(message) API
• Auto-dismiss after 3 seconds

---

Bug Fixes

• Fixed auth listener re-subscribing issue in AuthContext.tsx
• Improved sign-in redirect flow (now redirects to dashboard)
• Fixed Monaco Editor red underline issues when switching projects

---

Files Changed

New

• src/utils/idGenerator.ts
• src/services/migrationService.ts
• src/context/ToastContext.tsx

Updated

• App.tsx – Editor no longer protected
• projectService.ts – Hybrid storage
• AuthContext.tsx – Migration + auth fixes
• CodeEditor.tsx – Marker cleanup

---

Security

• Guests cannot write to Firebase
• Only authenticated users can modify cloud projects
• Migration respects ownership rules

---

User Flow

Guest

1. Open site
2. Click Launch Editor
3. Code immediately
4. Sign in later
5. Projects auto-migrate

Authenticated

• Sign in → Dashboard
• Access all cloud projects
• No localStorage usage by default

---

Compatibility

• No breaking changes
• Fully backward compatible

---

Limitations

• Local projects are device-specific
• Requires sign-in to migrate
• Local projects cannot be shared

---

Full Changelog: v3.3.0...v3.4.0

Performance Overhaul: Route-Based Splitting & Strategic Bundle Chunking

Description

Implemented a comprehensive performance optimization strategy to enhance load times and caching efficiency. This update introduces route-based code splitting to reduce the initial bundle size and configures Vite/Rollup with strategic manual chunking to isolate heavy dependencies for better long-term caching.

Changes Made

• Route-Based Code Splitting:
  • App Refactoring (App.tsx): Converted 8 core components to lazy imports using React.lazy (Dashboard, Overview, Projects, Community, Settings, Profile, PublicProfile, and Editor).
  • Suspense Integration: Wrapped lazy-loaded routes with Suspense logic.
  • Static Entry: Maintained LandingPage as a static import to ensure instant initial loading.
  • UI Feedback: Created a LoadingSpinner component to provide visual feedback during route chunk downloads.
• Bundle Configuration (vite.config.ts):
  • Configured build.rollupOptions.output.manualChunks to split dependencies into three strategic chunks:
    • monaco-editor (Code editor wrapper)
    • firebase (Firebase SDK)
    • vendor (React, ReactDOM, Framer Motion)

How It Works

• Lazy Loading: The application now separates route logic into 8 distinct chunks. When a user navigates to a route, the browser downloads only the necessary code on demand, utilizing the LoadingSpinner for transition states.
• Chunk Strategy: Instead of a single monolithic bundle, stable dependencies (Vendor, Firebase, Monaco) are now split into separate files. This allows the browser to cache these heavy libraries independently, meaning application code updates won't force users to re-download unchanged vendor libraries.

Notes

Build Verification & Results:

• ✅ Landing Page: Loads instantly (no spinner).
• ✅ Route Chunks: 8 routes verified as lazy-loaded on demand.
• ✅ Asset Sizes (dist/assets/):
  • monaco-editor.js: ~14 KB
  • firebase.js: ~240 KB
  • vendor.js: ~341 KB

Performance Impact:

• Smaller Downloads: Users only download what they need for the current view.
• Better Caching: Vendor libs are cached separately from app code.
• Faster Rebuilds: Stable dependencies do not require rebuilding during development.

Full Changelog: v3.2.0...v3.3.0

Editor Persistence, Community Publishing & Data Integrity Fixes

Description

Implemented comprehensive editor persistence with both auto-save and manual save capabilities, alongside a new suite of features for community project publishing and management. Addressed critical data integrity issues regarding Firebase permissions and data overwriting, and refactored the architecture to ensure database precedence over local state.

Changes Made

• Editor Persistence:
  • Implemented debounced auto-save functionality.
  • Added manual save capability via a toolbar button and Ctrl+S shortcut.
  • Integrated visual "saving/saved" status indicators in the editor header.
• Community & Publishing:
  • Added CommunityService to manage public project interactions (publishing, fetching, filtering).
  • Implemented PublishModal for sharing projects to the community feed.
  • Added EditPostModal for updating published project metadata.
  • Created CommunityProjectCard to display public projects with save/view statistics.
  • Overhauled the Community page with a responsive grid layout and updated filtering logic.
  • Updated the Profile page to support new project management and publishing flows.
• Data Integrity Fixes:
  • Resolved PERMISSION_DENIED errors by correcting Firebase update logic to use the authenticated user's ID.
  • Fixed a critical bug where saving overwrote unrelated metadata by switching from set to update operations.
  • Fixed a race condition where localStorage state overrode fresh database data on reload.
• Refactoring & UI:
  • Refactored Layout to separate state initialization from editor loading.
  • Standardized project data loading to ensure database precedence.
  • Updated MainContent to expose the onCodeChange callback.
  • Improved dashboard layout structure and global styles.

How It Works

• Persistence Strategy: The system now utilizes a debounce mechanism for auto-saving to minimize writes.
• Data Safety: Database operations were converted from destructive set calls to targeted update calls, ensuring that modifying code does not accidentally wipe project metadata (like timeline info or public status).
• State Synchronization: The loading flow was restructured so that remote database data always takes precedence over potentially stale localStorage cache.

Full Changelog: v3.1.1...v3.2.0

v3.1.1 - Fix: Public Profile Access & Error Handling

Description

Resolved an issue preventing unauthenticated users from viewing public profiles and improved the robustness of the profile data fetching logic. This update also includes necessary adjustments to Firebase security rules to permit public access where appropriate.

Changes Made

• Bug Fixes:
  • Fixed the "Profile not found" error that occurred when unauthenticated users attempted to view public profiles.
  • Improved error handling within the useProfile hook to gracefully manage Firebase permission errors.
• Technical Improvements:
  • Updated Firebase Realtime Database security rules to explicitly support public profile viewing and access to featured projects.
  • Added debug logging to the username resolution flow to aid in future troubleshooting.

How It Works

The issue was caused by restrictive database rules blocking read access for users without an active session. The security rules were updated to allow public read access for specific profile paths. Additionally, the useProfile hook was refactored to catch permission-related exceptions and handle them without disrupting the UI.

Full Changelog: v3.1.0...v3.1.1

v3.1.0 - Public Profiles & Community Hub

Excited to announce CodeSplit v3.1.0. This update delivers a major overhaul to user profiles, introduces a unique username system, and launches the new Community Templates Hub.

---

New Features

Public Profiles & Usernames

• Unique Handles – Claim your unique @username
  • Alphanumeric validation (3–20 characters)
  • Atomic claiming system ensures global uniqueness
• Public Profile Page – Share your work at /u/@username
• Privacy Control – Toggle profiles between Public and Private
• Smart Routing – Supports both /u/@username and /u/USER_ID
• Read-Only View – Visitors can view your stats and featured projects

---

Profile Page Redesign

New Stats Dashboard

• Track Total Projects, Featured Count, and Membership Duration
• Top Languages – Visual progress bars showing your most-used languages (HTML, CSS, JS) across all projects

Rich Social Links

• Add your GitHub, LinkedIn, and Personal Website to your profile

Featured Work Cards

• Large Preview Cards – 16:9 aspect ratio with auto-generated gradient backgrounds
• Smart Tagging – Automatically detects tags like React, API, Animated, and Responsive based on your code
• Description Extraction – Automatically extracts project descriptions from your HTML

---

Community Hub

• Community Templates – Explore a curated collection of starter templates
• Live Preview – Open interactive previews in a modal before using a template
• One-Click Fork – “Use This Template” instantly creates a new project from a selected template

---

Technical Improvements

• useProfile Hook – Enhanced with language statistics calculation and centralized data fetching
• Atomic Transactions – Implemented Firebase transactions for safe username claiming and race-condition prevention
• Security Rules – Updated Firebase Realtime Database rules to secure the new usernames collection
• Performance – Debounced username availability checks to reduce database reads

---

Bug Fixes

• Fixed “Profile not found” error when accessing profiles via username URLs
• Resolved race conditions when switching usernames by automatically releasing old handles
• Improved error handling for non-existent profiles

v3.0.0 – SaaS Dashboard & Enhanced Project Management

New Features

Landing Page & Routing

• New modern landing page with a hero section showcasing the IDE
• Full React Router integration with protected routes for authenticated users
• Seamless navigation between landing page, editor, and dashboard

Dashboard System

• New dashboard layout with sidebar navigation
• Overview page with project statistics
• Projects page with project cards, search, and sorting
• Settings page aligned with editor settings

Project Management

• View all cloud-saved projects in a grid layout
• Rename, duplicate, and delete projects from the dashboard
• Click any project card to open it directly in the editor
• Project titles are now editable directly in the editor header
• Title changes are automatically saved to the database

Editor Enhancements

• Settings button added to the footer for quick access to editor settings
• Project title displays correctly when opening from the Projects page
• Settings are synchronized between the dashboard and editor workspace

Infrastructure

• ProtectedRoute component for authenticated routes
• DashboardLayout component with a responsive sidebar
• getProjectById service function for fetching individual projects
• Removed auto project creation on first login

---

🔧 Technical Changes

• Added react-router-dom for client-side routing
• Wrapped the app with BrowserRouter in main.tsx
• Settings page now uses the same localStorage keys as the editor (ice-editor, ice-cdn)
• Navigation state is used to pass project data between pages

Full Changelog: v2.5.0...v3.0.0

v2.5.0 – Cloud Sync & Project Dashboard

Overview

This release introduces Firebase Authentication and Cloud Project Storage, allowing users to save their projects to the cloud and access them from any device. A brand-new Dashboard provides full project management capabilities.

---

New Features

Cloud Authentication

• GitHub OAuth Login – Sign in with your GitHub account via a sleek button in the header
• Persistent Sessions – Stay logged in across browser sessions
• User Avatar & Display Name – Displays your GitHub profile picture and name when logged in

Firebase Realtime Database Integration

• Cloud Project Storage – Projects are now saved to Firebase Realtime Database
• Auto-Save Guest Work – Local projects are automatically saved to your account upon login
• Cross-Device Sync – Access your projects from any device

Project Dashboard

• Projects Overview – View all saved projects in a clean card-based grid
• Search & Filter – Instantly find projects by title with real-time search
• Sort Options – Sort by newest, oldest, or alphabetically (A–Z)
• Custom Scrollbar – Consistent purple-tinted scrollbar styling

---

Project Management Actions

• Rename Projects – Rename projects via a sleek modal from the kebab menu
• Duplicate Projects – Instantly create a copy with a Copy of prefix
• Delete Projects – Remove projects with a confirmation dialog

---

Project Cards

• Deterministic Gradient Icons – Each project has a unique gradient based on its title
• Kebab Menu – Three-dot menu with Rename, Duplicate, and Delete options
• Click-to-Open – Entire card is clickable to open the editor
• Hover Hints – Subtle “Click to open” indicator on hover

---

Empty State

• Beautiful Illustration – Custom SVG coding illustration with animated decorative dots
• Friendly Messaging – “No projects yet. Start coding!” with a descriptive subtitle
• Prominent CTA – Large gradient button to create your first project

---

Technical Changes

New Files

• src/config/firebase.ts – Firebase initialization with Realtime Database
• src/context/AuthContext.tsx – React context for authentication state
• src/services/projectService.ts – CRUD operations (save, get, delete, rename, duplicate)
• src/components/Dashboard/Dashboard.tsx – Full dashboard component

Modified Files

• src/main.tsx – Wrapped app with AuthProvider
• src/components/Header/Header.tsx – Added auth UI, save button, projects navigation
• src/components/Layout/Layout.tsx – Integrated Dashboard overlay, auto-claim logic
• src/components/MainContent/MainContent.tsx – Added project loading helpers

New Dependencies

• firebase – Firebase SDK for Authentication and Realtime Database

---

Documentation

• docs/FIREBASE_AUTH.md – Complete Firebase & GitHub OAuth setup guide
• docs/DEPLOYMENT.md – Deployment instructions for Vercel
• docs/PROJECT_STRUCTURE.md – Updated project structure documentation
• docs/USER_MANUAL.md – User guide for the application
• docs/COMPONENTS.md – Component documentation

---

Migration Notes

• Firestore → Realtime Database – Backend switched to Realtime Database (no credit card required on free tier)
• Local Storage Migration – Guest work is automatically migrated to the cloud on first login

---

Full Changelog: v2.4.0...v2.5.0

v2.4.0 - Export to Single HTML File & Header Dropdown

Description

Implemented a new "Export as Single HTML" feature, enabling users to download a self-contained file with embedded styles and scripts. To accommodate this, the header "Download" button was refactored into an "Export" dropdown menu offering both ZIP and single-file options.

Changes Made

• Header UI Updates (src/components/Header/Header.tsx):
  • Renamed the "Download" button to "Export" and added a chevron indicator.
  • Implemented a dropdown menu with two distinct options:
    • Download as ZIP: Retained existing functionality for separate files.
    • Export as Single HTML: New feature for self-contained exports.
  • Added visual polish to the dropdown with icons and descriptive subtitles.
  • Implemented state management for dropdown visibility, including click-outside handling.
• Export Logic (src/components/MainContent/MainContent.tsx):
  • Implemented handleExportHTML to generate the combined file.
  • Added logic to inject enabled CDN library tags.
  • Embeds CSS content within <style> tags before the closing </head>.
  • Embeds JS content within <script> tags before the closing </body>.
  • Updated MainContentRef to expose the exportHTML method.
• Layout Integration (src/components/Layout/Layout.tsx):
  • Added a handler to trigger exportHTML() via the MainContent ref.
  • Passed the onExportHTML prop down to the Header component.

How It Works

The export function dynamically constructs a single DOM string by aggregating the current editor states. It places CSS styles into the document head and appends the JavaScript execution block at the end of the body, ensuring a functional standalone file that mirrors the editor's output.

Screenshots

Export Dropdown

Full Changelog: v2.3.0...v2.4.0

v2.3.0 - Interactive Console REPL & Resizable Console

Description

Implemented an interactive Read-Eval-Print Loop (REPL) within the console drawer and added vertical resizing capabilities. This feature allows users to execute JavaScript directly, inspect variables in the live preview, and adjust the console workspace height for better visibility.

Changes Made

• Console Drawer (Resizing):
  • Vertical Resizing: Enabled resizing by dragging the top border of the console drawer.
  • Constraints: Enforced height limits between a minimum of 48px and a maximum of 600px.
  • Smooth Interaction: Implemented a global overlay during drag operations to prevent iframe pointer event interference.
• Console Drawer (REPL):
  • Added a new LogLevel type ("result") to differentiate REPL outputs.
  • Implemented the onExecute prop to handle code submission.
  • Created a terminal-style input field with monospace styling, a > prompt, and Up/Down arrow key history navigation.
  • Added distinct styling for evaluated results (purple/blue).
• Preview Component:
  • Modified to use forwardRef, exposing the iframe element to the parent.
• Main Content:
  • Wired up the preview iframe ref and implemented handleExecuteInIframe.
  • Updated the injected console script to listen for "eval" messages and return results via postMessage.

How It Works

• REPL: Uses a message protocol where the parent sends execution requests to the iframe. The iframe runs the code using eval() and posts the result back to the console log.
• Resizing: A drag handler on the console's top border calculates the new height based on mouse movement. A temporary overlay is applied during the drag to ensure the mouse cursor doesn't get "stuck" over the iframe.

Notes

• Verified console logs and math operations function correctly in the REPL.
• Confirmed command history and error handling.
• Verified resizing respects the 48px/600px limits.
• Confirmed smooth dragging without iframe interference.

Full Changelog: v2.2.0...v2.3.0

v2.2.0 - UI Overhaul: Enhanced Settings Modal & Editor Themes

Description

Enhanced the user interface of the Settings modal to achieve a premium aesthetic and introduced a robust Theme selector for the editor. The update includes custom styling for form controls, improved interactive animations, and six selectable themes that persist across sessions.

Changes Made

• Theme Selection:
  • Added a Theme dropdown to the top of the Editor section with immediate application and session persistence.
  • Supported Themes: VS Code Dark (default), VS Code Light, High Contrast, Dracula (purple accents), Monokai (vibrant colors), and GitHub Dark.
• UI Enhancements:
  • Custom Scrollbar: Implemented a slim 6px scrollbar with a glowing purple gradient on hover.
  • Toggle Switches: Replaced checkboxes with animated iOS-style toggle switches featuring smooth spring curves and active state gradients.
  • Setting Cards: Restructured settings into cards with rounded corners (XL), colored icon badges, and hover lift effects.
  • Custom Dropdown Styling: Enhanced the selector with a custom chevron, purple focus ring, and hover states.

How It Works

• SettingsModal.tsx: Implemented the theme dropdown and defined the EditorTheme type.
• CodeEditor.tsx: Added custom theme definitions for Dracula, Monokai, and GitHub Dark, ensuring proper color schemes are applied.
• MainContent.tsx: Wired the theme prop to the CodeEditor component to handle state changes.

Full Changelog: v2.1.0...v2.2.0