# Drone Build Showcase Website

A modern, responsive website for showcasing drone builds and services, built with React, TypeScript, and Vite.

## Features

- Responsive design with dark/light theme toggle
- Internationalization support (English and Arabic)
- 3D model showcase with carousel
- Contact form with backend integration
- Modern UI components using shadcn/ui

## Tech Stack

- **Frontend**: React 18, TypeScript, Vite
- **Styling**: Tailwind CSS, shadcn/ui
- **Internationalization**: i18next
- **Backend**: Node.js with Express and Nodemailer for contact form handling

## Getting Started

### Prerequisites

- Node.js (version 16 or higher)
- npm package manager

### Installation

1. Clone the repository:
   ```bash
   git clone <repository-url>
   cd drone-build-showcase-complete
   ```

2. Install dependencies:
   ```bash
   npm install
   ```

### Development

To run the application without Docker:

1. Start the frontend development server:
   ```bash
   npm run dev
   ```

2. In a separate terminal, start the backend server:
   ```bash
   npm start
   ```

The site will be available at http://localhost:8080
The backend API will be available at http://localhost:3001

### Building for Production

```bash
bun run build
# or
npm run build
```

### Preview Production Build

```bash
bun run preview
# or
npm run preview
```

## Backend Setup (Contact Form)

To enable the contact form functionality:

1. Configure Gmail SMTP credentials in `.env` file
2. Run the Node.js server:
   ```bash
   npm start
   ```

The backend will be available at http://localhost:3001 and will automatically proxy API requests from the frontend development server.

### Gmail SMTP Configuration

To configure Gmail for sending emails:

1. Enable 2-factor authentication on your Gmail account
2. Generate an App Password for the Gmail account
3. Update the `.env` file with your credentials:
   ```
   EMAIL_USER=scandrone308@gmail.com
   EMAIL_PASS=your-app-password
   ```

## Project Structure

```
src/
├── components/     # React components
├── hooks/          # Custom React hooks
├── i18n/           # Internationalization files
├── integrations/   # External service integrations
├── lib/            # Utility functions
├── pages/          # Page components
└── assets/         # Static assets
```

## Environment Variables

Create a `.env` file in the root directory with necessary environment variables.

## Deployment with Docker (Optional)

This project includes Docker configuration files for containerized deployment. This is optional and the application can run perfectly without Docker.

If you choose to use Docker:

1. Build and run the application using Docker Compose:
   ```bash
   docker-compose up --build
   ```

2. The frontend will be available at http://localhost:80
3. The backend API will be available at http://localhost:3001

The Docker setup includes:
- A frontend service running Nginx to serve the React application
- A backend service running Node.js Express server
- Proper networking between services

## License

This project is proprietary and confidential.