Romilchouhan · Romilchouhan · Oct 22, 2025 · Oct 22, 2025
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,5 +1,3 @@
-version: '3.8'
-
 services:
   redis:
     image: redis:7-alpine

diff --git a/frontend/package.json b/frontend/package.json
@@ -3,17 +3,42 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
     "react-router-dom": "^6.3.0",
+    "react-scripts": "5.0.1",
     "axios": "^1.4.0",
     "@mui/material": "^5.14.1",
-    "@mui/icons-material": "^5.14.1"
+    "@mui/icons-material": "^5.14.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "rea[<35;82;26Mct-scripts start",
+    "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test"
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
   }
 }
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <title>Trading Platform</title>
+</head>
+<body>
+<noscript>You need to enable JavaScript to run this app.</noscript>
+<div id="root"></div>
+</body>
+</html>
diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Trading",
+  "name": "Trading Platform",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#1976d2",
+  "background_color": "#0a0e27"
+}
diff --git a/frontend/public/robots.txt b/frontend/public/robots.txt
@@ -0,0 +1,3 @@
+# Allow all robot
+User-agent: *
+Disallow:
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -0,0 +1,15 @@
+.App {
+    min-height: 100vh;
+    background-color: #0a0e27;
+}
+
+.App-header {
+    background-color: #1a1a2e;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+}
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { AuthProvider } from './context/AuthContext';
+import { WebSocketProvider } from './context/WebSocketContext';
+import ProtectedRoute from './components/common/ProtectedRoute';
+import LoginPage from './pages/LoginPage';
+import DashboardPage from './pages/DashboardPage';
+import OrderBookPage from './pages/OrderBookPage';
+import PortfolioPage from './pages/PortfolioPage';
+import MarketDataPage from './pages/MarketDataPage';
+import SettingsPage from './pages/SettingsPage';
+import './App.css';
+
+const darkTheme = createTheme({
+    palette: {
+        mode: 'dark',
+        primary: {
+            main: '#1976d2',
+        },
+        secondary: {
+            main: '#dc004e',
+        },
+        background: {
+            default: '#0a0e27',
+            paper: '#1a1a2e',
+        },
+    },
+    typography: {
+        fontFamily: 'Roboto, Arial, sans-serif',
+    },
+});
+
+function App() {
+    return (
+        <ThemeProvider theme={darkTheme}>
+            <CssBaseline />
+            <AuthProvider>
+                <WebSocketProvider>
+                    <Router>
+                        <div className="App">
+                            <Routes>
+                                <Route path="/login" element={<LoginPage />} />
+                                <Route path="/" element={
+                                    <ProtectedRoute>
+                                        <DashboardPage />
+                                    </ProtectedRoute>
+                                } />
+                                <Route path="/orderbook" element={
+                                    <ProtectedRoute>
+                                        <OrderBookPage />
+                                    </ProtectedRoute>
+                                } />
+                                <Route path="/portfolio" element={
+                                    <ProtectedRoute>
+                                        <PortfolioPage />
+                                    </ProtectedRoute>
+                                } />
+                                <Route path="/market-data" element={
+                                    <ProtectedRoute>
+                                        <MarketDataPage />
+                                    </ProtectedRoute>
+                                } />
+                                <Route path="/settings" element={
+                                    <ProtectedRoute>
+                                        <SettingsPage />
+                                    </ProtectedRoute>
+                                } />
+                                <Route path="*" element={<Navigate to="/" replace />} />
+                            </Routes>
+                        </div>
+                    </Router>
+                </WebSocketProvider>
+            </AuthProvider>
+        </ThemeProvider>
+    );
+}
+
+export default App;
diff --git a/frontend/src/components/common/Header.js b/frontend/src/components/common/Header.js
@@ -0,0 +1,88 @@
+import React from 'react';
+import {
+    AppBar,
+    Toolbar,
+    Typography,
+    IconButton,
+    Menu,
+    MenuItem,
+    Avatar,
+    Box
+} from '@mui/material';
+import { AccountCircle, Notifications } from '@mui/icons-material';
+import { useAuth } from '../../context/AuthContext';
+import { useWebSocket } from '../../context/WebSocketContext';
+
+const Header = () => {
+    const { user, logout } = useAuth();
+    const { connected } = useWebSocket();
+    const [anchorEl, setAnchorEl] = React.useState(null);
+
+    const handleMenu = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    const handleLogout = () => {
+        handleClose();
+        logout();
+    };
+
+    return (
+        <AppBar position="static" sx={{ bgcolor: '#1a1a2e', boxShadow: 'none' }}>
+            <Toolbar>
+                <Typography variant="h6" component="div" sx={{ flexGrow: 1, fontWeight: 'bold' }}>
+                    Trading Platform
+                </Typography>
+
+                <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+                    {/* Connection Status */}
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                        <Box
+                            sx={{
+                                width: 8,
+                                height: 8,
+                                borderRadius: '50%',
+                                bgcolor: connected ? '#4caf50' : '#f44336'
+                            }}
+                        />
+                        <Typography variant="body2" color="textSecondary">
+                            {connected ? 'Connected' : 'Disconnected'}
+                        </Typography>
+                    </Box>
+
+                    {/* Notifications */}
+                    <IconButton color="inherit">
+                        <Notifications />
+                    </IconButton>
+
+                    {/* User Menu */}
+                    <IconButton
+                        size="large"
+                        onClick={handleMenu}
+                        color="inherit"
+                    >
+                        <Avatar sx={{ width: 32, height: 32 }}>
+                            {user?.firstName?.charAt(0) || 'U'}
+                        </Avatar>
+                    </IconButton>
+                    <Menu
+                        id="menu-appbar"
+                        anchorEl={anchorEl}
+                        open={Boolean(anchorEl)}
+                        onClose={handleClose}
+                    >
+                        <MenuItem onClick={handleClose}>Profile</MenuItem>
+                        <MenuItem onClick={handleClose}>Settings</MenuItem>
+                        <MenuItem onClick={handleLogout}>Logout</MenuItem>
+                    </Menu>
+                </Box>
+            </Toolbar>
+        </AppBar>
+    );
+};
+
+export default Header;
diff --git a/frontend/src/components/common/ProtectedRoute.js b/frontend/src/components/common/ProtectedRoute.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../../context/AuthContext';
+import { CircularProgress, Box } from '@mui/material';
+
+const ProtectedRoute = ({ children }) => {
+    const { isAuthenticated, loading } = useAuth();
+
+    if (loading) {
+        return (
+            <Box display="flex" justifyContent="center" alignItems="center" minHeight="100vh">
+                <CircularProgress />
+            </Box>
+        );
+    }
+
+    return isAuthenticated ? children : <Navigate to="/login" replace />;
+};
+
+export default ProtectedRoute;
diff --git a/frontend/src/components/common/Sidebar.js b/frontend/src/components/common/Sidebar.js
@@ -0,0 +1,74 @@
+import React from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import {
+    Drawer,
+    List,
+    ListItem,
+    ListItemButton,
+    ListItemIcon,
+    ListItemText,
+    Box
+} from '@mui/material';
+import {
+    Dashboard,
+    ShowChart,
+    AccountBalance,
+    TrendingUp,
+    Settings
+} from '@mui/icons-material';
+
+const Sidebar = () => {
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const menuItems = [
+        { text: 'Dashboard', icon: <Dashboard />, path: '/' },
+        { text: 'OrderBook', icon: <ShowChart />, path: '/orderbook' },
+        { text: 'Portfolio', icon: <AccountBalance />, path: '/portfolio' },
+        { text: 'Market Data', icon: <TrendingUp />, path: '/market-data' },
+        { text: 'Settings', icon: <Settings />, path: '/settings' }
+    ];
+
+    return (
+        <Drawer
+            variant="permanent"
+            sx={{
+                width: 240,
+                flexShrink: 0,
+                '& .MuiDrawer-paper': {
+                    width: 240,
+                    boxSizing: 'border-box',
+                    bgcolor: '#1a1a2e',
+                    borderRight: '1px solid rgba(255, 255, 255, 0.12)',
+                    marginTop: '64px'
+                },
+            }}
+        >
+            <Box sx={{ overflow: 'auto' }}>
+                <List>
+                    {menuItems.map((item) => (
+                        <ListItem key={item.text} disablePadding>
+                            <ListItemButton
+                                selected={location.pathname === item.path}
+                                onClick={() => navigate(item.path)}
+                                sx={{
+                                    '&.Mui-selected': {
+                                        bgcolor: 'rgba(25, 118, 210, 0.2)',
+                                        borderRight: '3px solid #1976d2'
+                                    }
+                                }}
+                            >
+                                <ListItemIcon sx={{ color: 'inherit' }}>
+                                    {item.icon}
+                                </ListItemIcon>
+                                <ListItemText primary={item.text} />
+                            </ListItemButton>
+                        </ListItem>
+                    ))}
+                </List>
+            </Box>
+        </Drawer>
+    );
+};
+
+export default Sidebar;