Polygon Drawing App

A React-based application for drawing, saving, and managing polygons on a canvas. Built with Vite for fast development and Ant Design for UI components.

---

Features

• Canvas Drawing: Click on the canvas to create points and draw polygons.
• Polygon Management: Save polygons with a name, view a list of saved polygons, and delete them.
• Responsive Design: The app layout adjusts to different screen sizes.
• API Integration: Interacts with a backend API for saving and retrieving polygons.

---

Tech Stack

• Frontend: React, React Konva, Ant Design
• State Management: React Hooks
• HTTP Client: Axios
• Build Tool: Vite
• Linting & Formatting: ESLint, Prettier

---

Project Structure

├── public/                 # Static assets
├── src/                    # Source code
│   ├── api/              # API interaction logic
│   ├── components/       # React components
│   ├── utils/            # Utility functions
│   ├── App.jsx           # Main app component
│   ├── main.jsx          # Entry point
│   └── index.css         # Global styles
├── .gitignore            # Git ignore rules
├── .prettierrc           # Prettier configuration
├── eslint.config.js      # ESLint configuration
├── vite.config.js        # Vite configuration
├── package.json          # Project dependencies and scripts
└── README.md             # Project documentation

---

Installation

1. Clone the repository:

   git clone https://github.com/harut0111/react-polygons.git
   cd react-polygons

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. Open the app:

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

---

Available Scripts

• npm run dev
  Start the development server.

• npm run build
  Build the app for production.

• npm run preview
  Preview the production build.

• npm run lint
  Run ESLint to check for code issues.

• npm run lint:fix
  Automatically fix linting issues.

• npm run format
  Format code using Prettier.

---

API Endpoints

The app interacts with the following API endpoints:

• GET /api/polygons
  Fetch all saved polygons.

• POST /api/polygons
  Save a new polygon.

• DELETE /api/polygons/:id
  Delete a polygon by ID.