BDO Ship Building Tracker 🚢

A lightweight and responsive web application to track your Black Desert Online ship building progress, featuring a clean card-based interface for monitoring ship upgrades and progression.

Features ✨

• Interactive Ship Tree: Visual hierarchy with connecting lines showing ship progression paths
• Clean Card-Based UI: Intuitive interface for tracking ship progression
• Progress Tracking: Monitor completion status with visual indicators and percentage
• Crafting & Processing Support: Track both crafting and processing requirements for ship components
• Goal Setting: Set and track progress towards specific ship goals with the interactive Goal Ship feature, including search and selection
• Material Notes: View important notes and details for each material requirement
• Dark Theme: Eye-friendly dark UI with smooth transitions and hover effects
• Data Persistence: Automatic save to local storage
• Data Portability: Import/Export functionality for your progress
• Fully Responsive: Optimized for all device sizes with adaptive layout
• Visual Feedback: Hover effects, completion badges, and smooth animations

Tech Stack / Built With 🛠️

• React 19 with TypeScript
• Vite for development and building
• CSS Modules for styling
• React Compiler for optimized rendering
• Leader Line for visual connections
• Local Storage API for data persistence

Prerequisites

• Node.js (version 18 or higher)
• npm or yarn package manager
• Modern web browser with JavaScript enabled

Installation 📥

1. Clone the repository:

git clone https://gitlab.com/user4302_Projects/coding/react-js/bdo-shipwright.git
cd bdo-shipwright

2. Install dependencies:

npm install

3. Start development server:

npm run dev

4. Open your browser and navigate to http://localhost:5173

Usage / Quick Start ⚡

The BDO Ship Building Tracker helps you monitor your ship building progress in Black Desert Online:

1. Browse Ships: View all available ships in the main list with completion status
2. Track Progress: Click on any ship to view detailed material requirements
3. Update Materials: Use increment/decrement buttons or manual input to track collected materials
4. Set Goals: Use the star icon to set a target ship for focused progression
5. Processing Details: Click the hammer icon for items that require crafting/processing
6. Save Progress: Your data is automatically saved to local storage
7. Backup Data: Use the menu to export your progress as a JSON file

Project Structure 📂

bdo-shipwright/
├── public/                 # Static assets
├── src/
│   ├── components/         # React components
│   │   ├── ProcessingPopup/
│   │   ├── QuickViewPopup/
│   │   └── ShipList/
│   ├── data/              # Ship data and requirements
│   ├── types/             # TypeScript type definitions
│   ├── App.tsx            # Main application component
│   └── main.tsx           # Application entry point
├── scripts/               # Build and utility scripts
├── package.json           # Dependencies and scripts
├── tsconfig.json          # TypeScript configuration
├── vite.config.ts         # Vite build configuration
└── README.md              # This file

Configuration 🔧

The application uses the following configuration files:

• tsconfig.json: TypeScript compiler settings
• vite.config.ts: Vite development server and build configuration
• eslint.config.js: Code linting rules and formatting

No additional environment variables or API keys are required.

Development / Running Locally 🏗️

# Install dependencies
npm install

# Start development server with hot reload
npm run dev

# Run linting
npm run lint

# Type checking
npm run build

The development server runs on http://localhost:5173 by default with hot module replacement enabled.

Testing 🧪

Currently, this project does not include automated tests. To add testing:

# Install testing dependencies (example)
npm install --save-dev @testing-library/react @testing-library/jest-dom

# Run tests (when configured)
npm test

Building for Production 🏭

# Build optimized production bundle
npm run build

# Preview production build locally
npm run preview

The production build will be generated in the dist/ directory with optimized assets and minified code.

Deployment 🚀

This application can be deployed to any static hosting service:

• Netlify: Drag and drop the dist/ folder or connect Git repository
• Vercel: Connect your GitLab repository for automatic deployments
• GitHub Pages: Use the dist/ folder as the publishing source
• Traditional hosting: Upload the dist/ folder contents to your web server

Contributing 🤝

Contributions are welcome! Please follow these guidelines:

1. Fork the repository
2. Create a feature branch: git checkout -b feature-name
3. Make your changes and ensure code follows the existing style
4. Test your changes thoroughly
5. Submit a merge request

For any questions, bug reports, feature requests, or security concerns, please open an issue on GitLab: https://gitlab.com/user4302_Projects/coding/react-js/bdo-shipwright/-/issues

License 📄

This project is open source and available under the MIT License.

Support & Contact 👋

For any questions, bug reports, feature requests, or security concerns, please open an issue on GitLab: https://gitlab.com/user4302_Projects/coding/react-js/bdo-shipwright/-/issues

No email or direct messaging support is available.

Acknowledgments 🙏

• Black Desert Online community for ship building data and requirements
• React team for the excellent framework and tools
• Vite team for the fast development experience