DroneDT

<div align="center"> <!-- ANIMATED HEADER --> <img src="https://capsule-render.vercel.app/api?type=waving&color=0:0d47a1,100:2196f3&height=200&section=header&text=DroneDT&fontSize=80&fontColor=ffffff&fontAlignY=38&desc=Industrial%20Drone%20E-Commerce%20Platform%20%7C%20Colombia&descAlignY=58&descSize=18&animation=fadeIn" width="100%"/> <br/> <!-- BADGES -->

<br/>

<br/>

A high-performance MERN stack e-commerce platform for industrial drone manufacturing in Colombia. Tesla-inspired UI · Secure multi-panel architecture · Fully containerized · AWS-ready.

<br/> <!-- QUICK NAVIGATION -->

🚀 Quick Start · 🏗️ Architecture · 📦 Modules · 🛠️ Tech Stack · 🐳 Docker · ☁️ Deploy · 🤝 Contributing

</div>

---

<!-- ANIMATED DEMO GIF PLACEHOLDER --> <div align="center"> <img src="https://readme-typing-svg.demolab.com?font=Fira+Code&size=22&duration=3000&pause=800&color=2196F3&center=true&vCenter=true&multiline=true&width=700&height=80&lines=MERN+Stack+%7C+Next.js+15+%7C+TypeScript;Tesla-Inspired+UI+%7C+Docker+%7C+AWS-Ready;Industrial+Drones+%7C+Colombia+%F0%9F%87%A8%F0%9F%87%B4" alt="Typing SVG"/> </div>

---

📋 Table of Contents

• Overview
• Key Features
• Architecture
• Modules
• Tech Stack
• Quick Start
• Docker Setup
• Environment Variables
• Project Structure
• API Reference
• Deployment
• Roadmap
• Contributing
• License

---

🌐 Overview

DroneDT is a full-stack monorepo e-commerce platform purpose-built for the industrial drone manufacturing market in Colombia. Inspired by Tesla's website design philosophy — immersive visuals, product configurators, and zero-friction UX — it combines a public storefront, a customer dashboard, and an employee admin panel into one cohesive system.

┌─────────────────────────────────────────────────────────┐
│                        DroneDT                          │
│                                                         │
│  🛒 Public Shop   👤 Client Panel   🛠️ Employee Panel   │
│        ↕                 ↕                  ↕           │
│              ⚡ Express REST API (back/)                 │
│                          ↕                              │
│        🍃 MongoDB Atlas    +    🗄️ PostgreSQL (SQL)      │
│                          ↕                              │
│              ☁️ AWS S3 · EC2 · CloudFront                │
└─────────────────────────────────────────────────────────┘

---

✨ Key Features

<table> <tr> <td width="50%">

🛒 E-Commerce Shop

• Product configurator (drone specs, add-ons)
• Cart management & checkout flow
• Appointment & service scheduling
• 4K video hero sections
• SEO-optimized with Next.js 15 App Router

</td> <td width="50%">

🛠️ Admin / Employee Panel

• Real-time inventory management (CRUD)
• Sales analytics with charts
• User & role management
• Appointment tracking
• AI bot integration (planned)

</td> </tr> <tr> <td width="50%">

👤 Client Dashboard

• Order tracking & history
• Profile management
• Support chat / FAQ
• Personalized recommendations

</td> <td width="50%">

🔒 Security & Scalability

• JWT authentication with refresh tokens
• Input validation via Zod
• Hybrid DB: MongoDB Atlas + PostgreSQL
• Role-based access control (RBAC)
• Docker-first local development

</td> </tr> </table>

---

🏗️ Architecture

drone-dt/                         ← Monorepo root
├── front/                        ← Public Shop  (Next.js 15 + Tailwind)
├── back/                         ← REST API     (Express + TypeScript)
├── panel-cliente/                ← Client Panel (Next.js + Auth)
├── panel-empleados/              ← Admin Panel  (Next.js + RBAC)
├── shared/                       ← Shared types & utils (TypeScript)
├── docker-compose.yml            ← Full local orchestration
└── package.json                  ← Workspace config

