create-fullstack-boilerplate 1.0.0

package/template/Frontend/src/config/routes.js

@@ -0,0 +1,65 @@
+
+import {
+    Network,
+    Settings
+} from 'lucide-react';
+
+export const sidebarRoutes = [
+    {
+        id: 'dashboard',
+        name: 'Dashboard',
+        path: '/dashboard',
+        icon: Network,
+        category: 'monitoring'
+    },
+    {
+        id: 'settings',
+        name: 'Settings',
+        path: '/settings',
+        icon: Settings,
+        category: 'account'
+    }
+];
+
+// Category configurations for future expansion
+export const routeCategories = {
+    monitoring: {
+        name: 'Monitoring',
+        order: 1,
+        showHeader: true
+    },
+    account: {
+        name: 'Account',
+        order: 2,
+        showHeader: true
+    }
+};
+
+// Get routes grouped by category
+export const getGroupedRoutes = () => {
+    const grouped = {};
+
+    sidebarRoutes.forEach(route => {
+        if (!grouped[route.category]) {
+            grouped[route.category] = [];
+        }
+        grouped[route.category].push(route);
+    });
+
+    // Sort categories by order
+    const sortedCategories = Object.keys(grouped).sort((a, b) => {
+        return routeCategories[a].order - routeCategories[b].order;
+    });
+
+    const result = {};
+    sortedCategories.forEach(category => {
+        result[category] = grouped[category];
+    });
+
+    return result;
+};
+
+// Find route by path
+export const findRouteByPath = (path) => {
+    return sidebarRoutes.find(route => route.path === path);
+};

package/template/Frontend/src/contexts/AuthContext.jsx

