135 أسطر
3.1 KiB
Markdown
135 أسطر
3.1 KiB
Markdown
# 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. |