Battleship Game - Frontend Coding Assignment

Assignment Instructions

Design and implement a (partial) Battleship game as a web app.

In Battleship, the computer has positioned five ships of various sizes on a 10x10 board. Each ship must be placed horizontally or vertically, completely on the board, without overlapping another ship. The player cannot see the ship's locations. Each round, the player "fires" at a board position of his choosing. The computer indicates if this was a "hit" or a "miss". When all tiles of a particular ship have been hit, the computer indicates that the entire ship has been sunk. When the player has sunk all of the ships, the game is over.

Obviously this game would be more fun if the player had his own ships and the computer were firing back, but we'll leave that out for simplicity. In other words, we are only implementing the turns for Player 1, not for Player 2.

You may use the provided JSON data (see below) indicating the position of the ships. The game should be responsive and mobile-friendly, so that it may be played on an iPhone 5-sized screen (320x568) up to a desktop browser (approx. 1440x1024).

You need to use React and Typescript for the implementation. You may feel free to use Redux, LESS, or any other library you think is suitable for this project. It's not necessary to save game state or anything like that.

Please share zip archive with us or invite "sergey-fieldmaterials" user on GitHub to private repository with solution. Please don't share publicly solution for this assignment and always fallback to zip archive if you cannot create a private repo on GitHub

Ship layout data:

{
  "shipTypes": {
    "carrier": { "size": 5, "count": 1 },
    "battleship": { "size": 4, "count": 1 },
    "cruiser": { "size": 3, "count": 1 },
    "submarine": { "size": 3, "count": 1 },
    "destroyer": { "size": 2, "count": 1 }
  },
  "layout": [
    {
      "ship": "carrier",
      "positions": [
        [2, 9],
        [3, 9],
        [4, 9],
        [5, 9],
        [6, 9]
      ]
    },
    {
      "ship": "battleship",
      "positions": [
        [5, 2],
        [5, 3],
        [5, 4],
        [5, 5]
      ]
    },
    {
      "ship": "cruiser",
      "positions": [
        [8, 1],
        [8, 2],
        [8, 3]
      ]
    },
    {
      "ship": "submarine",
      "positions": [
        [3, 0],
        [3, 1],
        [3, 2]
      ]
    },
    {
      "ship": "destroyer",
      "positions": [
        [0, 0],
        [1, 0]
      ]
    }
  ]
}

Implementation

Dear [REDACTED] Engineering Team,

I'm pleased to submit my implementation of the Battleship game assignment. While the core requirements have been fully met, I've implemented several architectural improvements and modern React patterns that demonstrate production-ready development practices.

Live Preview

Play the game here →

🎯 Core Requirements Completed

✅ Functional Battleship Game: 10x10 board with ship firing mechanics
✅ React + TypeScript: Full type safety throughout the application
✅ Responsive Design: Mobile-first approach (iPhone 5 to desktop)
✅ Ship Status Tracking: Visual fleet status with hit/sunk indicators
✅ Game Completion: Victory detection and user feedback
✅ Provided Ship Data: Implemented exactly as specified

🚀 Architectural Enhancements

State Management with Zustand

• Zero prop drilling: Components access state directly
• Optimized re-renders: Only components using changed data re-render
• Centralized logic: All game logic in a single store
• Type-safe selectors: Full TypeScript support

Error Boundary Implementation

• Graceful degradation: App doesn't crash on unexpected errors
• User-friendly fallbacks: Custom error UI with recovery options
• Production ready: Proper error logging infrastructure

Developer Experience

• Internationalization: i18next integration for multi-language support
• Design System: Reusable components with typed variants (CVA)
• Code Quality: ESLint + Prettier + strict TypeScript configuration
• Performance: Memoized calculations and efficient re-rendering

Project Structure

src/
├── components/
│   ├── Board.tsx             # Game board (uses Zustand store)
│   ├── ErrorContainer.tsx    # Error fallback UI
│   ├── Header.tsx            # Header component
│   ├── ShipStatus.cva.ts     # Styled variants for ship status
│   ├── ShipStatus.tsx        # Fleet status display
│   └── SuccessMessage.tsx    # Victory message
├── store/
│   └── gameStore.ts          # Zustand state management
├── utils/
│   └── gameUtils.ts          # Game logic calculations
├── locales/                  # i18n translations
├── design-system/            # Reusable UI components
├── types/                    # TypeScript definitions
└── data/                     # Ship configuration

Setup Instructions

yarn install
yarn dev

Open http://localhost:3000 to play the game.

Technologies Used

• React + TypeScript - Type-safe UI development
• Zustand - Lightweight state management
• Tailwind CSS - Utility-first styling
• Vite - Fast build tool
• React i18next - Internationalization framework
• React Error Boundary - Error handling
• Class Variance Authority - Type-safe component variants

Architecture Philosophy

This implementation demonstrates production-ready patterns: clean separation of concerns, optimized performance, and scalable foundation for future features like multiplayer or persistence.

Thank you for considering my solution. I'm excited to discuss the technical decisions and how this architecture supports both current requirements and future development.