|
| 1 | +# Complete Setup Guide |
| 2 | + |
| 3 | +## Prerequisites |
| 4 | +Before setting up this project, ensure you have the following installed: |
| 5 | +- **Node.js** (v18+) |
| 6 | +- **Python** (v3.10+) |
| 7 | +- **pip** (Python package installer) |
| 8 | +- **npm** or **yarn** |
| 9 | + |
| 10 | +## Backend Setup |
| 11 | + |
| 12 | +### 1. Navigate to Backend Directory |
| 13 | +```bash |
| 14 | +cd backend |
| 15 | +``` |
| 16 | + |
| 17 | +### 2. Create Virtual Environment |
| 18 | +```bash |
| 19 | +python -m venv venv |
| 20 | +source venv/bin/activate # On Windows: venv\Scripts\activate |
| 21 | +``` |
| 22 | + |
| 23 | +### 3. Install Dependencies |
| 24 | +```bash |
| 25 | +pip install -r requirements.txt |
| 26 | +``` |
| 27 | + |
| 28 | +### 4. Start Backend Server |
| 29 | +```bash |
| 30 | +uvicorn main:app --reload --host 0.0.0.0 --port 8000 |
| 31 | +``` |
| 32 | + |
| 33 | +The backend will be available at `http://localhost:8000` |
| 34 | + |
| 35 | +## Frontend Setup |
| 36 | + |
| 37 | +### 1. Navigate to Frontend Directory |
| 38 | +```bash |
| 39 | +cd frontend |
| 40 | +``` |
| 41 | + |
| 42 | +### 2. Install Dependencies |
| 43 | +```bash |
| 44 | +npm install |
| 45 | +# or |
| 46 | +yarn install |
| 47 | +``` |
| 48 | + |
| 49 | +### 3. Start Development Server |
| 50 | +```bash |
| 51 | +npm run dev |
| 52 | +# or |
| 53 | +yarn dev |
| 54 | +``` |
| 55 | + |
| 56 | +The frontend will be available at `http://localhost:3000` |
| 57 | + |
| 58 | +## Using 3D Visualizations |
| 59 | + |
| 60 | +The platform now includes two advanced 3D visualization components: |
| 61 | + |
| 62 | +### ThreatGlobe3D |
| 63 | +Visualizes global threat distribution on an interactive 3D globe. |
| 64 | + |
| 65 | +```tsx |
| 66 | +import ThreatGlobe3D from '@/components/ThreatGlobe3D'; |
| 67 | + |
| 68 | +const threats = [ |
| 69 | + { id: 1, position: [1, 0, 0], severity: 'high', type: 'malware' }, |
| 70 | + { id: 2, position: [0, 1, 0], severity: 'critical', type: 'ddos' }, |
| 71 | +]; |
| 72 | + |
| 73 | +<ThreatGlobe3D threats={threats} /> |
| 74 | +``` |
| 75 | + |
| 76 | +### NetworkGraph3D |
| 77 | +Shows network topology with 3D interactive nodes and connections. |
| 78 | + |
| 79 | +```tsx |
| 80 | +import NetworkGraph3D from '@/components/NetworkGraph3D'; |
| 81 | + |
| 82 | +const nodes = [ |
| 83 | + { id: 'server1', label: 'Main Server', position: [0, 0, 0], type: 'server' }, |
| 84 | + { id: 'client1', label: 'Client', position: [2, 1, 0], type: 'client' }, |
| 85 | +]; |
| 86 | + |
| 87 | +const edges = [ |
| 88 | + { source: 'server1', target: 'client1', strength: 0.8 }, |
| 89 | +]; |
| 90 | + |
| 91 | +<NetworkGraph3D nodes={nodes} edges={edges} /> |
| 92 | +``` |
| 93 | + |
| 94 | +## Environment Variables |
| 95 | + |
| 96 | +Create a `.env` file in the backend directory: |
| 97 | +``` |
| 98 | +DATABASE_URL=sqlite:///./security.db |
| 99 | +SECRET_KEY=your-secret-key-here |
| 100 | +ALGORITHM=HS256 |
| 101 | +``` |
| 102 | + |
| 103 | +Create a `.env.local` file in the frontend directory: |
| 104 | +``` |
| 105 | +NEXT_PUBLIC_API_URL=http://localhost:8000 |
| 106 | +``` |
| 107 | + |
| 108 | +## Troubleshooting |
| 109 | + |
| 110 | +### Backend Issues |
| 111 | +- **Port Already in Use**: Change the port in the uvicorn command |
| 112 | +- **Module Not Found**: Ensure all dependencies are installed and venv is activated |
| 113 | + |
| 114 | +### Frontend Issues |
| 115 | +- **3D Components Not Rendering**: Ensure Three.js dependencies are installed |
| 116 | +- **API Connection Failed**: Check backend is running and CORS is configured |
| 117 | + |
| 118 | +## Production Deployment |
| 119 | + |
| 120 | +### Backend |
| 121 | +```bash |
| 122 | +uvicorn main:app --host 0.0.0.0 --port 8000 |
| 123 | +``` |
| 124 | + |
| 125 | +### Frontend |
| 126 | +```bash |
| 127 | +npm run build |
| 128 | +npm start |
| 129 | +``` |
| 130 | + |
| 131 | +## Docker Setup (Optional) |
| 132 | + |
| 133 | +Build and run with Docker Compose: |
| 134 | +```bash |
| 135 | +docker-compose up --build |
| 136 | +``` |
| 137 | + |
| 138 | +## Support |
| 139 | + |
| 140 | +For issues and questions, please open an issue on GitHub. |
0 commit comments