OpenHands/OpenHands is the frontend application for the OpenHands AI agent platform, known as Agent Canvas. It is a React single-page application (SPA) built with Vite, TypeScript, Tailwind CSS, and React Router. The application provides a comprehensive user interface for interacting with AI coding agents (OpenHands, Claude Code, Codex, Gemini, or any ACP-compatible agent) via an agent server. It supports multiple backends (local self-hosted, cloud at app.all-hands.dev) with a backend registry that routes API calls accordingly. The UI includes a chat interface with real-time WebSocket event streaming, a conversation panel for managing multiple sessions, a file explorer with Monaco editor, terminal emulator, browser snapshot view, git integration (commits, diff viewer, push/pull), settings for LLM profiles, MCP servers, secrets, skills/plugins, and an automation dashboard for scheduled or event-driven agent runs. The application is also published as an npm package (@openhands/agent-canvas) for embedding in other applications, and supports Electron desktop builds. The architecture follows a modern React pattern with Zustand for client-side state management (conversations, events, UI preferences), TanStack React Query for server-state caching and synchronization, and react-i18next for internationalization. The backend abstraction layer is a key architectural feature: every service (settings, profiles, git, secrets, automations, etc.) branches on the active backend kind (local vs cloud) and delegates to either a direct SDK client (@openhands/typescript-client) or a cloud proxy (callCloudProxy). This dual-transport pattern is enforced by guard tests that prevent ad-hoc HTTP calls outside vetted files. The application also includes a manifest system for declarative automation setup, a tool visualizer registry for rendering agent tool calls (bash, file editor, search, task), and extensive mock infrastructure (MSW) for development and testing. Key entry points include the root layout (src/routes/root-layout.tsx) which provides the main shell with sidebar, command menu, and onboarding; the conversation main view (src/components/features/conversation/conversation-main/conversation-main.tsx) with resizable panels for chat and tabs; the settings pages (src/routes/settings.tsx) with schema-driven forms; and the automation dashboard (src/routes/automations-list.tsx). External dependencies include the agent server REST API, cloud proxy endpoints, @openhands/typescript-client SDK, @openhands/extensions for automation catalogs, and various UI libraries (HeroUI, framer-motion, xterm.js, Monaco editor). The codebase is actively maintained with over 84k stars, frequent commits, and a large test suite (Vitest unit tests, Playwright E2E tests, Stryker mutation testing).
This repository is a community-driven web application that aggregates and displays developer conferences worldwide, with a strong focus on Call for Papers (CFP) deadlines. The core data is maintained in markdown files (README.md for current year, archives/ for past years) and enriched with CSV metadata (attendee counts, talk durations, AI-generated tags). A React single-page application (Vite, React Router, Leaflet) provides multiple views: calendar, list, map, CFP deadline tracker, and a CFP companion for speaker status tracking. The frontend features i18n (5 languages), theme toggle, favorites, offline support via service worker, and a sophisticated filtering system with include/exclude modes and URL-driven state. The backend consists of Node.js scripts that parse markdown, generate JSON feeds, ICS calendars, RSS, geocode locations, and validate data. AI integration (OVHcloud AI Endpoints) generates tags and attendee estimates. The project is actively maintained with extensive CI/CD (GitHub Actions for validation, geocoding checks, tag generation, security scanning) and includes unit tests (Vitest), E2E tests (Playwright), and BDD specs (Cucumber). While primarily an application, it has a significant data pipeline component, making it a hybrid project. The codebase is well-structured with reusable components like FilterMultiSelect and custom hooks, though some duplication exists in event forms and the markdown data format is fragile.
drawDB is a free, open-source, client-side web application for designing relational database schemas and generating SQL. It provides an interactive ER diagram editor with support for multiple database dialects (MySQL, PostgreSQL, SQLite, MariaDB, MSSQL, Oracle), import/export in SQL, DBML, JSON, Mermaid, and Markdown, and features like auto-arrange, auto-connect foreign keys, schema validation, migration generation, and versioning via GitHub Gists. The architecture is a React single-page application (Vite + Tailwind CSS + Semi UI) with state managed through custom React Contexts and hooks, persistence via IndexedDB (Dexie), and an optional cloud backend through an extension system. It is primarily an application, with no data research or ML components.
Twake Drive is a full-featured file management web application built on the Cozy platform. It provides a React-based single-page application for browsing, uploading, downloading, sharing, and editing files. Key features include shared drives, real-time collaborative whiteboarding with Excalidraw, document editing via OnlyOffice, PDF annotation, file versioning, a file picker service for external app integration, and comprehensive sharing capabilities (by link, by email, with permissions). The application communicates with a Cozy Stack backend via the cozy-client library and supports multi-instance sharing between Cozy users. Architecture is a frontend SPA with React, Redux for upload state, and numerous React context providers for sharing, selection, clipboard, and view settings. External dependencies include cozy-ui, cozy-sharing, twake-i18n, and cozy-flags. The codebase is well-structured with modular components, extensive unit and E2E tests, and demonstrates high craftsmanship in areas such as conflict resolution, virtualized file lists, and real-time collaboration.
This repository is a comprehensive frontend visual effects collection and demonstration platform. It contains over 100 self-contained demos and tools covering CSS animations, Canvas 2D/WebGL effects, Three.js 3D scenes, ECharts data visualizations, AI/ML integrations (TensorFlow.js for pose detection and body segmentation, MediaPipe, Tesseract.js OCR), and client-side media processing (image, video, PDF). The architecture is a React 18 single-page application (SPA) using TypeScript, Webpack 5, Ant Design, and react-intl for internationalization. All processing occurs entirely in the browser; there is no backend or persistent data store. The project serves as both a personal portfolio and a learning resource for advanced frontend techniques, but it is not a single-purpose production application. The code quality varies widely: some components demonstrate high craftsmanship (e.g., custom PNG encoder, image manipulation utilities, cross-page communication hook), while many others are boilerplate-heavy duplicates or exploratory demos. No automated tests are present, and the build output includes large minified chunks alongside source code, creating maintenance overhead.