158 Web Apps and Interactive Pages: Inside My Browser Project Archive

The Web Apps collection contains 158 projects brought together from my local backups. The collection includes browser tools, games, interactive experiments, and substantial study references. Some entries are applications in the usual sense; others are complete reading experiences with navigation, search, or exercises.

Putting them into a visual archive makes that variety easier to explore. Every entry has a desktop landing-page screenshot, a description, and its own project page. The archive also distinguishes a confirmed live site from a project preserved locally.

Start with the Web Apps collection, then pick the kind of interaction you want: make something, play with someone, or study a subject. The collection is broad enough that a useful starting path does more for a new visitor than asking them to inspect all 158 thumbnails.

A Collection Wider Than Utilities

Some projects start with an action. Infinite Whiteboard gives the user a canvas. DUEL ARENA explores a tactical peer-to-peer game. Hollow Vale provides another kind of interactive browser experience. Their landing pages need to communicate what the visitor can do next.

Other projects start with a subject. The archive includes Python field notes on arrays, graphs, linked lists, queues, stacks, trees, and type hints. It also contains language-learning pages, software references, and topic-based reading guides.

These pages have different jobs. A utility should expose its main control quickly. A reference should make a large body of material navigable. A game needs a recognizable entry into play. Seeing them together reveals how much interface design depends on the kind of attention a page asks for.

Infinite Whiteboard: From a Stroke to a Shared Operation

The archive records an Infinite Whiteboard deployment and an archive record. The local implementation uses PeerJS to establish connections and exchanges operations such as add, update, remove, clear, and full synchronization.

Elements have identities. An update can therefore change an existing element instead of transmitting a complete screenshot of the board. A joining participant can receive the current element list, then subsequent operations keep the views aligned.

The host relays incoming operations to other peers in a star topology. That makes the host's connection part of the collaboration architecture. It should not be confused with a durable, independently hosted collaborative document service.

For a practical exploration, create a room, share its code with another browser, draw something, and modify it. Watch how quickly the change appears and what happens when a participant disconnects. The RTCDataChannel reference explains the browser data transport behind this kind of peer communication; connection setup still needs signaling infrastructure.

The engagement goal is shared manipulation of the same canvas. A useful test would ask whether both participants can join, identify the same object, and see each other's changes. That is more concrete than describing the page as immersive solely because it has a canvas.

DUEL ARENA: Connection State Is Part of the Game

DUEL ARENA begins with a call sign and a rival connection. The first challenge is therefore understandable pairing: one player needs to generate a code, the other needs to enter it, and both need to recognize when the connection is ready. The project page preserves the landing interface.

The local game uses PeerJS, with the host advancing the simulation and the guest sending input messages. Input sequence numbers and host acknowledgements help relate a received action to the state update that follows it. Rendering uses requestAnimationFrame, while the host simulation also has an interval-based update path.

That separation matters when a tab is covered or backgrounded. Rendering callbacks can pause, so relying only on the visible paint loop would make simulation behavior depend on whether the host is looking at the window. MDN documents that background-tab behavior.

This architecture still depends on connection quality and the host. It does not establish measured low latency or competitive fairness. A useful play test would examine pairing success, disconnect recovery, and whether movement or shooting feedback becomes confusing under added delay.

Study References Need a Different Kind of Engagement

The Python arrays field notes and English self-study guide ask a visitor to read, locate an explanation, and apply it. Their arrays and English archive pages make them findable alongside the games and utilities.

For an arrays reference, a productive session might mean finding a sliding-window example, understanding why the window moves, and changing the example for another input. For a language guide, it might mean locating a tense pattern and writing a sentence that uses it.

These are suggested exercises, not claims that the pages run an automated grading system. Long-form references can support useful learning without accounts, progress dashboards, or an execution backend. The interface needs to help people locate and revisit material rather than simply keep them scrolling.

A Landing Page as a Record

Each project was captured at 1920 by 1080 pixels, a desktop 16:9 viewport. The images show the top of the page, providing a consistent first view across interfaces with very different lengths and structures.

The screenshots are stored as optimized WebP assets. The archive cards use them as visual entry points, while project detail pages provide the surrounding description and available actions.

A screenshot is a record of an interface, not proof that every feature works or that a service will stay available. It is useful because it lets a visitor recognize a project before opening it, especially when many entries have long or closely related names.

Preserving Local Work Alongside Live Sites

At the archive's October 5, 2026 link check, 134 entries had recorded live websites returning successful HTTP responses. The other 24 were preserved with local landing-page captures and source downloads rather than an assumed deployment.

A successful response is a point-in-time check. It does not establish feature completeness. For the locally preserved entries, the archive keeps the project accessible without describing it as a currently hosted service.

The source bundles exclude repository history, dependencies, editor settings, build caches, and environment files. They preserve the project material needed to inspect the page without carrying every incidental file from a development folder.

The collection also records exclusions so a future import does not restore projects deliberately removed from the archive. That makes the catalog's scope explicit instead of treating the backup directory as the final public list.

How the Archive Becomes a Navigable Interface

The catalog is structured data: project IDs, collection names, titles, descriptions, technology labels, image paths, and available links. React turns those records into archive cards and detail routes. Keeping the identity stable lets a project retain its own URL even when the display order changes.

The same collection feeds the Three.js network. Projects receive deterministic positions within their collection's constellation. Connections link nearby nodes geometrically; those lines are a visual arrangement, not evidence that the applications share dependencies or exchange data.

OrbitControls handles camera interaction, while CSS2DRenderer positions readable HTML labels over the 3D scene. Label visibility is limited to reduce overlap and avoid covering controls. Searching provides a direct route to an entry that may be hard to find visually.

This is a technical response to two different browsing intentions. A person who knows a title can search. A person who is exploring can orbit, select a constellation, and open a preview. Both paths lead to the same project record, which reduces the chance of a decorative network becoming a dead end.

Finding Something in 158 Entries

The Web Apps collection provides browsing and search. Project titles, descriptions, folder names, and technology labels help visitors move beyond a thumbnail grid.

For a more spatial view, the 3D Project Universe includes this collection alongside general projects, mobile apps, experiments, and lab projects. Web entries form one colored constellation, and selecting a node opens a project preview before its detail page.

Both views use the same archive records. A visual network is useful for wandering; a searchable list is useful when someone already knows the subject they want. Neither needs a separate, manually maintained project count.

For this archive, I would assess engagement through findability and successful handoffs: can a visitor locate a relevant project, understand whether it is live, and reach the intended page? Search success, mistaken live-link expectations, and returning to the collection after a detail view would be useful evaluation questions. They are proposed checks rather than recorded analytics.

A Few Places to Begin

Explore Infinite Whiteboard for a canvas-based interface, DUEL ARENA for the tactical game, or Python Arrays and LeetCode Field Notes for a dense study reference. English, from the Ground Up shows how the collection extends beyond programming topics.

For a visual experiment, explore the recorded Hollow Vale deployment and compare its entry screen with the utility and study pages. For a focused media workflow, continue to the Pyvi article. For collaboration around actual study material, read Notes, Colla, and Planny.

The archive makes the full range visible: small tools, playable ideas, long references, and local projects that would otherwise remain hidden in a folder. Each entry keeps its own purpose while contributing to a broader record of browser work.