# interactive_map

Interactive Map, upload a image of a map. Add points to it and draw to it. Have information about the object in a table.

# Flask + React Hello World Application

This is a simple Hello World application that demonstrates how to set up a Flask backend with a React frontend.

## Prerequisites

Before you begin, ensure you have the following installed:
- Python 3.7 or higher
- Node.js and npm (Node Package Manager)
- Git

## Project Structure

```
flask-react-hello/
├── backend/
│   ├── venv/
│   ├── app.py
│   └── requirements.txt
└── frontend/
    ├── node_modules/
    ├── public/
    ├── src/
    └── package.json
```

## Setting Up the Backend (Flask)

1. Create and activate a virtual environment:
   ```bash
   # Windows
   cd backend
   python -m venv venv
   .\venv\Scripts\activate

   # macOS/Linux
   cd backend
   python -m venv venv
   source venv/bin/activate
   ```

   > **Note**: A virtual environment (venv) is a tool that helps you create an isolated environment for Python projects. This means each project can have its own dependencies, regardless of what dependencies every other project has.

2. Install the required dependencies:
   ```bash
   pip install -r requirements.txt
   ```

   > **Note**: requirements.txt contains all the Python packages needed for the backend. If you're setting up the project for the first time, you can create this file using `pip freeze > requirements.txt` after installing the dependencies.

3. Start the Flask server:
   ```bash
   python app.py
   ```

   The backend will be available at `http://localhost:5000`

## Setting Up the Frontend (React)

1. Install dependencies:
   ```bash
   cd frontend
   npm install
   ```

   > **Note**: This will install all dependencies listed in package.json. The node_modules/ directory will be created containing all required packages.

2. Start the React development server:
   ```bash
   npm start
   ```

   The frontend will be available at `http://localhost:3000`

## Running the Complete Application

1. Start the backend server (in one terminal):
   ```bash
   cd backend
   # Windows
   .\venv\Scripts\activate
   # macOS/Linux
   source venv/bin/activate
   python app.py
   ```

2. Start the frontend development server (in another terminal):
   ```bash
   cd frontend
   npm start
   ```

3. Visit `http://localhost:3000` in your browser to see the application running.

## Common Issues and Solutions

### Backend Issues

- **Missing requirements.txt**: If the file is missing, you can recreate it:
  ```bash
  pip freeze > requirements.txt
  ```

- **Port already in use**: If port 5000 is busy, modify the port in `app.py`:
  ```python
  if __name__ == '__main__':
      app.run(debug=True, port=5001)  # Change to any available port
  ```

### Frontend Issues

- **Node modules missing**: If node_modules is missing or corrupted:
  ```bash
  rm -rf node_modules  # Delete existing node_modules
  npm install         # Reinstall dependencies
  ```

- **Port conflict**: If port 3000 is in use, React will automatically suggest using a different port.

## Development Notes

- The backend uses Flask-CORS to handle Cross-Origin Resource Sharing, allowing the frontend to make requests to the backend.
- The frontend uses the Fetch API to make requests to the backend.
- Both servers need to be running simultaneously for the application to work.

## Environment Variables

Create a `.env` file in both the backend and frontend directories if you need to add any environment variables. Remember to never commit these files to version control.

Example backend/.env:
```
FLASK_ENV=development
DEBUG=True
```

Example frontend/.env:
```
REACT_APP_API_URL=http://localhost:5000
```