docker file setup

Author: Drago-03

.dockerignore

@@ -0,0 +1,48 @@
+# Version control
+.git
+.gitignore
+
+# Dependencies
+node_modules
+venv
+__pycache__
+*.pyc
+*.pyo
+*.pyd
+
+# Environment
+.env
+.env.local
+.env.*.local
+
+# Development
+.vscode
+.idea
+*.log
+npm-debug.log*
+
+# Build
+client/build
+client/dist
+
+# Docker
+Dockerfile
+docker-compose.yml
+.dockerignore
+
+# Documentation
+README.md
+*.md
+wiki/
+
+# Test
+coverage/
+.pytest_cache/
+__tests__/
+test/
+tests/
+
+# Misc
+.DS_Store
+*.swp
+*.swo 

Dockerfile

@@ -0,0 +1,25 @@
+# Use Python 3.11 slim image
+FROM python:3.11-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements file
+COPY requirements.txt .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy source code
+COPY . .
+
+# Expose port
+EXPOSE 8000
+
+# Start the application
+CMD ["python", "main.py"] 

client/Dockerfile

@@ -0,0 +1,32 @@
+# Build stage
+FROM node:18-alpine as build
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy source code
+COPY . .
+
+# Build the application
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine
+
+# Copy built assets from build stage
+COPY --from=build /app/build /usr/share/nginx/html
+
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose port 80
+EXPOSE 80
+
+# Start nginx
+CMD ["nginx", "-g", "daemon off;"] 

client/nginx.conf

@@ -0,0 +1,29 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    # Proxy API requests to backend
+    location /api {
+        proxy_pass http://backend:8000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection 'upgrade';
+        proxy_set_header Host $host;
+        proxy_cache_bypass $http_upgrade;
+    }
+
+    # Proxy WebSocket connections
+    location /ws {
+        proxy_pass http://backend:8000;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "Upgrade";
+        proxy_set_header Host $host;
+    }
+} 

client/src/App.css

@@ -1,6 +1,6 @@
 .App {
   min-height: 100vh;
-  background-color: #f5f5f5;
+  background-color: var(--bg-primary);
   display: flex;
   flex-direction: column;
 }
@@ -10,7 +10,7 @@
 }
 
 .App-header {
-  background: linear-gradient(135deg, #1a1a1a 0%, #2c3e50 100%);
+  background: var(--header-bg);
   min-height: 60vh;
   display: flex;
   flex-direction: column;
@@ -27,13 +27,13 @@
 .header-logo img {
   width: 500px;
   height: auto;
-  filter: drop-shadow(0 0 25px rgba(74, 144, 226, 0.4));
+  filter: drop-shadow(0 0 25px var(--shadow-color));
   transition: all 0.5s ease;
 }
 
 .header-logo img:hover {
   transform: scale(1.05);
-  filter: drop-shadow(0 0 40px rgba(74, 144, 226, 0.8));
+  filter: drop-shadow(0 0 40px var(--accent-color));
 }
 
 @keyframes pulse {
@@ -68,18 +68,18 @@
 }
 
 .domain-card {
-  background: white;
+  background: var(--card-bg);
   padding: 2rem;
   border-radius: 8px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 2px 4px var(--shadow-color);
   text-align: center;
   cursor: pointer;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
 
 .domain-card:hover {
   transform: translateY(-5px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 4px 8px var(--shadow-color);
 }
 
 .domain-card .domain-icon {
@@ -88,21 +88,21 @@
 }
 
 .domain-card h2 {
-  color: #2c3e50;
+  color: var(--text-primary);
   margin: 0 0 1rem;
   font-family: 'Montserrat', sans-serif;
 }
 
 .domain-card p {
-  color: #666;
+  color: var(--text-secondary);
   margin: 0;
   line-height: 1.5;
 }
 
 .code-features {
   margin-top: 1.5rem;
   padding-top: 1.5rem;
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--border-color);
 }
 
 .code-features ul {
@@ -115,7 +115,7 @@
 }
 
 .code-features li {
-  color: #4a90e2;
+  color: var(--accent-color);
   font-size: 0.95rem;
   display: flex;
   align-items: center;
@@ -162,4 +162,33 @@
 
 .menu-toggle:hover {
   transform: scale(1.1);
+}
+
+/* Theme toggle button */
+.theme-toggle {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  background: var(--bg-secondary);
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  box-shadow: 0 2px 4px var(--shadow-color);
+  z-index: 1000;
+  transition: all 0.3s ease;
+}
+
+.theme-toggle:hover {
+  transform: scale(1.1);
+}
+
+.theme-toggle svg {
+  width: 20px;
+  height: 20px;
+  color: var(--text-primary);
 } 

client/src/App.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { ThemeProvider, useTheme } from './context/ThemeContext';
 import Navbar from './components/Navbar';
 import Footer from './components/Footer';
 import DomainPage from './pages/DomainPage';
@@ -35,7 +36,24 @@ const domainDisplayNames = {
   ecommerce: 'E-commerce'
 };
 
-function App() {
+const ThemeToggle = () => {
+  const { isDarkMode, toggleTheme } = useTheme();
+  return (
+    <button className="theme-toggle" onClick={toggleTheme}>
+      {isDarkMode ? (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1-8.313-12.454z"/>
+        </svg>
+      ) : (
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/>
+        </svg>
+      )}
+    </button>
+  );
+};
+
+function AppContent() {
   const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
 
   const toggleSideMenu = () => {
@@ -53,6 +71,7 @@ function App() {
             <img src={logo} alt="M.A.D.H.A.V.A. Logo" />
           </div>
         </header>
+        <ThemeToggle />
         <SideMenu isOpen={isSideMenuOpen} onClose={() => setIsSideMenuOpen(false)} />
         <div className="content">
           <Routes>
@@ -102,4 +121,12 @@ function App() {
   );
 }
 
+function App() {
+  return (
+    <ThemeProvider>
+      <AppContent />
+    </ThemeProvider>
+  );
+}
+
 export default App;

client/src/components/Footer.css

@@ -8,27 +8,31 @@
 .footer-content {
   max-width: 1400px;
   margin: 0 auto;
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
   gap: 2rem;
 }
 
-.footer-section {
-  padding: 0 1rem;
-}
-
 .footer-logo {
-  margin-bottom: 1.5rem;
+  margin-bottom: 0;
   display: flex;
-  justify-content: center;
+  align-items: center;
 }
 
 .footer-logo img {
-  width: 120px;
+  width: 100px;
   height: auto;
   object-fit: contain;
 }
 
+.footer-section {
+  flex: 1;
+  min-width: 150px;
+  padding: 0 1rem;
+}
+
 .footer-section h3 {
   color: #4a90e2;
   font-size: 1.5rem;
@@ -86,15 +90,11 @@
   }
 
   .footer-content {
-    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 1.5rem;
-  }
-
-  .footer-section {
-    padding: 0;
+    flex-direction: column;
+    align-items: center;
   }
 
   .footer-logo img {
-    width: 100px;
+    width: 80px;
   }
 }