DEAMON - Descendant Equipment And Module Organizer Nexus

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

Overview

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.

Features

Adding Modules

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.

Arranging Modules

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

Editing Module Details

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.

Exporting and Importing Configurations

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!

Setup

To run the application locally:

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

Project Structure

Project Structure

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.

API Integration

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.

Local API (for Caching)

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

Contributing

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