@@ -0,0 +1,144 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+import { axiosAuthClient } from '../config/axiosClient';
+import { encryptPassword } from '../config/encryption';
+
+const AuthContext = createContext();
+
+export const useAuth = () => {
+    const context = useContext(AuthContext);
+    if (!context) {
+        throw new Error('useAuth must be used within an AuthProvider');
+    }
+    return context;
+};
+
+export const AuthProvider = ({ children }) => {
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [user, setUser] = useState(null);
+
+    useEffect(() => {
+        checkAuthState();
+    }, []);
+
+    const checkAuthState = async () => {
+        try {
+            setIsLoading(true);
+            const token = localStorage.getItem('authToken');
+            const storedUser = localStorage.getItem('user');
+
+            if (token && storedUser) {
+                // Verify token is still valid by fetching current user
+                try {
+                    const response = await axiosAuthClient.get('/me');
+                    const userData = response.data.user;
+
+                    setUser(userData);
+                    setIsAuthenticated(true);
+
+                    // Update stored user data
+                    localStorage.setItem('user', JSON.stringify(userData));
+                } catch (error) {
+                    // Token is invalid or expired
+                    console.error('Token verification failed:', error);
+                    handleLogout();
+                }
+            } else {
+                setIsAuthenticated(false);
+                setUser(null);
+            }
+        } catch (error) {
+            console.error('Auth state check failed:', error);
+            setIsAuthenticated(false);
+            setUser(null);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleLogin = async (email, password) => {
+        try {
+            const response = await axiosAuthClient.post('/login', {
+                email,
+                password: encryptPassword(password)
+            });
+
+            const { token, user: userData } = response.data;
+
+            // Store token and user data
+            localStorage.setItem('authToken', token);
+            localStorage.setItem('user', JSON.stringify(userData));
+
+            setUser(userData);
+            setIsAuthenticated(true);
+
+            return { success: true };
+        } catch (error) {
+            console.error('Login error:', error);
+
+            let errorMessage = 'Failed to sign in. Please try again.';
+
+            if (error.response) {
+                errorMessage = error.response.data.message || errorMessage;
+            } else if (error.request) {
+                errorMessage = 'Network error. Please check your connection.';
+            }
+
+            return { success: false, error: errorMessage };
+        }
+    };
+
+    const handleLogout = async () => {
+        try {
+            // Optional: Call logout endpoint
+            await axiosAuthClient.post('/logout').catch(() => {
+                // Ignore errors on logout
+            });
+        } catch (error) {
+            console.error('Logout error:', error);
+        } finally {
+            // Clear local storage and state
+            localStorage.removeItem('authToken');
+            localStorage.removeItem('user');
+            setIsAuthenticated(false);
+            setUser(null);
+        }
+    };
+
+    const refreshUserData = async () => {
+        if (isAuthenticated) {
+            await checkAuthState();
+        }
+    };
+
+    const getEmail = () => {
+        if (!user) return null;
+        return user.email || null;
+    };
+
+    const getToken = () => {
+        return localStorage.getItem('authToken');
+    };
+
+    const value = {
+        isAuthenticated,
+        isLoading,
+
+        // User data
+        user,
+        getEmail,
+        getToken,
+
+        // Actions
+        handleLogin,
+        handleLogout,
+        refreshUserData,
+        checkAuthState
+    };
+
+    return (
+        <AuthContext.Provider value={value}>
+            {children}
+        </AuthContext.Provider>
+    );
+};

package/template/Frontend/src/contexts/ThemeContext.jsx

@@ -0,0 +1,69 @@
+import { createContext, useContext, useState, useEffect } from 'react';
+
+const ThemeContext = createContext();
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider');
+  }
+  return context;
+};
+
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState('light');
+
+  useEffect(() => {
+    // Check for saved theme in localStorage
+    const savedTheme = localStorage.getItem('theme');
+    
+    // Check for system preference if no saved theme
+    const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    
+    const initialTheme = savedTheme || systemTheme;
+    setTheme(initialTheme);
+    applyTheme(initialTheme);
+
+    // Listen for system theme changes
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    const handleSystemThemeChange = (e) => {
+      if (!localStorage.getItem('theme')) {
+        const newTheme = e.matches ? 'dark' : 'light';
+        setTheme(newTheme);
+        applyTheme(newTheme);
+      }
+    };
+
+    mediaQuery.addListener(handleSystemThemeChange);
+    return () => mediaQuery.removeListener(handleSystemThemeChange);
+  }, []);
+
+  const applyTheme = (newTheme) => {
+    document.documentElement.setAttribute('data-theme', newTheme);
+    document.documentElement.classList.toggle('dark', newTheme === 'dark');
+  };
+
+  const toggleTheme = () => {
+    const newTheme = theme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+    applyTheme(newTheme);
+  };
+
+  const setSpecificTheme = (newTheme) => {
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+    applyTheme(newTheme);
+  };
+
+  return (
+    <ThemeContext.Provider value={{ 
+      theme, 
+      toggleTheme, 
+      setTheme: setSpecificTheme,
+      isDark: theme === 'dark'
+    }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/template/Frontend/src/index.css

@@ -0,0 +1,88 @@
+@import "tailwindcss";
+
+/* Custom font faces */
+@font-face {
+  font-family: "Articulat CF";
+  src: url("./assets/fonts/ArticulatCFRegular/font.woff2") format("woff2"),
+    url("./assets/fonts/ArticulatCFRegular/font.woff") format("woff");
+}
+
+@font-face {
+  font-family: "ArticulatCFDemiBold";
+  src: url("./assets/fonts/ArticulatCFDemiBold/font.woff2") format("woff2"),
+    url("./assets/fonts/ArticulatCFDemiBold/font.woff") format("woff");
+}
+
+@font-face {
+  font-family: "Mixta Pro";
+  src: url("./assets/fonts/MixtaProRegularItalic/font.woff2") format("woff2"),
+    url("./assets/fonts/MixtaProRegularItalic/font.woff") format("woff");
+}
+
+@font-face {
+  font-family: "ArticulatCFNormal";
+  src: url("./assets/fonts/ArticulatCFNormal/font.woff2") format("woff2"),
+    url("./assets/fonts/ArticulatCFNormal/font.woff") format("woff");
+}
+
+@font-face {
+  font-family: "SoehneMonoBuch";
+  src: url("./assets/fonts/fonts_sohne/WOFF2/soehne-mono-buch.woff2") format("woff2"),
+    url("./assets/fonts/fonts_sohne/OTF/SöhneMono-Buch.otf") format("otf");
+}
+
+@font-face {
+  font-family: "SoehneMonoLeicht";
+  src: url("./assets/fonts/fonts_sohne/WOFF2/soehne-mono-leicht.woff2") format("woff2"),
+    url("./assets/fonts/fonts_sohne/OTF/SöhneMono-Leicht.otf") format("otf");
+}
+
+@theme {
+  --font-articulat-cf: "Articulat CF", sans-serif;
+  --font-articulatcf-demibold: "ArticulatCFDemiBold", sans-serif;
+  --font-articulat-normal: "ArticulatCFNormal", sans-serif;
+  --font-mixta-pro: "Mixta Pro", sans-serif;
+  --font-sohne-mono-buch: "SoehneMonoBuch", monospace;
+  --font-sohne-mono-leicht: "SoehneMonoLeicht", monospace;
+}
+
+/* Remove conflicting base styles that interfere with Tailwind/DaisyUI */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+
+#root {
+  min-height: 100vh;
+}
+
+/* Theme transition effects */
+* {
+  transition: background-color 200ms ease-in-out,
+    border-color 200ms ease-in-out,
+    color 200ms ease-in-out;
+}
+
+/* Custom scrollbar for webkit browsers */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: hsl(var(--b2, 210 40% 98%));
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--b3, 210 40% 94%));
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--bc, 215 28% 17%) / 0.5);
+}

