You are an expert web developer tasked with creating a Single Page Application (SPA) for a no-code game development platform. The application should be built using modern web technologies, focusing on a user-friendly interface for creating 2D and 3D games without traditional coding.
**Project Goal:** Develop a functional SPA that allows users to visually design game levels, add objects, define basic interactions using a visual scripting system, and preview their creations.
**Core Technologies:**
- **Frontend Framework:** React (with Vite for fast development)
- **State Management:** Zustand or Jotai (for simplicity and performance)
- **UI Library:** Tailwind CSS (for rapid styling) and potentially a component library like Shadcn/ui or Headless UI.
- **3D Rendering (if applicable):** Three.js (integrated for 3D scenes)
- **2D Rendering:** HTML5 Canvas API or a library like PixiJS.
- **Visual Scripting:** Develop a simplified, custom visual node-based editor. This will be the most complex part. Start with a basic implementation that allows connecting nodes representing events (e.g., 'On Click') to actions (e.g., 'Move Object', 'Play Sound').
**Key Features for MVP:**
1. **Scene Editor:** A primary canvas area where users can add, position, rotate, and scale game objects (both 2D sprites and simple 3D models).
* Object manipulation tools (select, move, rotate, scale).
* Ability to import or select from a predefined asset library.
2. **Asset Library Panel:** A sidebar displaying available 2D sprites and basic 3D models that users can drag onto the scene.
3. **Properties Panel:** When an object is selected, this panel displays its properties (position, rotation, scale, material for 3D) and allows editing.
4. **Visual Scripting Interface:** A separate view or modal where users can create logic flows.
* Node-based system: Users drag nodes onto a canvas and connect them.
* Basic node types: Event nodes (e.g., 'Start', 'On Collision'), Action nodes (e.g., 'Move', 'Rotate', 'Scale', 'Play Animation', 'Set Property'), Logic nodes (e.g., 'Sequence', 'If/Else').
* Link nodes to define the execution flow.
5. **Game Preview:** A button to instantly preview the game within the application, simulating the defined logic.
**Technical Implementation Details:**
- **Project Structure:** Organize the project logically (e.g., `src/components`, `src/scenes`, `src/scripts`, `src/state`, `src/utils`).
- **State Management:** Manage the overall application state (current scene, selected object, visual script graph) efficiently.
- **Rendering:** Abstract the rendering logic (2D/3D) so it can be managed separately. Use appropriate hooks for managing Three.js or PixiJS instances.
- **Visual Scripting Editor:** This requires a robust implementation. For MVP, focus on the core node connection and execution logic. Consider libraries like `react-flow` as a potential starting point or inspiration, but aim for a custom solution for tighter integration. The execution engine for the visual scripts needs to be defined.
- **Asset Handling:** Implement a way to load and manage assets. For MVP, use placeholder assets or simple data structures.
**Instructions:**
1. Set up the basic React project structure using Vite.
2. Implement the main layout of the SPA, including the scene canvas, asset library sidebar, properties panel, and a toolbar.
3. Develop the core functionality for adding and manipulating objects on the scene (initially, maybe just placeholders or basic shapes).
4. Integrate a simple visual scripting component. This can be a very basic representation for now (e.g., just drawing nodes and connections). The logic execution can be simulated initially.
5. Implement the game preview functionality to show the current state of the scene.
6. Use Tailwind CSS for styling throughout. Ensure the UI is clean and intuitive.
7. Focus on creating a modular and extensible codebase.
**Deliverables:**
A functional SPA codebase that demonstrates the core features outlined above. Provide clear instructions on how to run the project locally. Focus on the frontend implementation of the editor and visual scripting interface.