Data Flow

Browser → Next.js (SSR/SSG) → Express API → MongoDB Atlas / PostgreSQL
                                         ↘ AWS S3 (media storage)
                                         ↘ AI Bot API (planned)

---

📦 Modules

1. front/ — Public E-Commerce Shop

Tesla-inspired storefront — minimalist, fast, immersive.

| Route | Description | |---|---| | / | Home: hero, drone models, CTAs | | /shop/drones | Interactive drone catalog | | /shop/accesorios | Accessories listing | | /shop/servicios | Service packages | | /about | Brand story | | /contact | Contact form | | /legal/privacidad | Privacy policy | | /legal/terminos | Terms of service |

Key components:

• Header.tsx — Fixed navbar, responsive hamburger menu
• Footer.tsx — Links to shop, support, legal
• sections/Hero.tsx — Full-screen 4K drone video
• sections/FeaturesDrones.tsx — Animated product cards

---

2. back/ — REST API Engine

Scalable Node.js + Express API with dual-database architecture.

| Method | Endpoint | Description | Auth | |---|---|---|---| | POST | /api/users/register | Register new user | ❌ | | POST | /api/users/login | Login, returns JWT | ❌ | | GET | /api/drones | List all drones | ❌ | | GET | /api/drones/:id | Drone detail | ❌ | | POST | /api/drones | Create drone | 🔒 Admin | | PUT | /api/drones/:id | Update drone | 🔒 Admin | | DELETE| /api/drones/:id | Delete drone | 🔒 Admin | | GET | /api/orders | User orders | 🔒 User | | POST | /api/orders | Place order | 🔒 User | | GET | /api/admin/stats | Dashboard metrics | 🔒 Admin |

---

3. panel-cliente/ — Customer Dashboard

Self-service portal for customers post-purchase.

| Route | Description | |---|---| | / | Summary: recent orders, quick actions | | /ordenes | Full order history with filters | | /perfil | Edit profile, preferences | | /soporte | Support chat & FAQ |

---

4. panel-empleados/ — Employee Admin Panel

Internal tool for operations, inventory, and analytics.

| Route | Description | |---|---| | / | KPI Dashboard: daily sales, low stock alerts | | /inventario | Drone & accessory CRUD forms | | /ventas | Sales reports, Chart.js graphs | | /usuarios | Manage customers & employees | | /configuracion | App settings, integrations |

---

5. shared/ — Shared Packages

// shared/types/index.ts
export interface IDrone {
  _id: string;
  name: string;
  price: number;
  specs: DroneSpecs;
  stock: number;
  imageUrl: string;
}

export interface IUser {
  _id: string;
  email: string;
  role: 'client' | 'employee' | 'admin';
  createdAt: Date;
}

export interface IOrder {
  _id: string;
  userId: string;
  items: OrderItem[];
  total: number;
  status: 'pending' | 'confirmed' | 'shipped' | 'delivered';
}

---

🛠️ Tech Stack

<div align="center">

| Layer | Technology | Version | |---|---|---| | Frontend | Next.js + React | 15 / 19 | | Styling | Tailwind CSS | 4.x | | State | Zustand / Redux Toolkit | latest | | Backend | Node.js + Express | 20 / 5 | | Language | TypeScript | 5.x | | NoSQL DB | MongoDB Atlas + Mongoose | 8.x | | SQL DB | PostgreSQL | 16 | | Auth | JWT + bcrypt | — | | Validation | Zod | 3.x | | Media | AWS S3 | — | | Containerization | Docker + Docker Compose | latest | | Deploy (API) | Railway | — | | Deploy (Front) | Vercel | — |

</div>

---

🚀 Quick Start

Prerequisites

Make sure you have the following installed:

[![Git](https://img.shields.io/ba