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:

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

2. Install dependencies:

   npm install
   

Development

To run the application without Docker:

1. Start the frontend development server:

   npm run dev
   

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

   npm start
   

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

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:

   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:

   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.