ScanDrone/README.md

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)
• Bun or npm package manager

Installation

1. Clone the repository:

   git clone <repository-url>
   cd drone-build-showcase-complete
   

2. Install dependencies:

   bun install
   # or
   npm install
   

Development

Start the development server:

bun run dev
# or
npm run dev

The site will be available at http://localhost:8080

Building for Production

bun run build
# or
npm run build

Preview Production Build

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:

   bun run start
   # or
   npm start
   

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

This project includes Docker configuration files for easy deployment:

1. Build and run the application using Docker Compose:

   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.