package/template/Frontend/src/main.jsx

@@ -0,0 +1,11 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/template/Frontend/src/pages/Dashboard.jsx

@@ -0,0 +1,137 @@
+import { useState, useEffect } from 'react';
+import { useTheme } from '../contexts/ThemeContext';
+import { axiosDashboardClient } from '../config/axiosClient';
+import SpinningLoader from '../components/Loader';
+
+const Dashboard = () => {
+    const { isDark } = useTheme();
+    const [sections, setSections] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+
+    const fetchDashboardInfo = async () => {
+        setLoading(true);
+        try {
+            const response = await axiosDashboardClient.get('getDashboardHealth');
+            setSections(response.data);
+        } catch (err) {
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchDashboardInfo();
+    }, []);
+
+    return (
+        <div className={`min-h-screen transition-colors duration-300
+            ${isDark ? "bg-[#0a0a0a]" : "bg-[#fafafa]"}`}>
+
+            {/* Content Container */}
+            <div className="max-w-6xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
+
+                {/* Header */}
+                <div className="mb-12">
+                    <h1 className={`text-4xl sm:text-5xl font-semibold mb-3 tracking-tight
+                        ${isDark ? "text-white" : "text-gray-900"}`}
+                        style={{ fontFamily: "'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif" }}>
+                        Dashboard Overview
+                    </h1>
+                    <p className={`text-lg ${isDark ? "text-gray-400" : "text-gray-600"}`}>
+                        System architecture and configuration
+                    </p>
+                </div>
+
+                {/* Loading State */}
+                {loading && (
+                    <div className="flex justify-center items-center py-20">
+                        <SpinningLoader size={50} />
+                    </div>
+                )}
+
+                {/* Error State */}
+                {error && (
+                    <div className={`p-4 rounded-xl border ${isDark
+                        ? "bg-red-900/20 border-red-800/50 text-red-400"
+                        : "bg-red-50 border-red-200 text-red-700"}`}>
+                        <p className="font-medium">Error: {error}</p>
+                    </div>
+                )}
+
+                {/* Dashboard Cards */}
+                {!loading && !error && (
+                    <div className="space-y-6">
+                        {sections.map((section, index) => (
+                            <div
+                                key={index}
+                                className={`group rounded-2xl transition-all duration-300 overflow-hidden
+                                    ${isDark
+                                        ? "bg-[#141414] border border-gray-800/50 hover:border-gray-700/80"
+                                        : "bg-white border border-gray-200 hover:border-gray-300 shadow-sm hover:shadow-md"}`}
+                                style={{
+                                    animation: `fadeInUp 0.5s ease-out ${index * 0.1}s both`
+                                }}>
+
+                                {/* Card Header */}
+                                <div className={`px-8 py-6 border-b ${isDark ? "border-gray-800/50" : "border-gray-100"}`}>
+                                    <div className="flex items-center gap-4">
+                                        <div className={`flex-shrink-0 w-12 h-12 flex items-center justify-center rounded-xl text-2xl
+                                            ${isDark ? "bg-gray-800/80" : "bg-gray-100"}`}>
+                                            {section.icon}
+                                        </div>
+                                        <h2 className={`text-xl font-semibold ${isDark ? "text-gray-100" : "text-gray-900"}`}
+                                            style={{ fontFamily: "'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif" }}>
+                                            {section.title}
+                                        </h2>
+                                    </div>
+                                </div>
+
+                                {/* Card Content */}
+                                <div className="px-8 py-6">
+                                    <ul className="space-y-4">
+                                        {section.items.map((item, i) => (
+                                            <li
+                                                key={i}
+                                                className="flex items-start gap-3 group/item">
+                                                <div className={`flex-shrink-0 w-1.5 h-1.5 rounded-full mt-2.5 transition-all duration-200
+                                                    ${isDark
+                                                        ? "bg-gray-600 group-hover/item:bg-blue-500"
+                                                        : "bg-gray-400 group-hover/item:bg-blue-600"}`}>
+                                                </div>
+                                                <span className={`text-[15px] leading-relaxed transition-colors duration-200
+                                                    ${isDark
+                                                        ? "text-gray-400 group-hover/item:text-gray-300"
+                                                        : "text-gray-600 group-hover/item:text-gray-900"}`}
+                                                    style={{ fontFamily: "'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif" }}>
+                                                    {item}
+                                                </span>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            {/* Minimal Animations */}
+            <style>{`
+                @keyframes fadeInUp {
+                    from {
+                        opacity: 0;
+                        transform: translateY(20px);
+                    }
+                    to {
+                        opacity: 1;
+                        transform: translateY(0);
+                    }
+                }
+            `}</style>
+        </div>
+    );
+};
+
+export default Dashboard;