This is a sandbox application built with React for managing and interacting with modular components.

The Sandbox allows users to:

• Add modules from a predefined list.
• Arrange modules in a 12-slot grid.
• Modify module properties such as level and slot.
• Export and import module configurations.

Modules can be added to the sandbox by searching and selecting from a predefined list. Each module has properties such as name, image, and stats associated with it.

Modules can be arranged within a 12-slot grid. Users can drag and drop modules to different slots.

Users can click on a module to view and edit its details in a modal. Details that can be edited include the module's level and other configurable properties.

The application supports creating complex module, weapon, and descendant configurations, and allows users to easily store them server-side and provides a short link for convenient sharing!

To run the application locally:

1. Clone this repository.
2. Install dependencies using npm install.
3. Start the development server with npm start.

The project is structured as follows:

• src/

  • App.css: CSS styles for the main App component.
  • App.js: Main component handling the application routing and layout.
  • App.test.js: Test file for the App component.
  • LandingPage.js: Component for the landing page of the application.
  • index.css: Global styles for the application.
  • index.js: Entry point of the application.
  • reportWebVitals.js: Utility for reporting web vitals.
  • server_example.js: Example server script for reference.
  • setupTests.js: Setup file for Jest tests.

• src/components/

  • DraggableBox.js: Component representing draggable modules.
  • GridSlot.js: Component representing slots in the grid where modules can be placed.
  • Header.css: CSS styles for the header component.
  • Header.js: Component for the application header.
  • Layout.css: CSS styles for the application layout.
  • Layout.js: Component defining the main layout structure of the application.
  • Modal.css: CSS styles for the modal component.
  • Modal.js: Component for displaying a modal to edit module details.
  • ModuleDisplay.css: CSS styles for displaying modules.
  • ModuleDisplay.js: Component for displaying module details.
  • ModuleGrid.css: CSS styles for the module grid component.
  • ModuleGrid.js: Component for displaying a grid of modules.
  • Search.js: Component for searching and adding modules.

• src/pages/

  • Sandbox.css: CSS styles specific to the Sandbox page.
  • Sandbox.js: Main component (Sandbox) where the main logic and state management of the application reside.
  • User.css: CSS styles specific to the User page.
  • User.js: Component for the User page.
  • Zones.css: CSS styles specific to the Zones page.
  • Zones.js: Component for the Zones page.
  • dev.css: CSS styles for development purposes.
  • dev.js: Development related component.

• src/util/

  • api.js: Utility functions for API interactions.
  • db.js: Database utility functions.
  • helpers.js: Additional helper functions.

The application integrates with an external API to fetch module data. To run the application yourself, you need to provide your own Nexon API key by defining it as the REACT_APP_API_KEY environment variable.

To avoid excessive requests to Nexon's API, module data is cached locally using a server (server.js) with Node.js.

Contributions are welcome! If you find any issues or have suggestions for improvements, please submit an issue or a pull request.