baraqex 1.0.67 → 1.0.69

package/templates/fullstack-template/package.json

@@ -1,66 +1,36 @@
 {
   "name": "fullstack-baraqex-app",
   "version": "0.1.0",
-  "private": true,
-  "description": "A fullstack application built with Baraqex",
   "type": "module",
+  "description": "A fullstack application built with Baraqex framework",
+  "main": "server.js",
   "scripts": {
-    "dev": "node server.js",
-    "build": "npm run build:client && npm run build:server",
-    "build:client": "esbuild src/client.tsx --bundle --outfile=dist/client.js --format=esm --target=es2020 --platform=browser --external:express --external:path --external:fs --external:http",
-    "build:server": "esbuild src/server.ts --bundle --outfile=dist/server.js --platform=node --target=node16 --format=esm --external:express --external:cors --external:jsonwebtoken --external:bcryptjs --external:mongodb --external:mysql2 --external:pg --sourcemap",
-    "start": "NODE_ENV=production node dist/server.js",
-    "test": "jest",
-    "lint": "eslint src --ext .ts,.tsx,.js,.jsx",
-    "format": "prettier --write src/**/*.{ts,tsx,js,jsx,json,css,md}",
-    "db:migrate": "node scripts/migrate.js",
-    "db:seed": "node scripts/seed.js"
+    "dev": "tsx src/server.ts",
+    "start": "tsx src/server.ts",
+    "build": "tsc && echo 'Build complete'",
+    "build:start": "npm run build && node dist/server.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "baraqex": "^1.0.60",
-    "bcryptjs": "^2.4.3",
-    "compression": "^1.7.4",
-    "cors": "^2.8.5",
-    "dotenv": "^16.3.1",
-    "express": "^4.18.2",
-    "express-rate-limit": "^6.10.0",
-    "frontend-hamroun": "latest",
-    "helmet": "^7.0.0",
-    "jsonwebtoken": "^9.0.2",
-    "morgan": "^1.10.0",
-    "multer": "latest"
+    "baraqex": "^1.0.68",
+    "dotenv": "^16.0.0",
+    "express": "^4.21.2"
   },
   "devDependencies": {
-    "@types/bcryptjs": "^2.4.2",
-    "@types/compression": "^1.7.2",
-    "@types/cors": "^2.8.13",
-    "@types/express": "^4.17.17",
-    "@types/jest": "^29.5.4",
-    "@types/jsonwebtoken": "^9.0.2",
-    "@types/morgan": "^1.9.4",
-    "@types/multer": "^1.4.7",
-    "@types/node": "^20.5.0",
-    "esbuild": "^0.19.0",
-    "eslint": "^8.47.0",
-    "jest": "^29.6.0",
-    "nodemon": "^3.0.1",
-    "prettier": "^3.0.0",
+    "@types/express": "^4.17.0",
+    "@types/node": "^20.0.0",
+    "tsx": "^4.0.0",
     "typescript": "^5.0.0"
   },
-  "optionalDependencies": {
-    "mongodb": "^5.7.0",
-    "mysql2": "^3.6.0",
-    "pg": "^8.11.3"
+  "engines": {
+    "node": ">=16.0.0"
   },
   "keywords": [
     "baraqex",
     "fullstack",
-    "react",
     "typescript",
     "express",
-    "api",
-    "authentication"
+    "ssr"
   ],
-  "author": "",
   "license": "MIT"
 }

package/templates/fullstack-template/server.js

@@ -1,35 +1,62 @@
 import { createServer } from 'baraqex';
-import dotenv from 'dotenv';
 
-// Load environment variables
-dotenv.config();
-
-// Create development server
+// Create a fullstack server with basic configuration
 const server = createServer({
-  port: parseInt(process.env.PORT || '3000'),
+  port: process.env.PORT || 3000,
   apiDir: './src/api',
-  pagesDir: './src/pages',
+  pagesDir: './src/pages', 
   staticDir: './public',
   enableCors: true,
-  auth: {
-    secret: process.env.JWT_SECRET || 'dev-secret-key',
-    expiresIn: '7d'
-  }
+  // Uncomment and configure database if needed
+  // db: {
+  //   url: process.env.DATABASE_URL || 'mongodb://localhost:27017/baraqex-app',
+  //   type: 'mongodb'
+  // },
+  // Uncomment and configure authentication if needed  
+  // auth: {
+  //   secret: process.env.JWT_SECRET || 'your-secret-key',
+  //   expiresIn: '7d'
+  // }
 });
 
-// Enable SSR
-server.enableSSR({ hydratable: true });
-
-// Start server
-console.log('🚀 Starting Fullstack Baraqex Development Server...');
+// Add graceful shutdown handling
+process.on('SIGTERM', async () => {
+  console.log('SIGTERM received, shutting down gracefully');
+  await server.stop();
+  process.exit(0);
+});
 
-server.start().then(() => {
-  console.log('✅ Server running successfully!');
-  console.log('🌐 Frontend: http://localhost:3000');
-  console.log('🔗 API: http://localhost:3000/api');
-  console.log('📋 API Docs: http://localhost:3000/api-docs');
-  console.log('💚 Health: http://localhost:3000/health');
-}).catch(error => {
-  console.error('❌ Failed to start server:', error);
-  process.exit(1);
+process.on('SIGINT', async () => {
+  console.log('SIGINT received, shutting down gracefully');
+  await server.stop();
+  process.exit(0);
 });
+
+// Start the server
+async function startServer() {
+  try {
+    console.log('🚀 Starting Baraqex Fullstack Server...');
+    await server.start();
+    
+    console.log('✅ Server started successfully!');
+    console.log(`🌐 Server running at http://localhost:${server.config?.port || 3000}`);
+    console.log('📚 API endpoints available at /api/*');
+    console.log('📊 API documentation at /api-docs');
+    console.log('\n💡 Quick start:');
+    console.log('  - Add API routes in ./src/api/');
+    console.log('  - Add pages in ./src/pages/');
+    console.log('  - Static files go in ./public/');
+    console.log('  - Press Ctrl+C to stop the server');
+  } catch (error) {
+    console.error('❌ Failed to start server:', error.message);
+    
+    if (error.message.includes('Express not installed')) {
+      console.log('\n💡 To fix this, run:');
+      console.log('  npm install express @types/express');
+    }
+    
+    process.exit(1);
+  }
+}
+
+startServer();

package/templates/fullstack-template/src/App.tsx

@@ -1,4 +1,3 @@
-import { jsx, useState, useEffect } from 'frontend-hamroun';
 import { AuthProvider, useAuth } from './contexts/AuthContext';
 import { ApiProvider } from './contexts/ApiContext';
 import { Header } from './components/Header';
@@ -8,6 +7,13 @@ import { TodoList } from './components/TodoList';
 import { UserProfile } from './components/UserProfile';
 import { LoadingSpinner } from './components/LoadingSpinner';
 import './styles/App.css';
+import { useState, useEffect } from 'baraqex';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
 
 type View = 'dashboard' | 'todos' | 'profile' | 'login';
 
@@ -15,6 +21,9 @@ function AppContent() {
   const { user, loading: authLoading } = useAuth();
   const [currentView, setCurrentView] = useState<View>('dashboard');
   const [loading, setLoading] = useState(true);
+  const [users, setUsers] = useState<User[]>([]);
+  const [newUser, setNewUser] = useState({ name: '', email: '' });
+  const [userLoading, setUserLoading] = useState(false);
 
   useEffect(() => {
     // Simulate app initialization
@@ -25,6 +34,51 @@ function AppContent() {
     return () => clearTimeout(timer);
   }, []);
 
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  const fetchUsers = async () => {
+    try {
+      const response = await fetch('/api/users');
+      const data = await response.json();
+      if (data.success) {
+        setUsers(data.users);
+      }
+    } catch (error) {
+      console.error('Error fetching users:', error);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setUserLoading(true);
+
+    try {
+      const response = await fetch('/api/users', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(newUser),
+      });
+
+      const data = await response.json();
+      
+      if (data.success) {
+        setUsers([...users, data.user]);
+        setNewUser({ name: '', email: '' });
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (error) {
+      console.error('Error creating user:', error);
+      alert('Error creating user');
+    } finally {
+      setUserLoading(false);
+    }
+  };
+
   if (loading || authLoading) {
     return <LoadingSpinner message="Loading application..." />;
   }
@@ -70,6 +124,125 @@ function AppContent() {
       <footer className="app-footer">
         <p>&copy; 2024 Fullstack Baraqex App. Built with ❤️ using Baraqex Framework.</p>
       </footer>
+
+      {/* Add User Form */}
+      <div style={{ 
+        background: '#f5f5f5', 
+        padding: '20px', 
+        borderRadius: '8px', 
+        marginBottom: '30px' 
+      }}>
+        <h2 style={{ marginTop: '0', color: '#333' }}>Add New User</h2>
+        <form onSubmit={handleSubmit}>
+          <div style={{ marginBottom: '15px' }}>
+            <input
+              type="text"
+              placeholder="Name"
+              value={newUser.name}
+              onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
+              style={{
+                width: '100%',
+                padding: '10px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '14px'
+              }}
+              required
+            />
+          </div>
+          <div style={{ marginBottom: '15px' }}>
+            <input
+              type="email"
+              placeholder="Email"
+              value={newUser.email}
+              onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
+              style={{
+                width: '100%',
+                padding: '10px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '14px'
+              }}
+              required
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={userLoading}
+            style={{
+              background: userLoading ? '#ccc' : '#007bff',
+              color: 'white',
+              border: 'none',
+              padding: '10px 20px',
+              borderRadius: '4px',
+              cursor: userLoading ? 'not-allowed' : 'pointer',
+              fontSize: '14px'
+            }}
+          >
+            {userLoading ? 'Adding...' : 'Add User'}
+          </button>
+        </form>
+      </div>
+
+      {/* Users List */}
+      <div>
+        <h2 style={{ color: '#333' }}>Users ({users.length})</h2>
+        {users.length === 0 ? (
+          <p style={{ color: '#666', fontStyle: 'italic' }}>
+            No users found. Add some users using the form above!
+          </p>
+        ) : (
+          <div style={{ display: 'grid', gap: '10px' }}>
+            {users.map((user) => (
+              <div
+                key={user.id}
+                style={{
+                  background: 'white',
+                  border: '1px solid #ddd',
+                  borderRadius: '6px',
+                  padding: '15px',
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center'
+                }}
+              >
+                <div>
+                  <strong style={{ color: '#333' }}>{user.name}</strong>
+                  <br />
+                  <span style={{ color: '#666', fontSize: '14px' }}>{user.email}</span>
+                </div>
+                <div style={{ 
+                  background: '#28a745', 
+                  color: 'white', 
+                  padding: '4px 8px', 
+                  borderRadius: '4px', 
+                  fontSize: '12px' 
+                }}>
+                  ID: {user.id}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* API Info */}
+      <div style={{ 
+        marginTop: '40px', 
+        padding: '20px', 
+        background: '#e7f3ff', 
+        borderRadius: '8px' 
+      }}>
+        <h3 style={{ marginTop: '0', color: '#0066cc' }}>🔗 API Endpoints</h3>
+        <ul style={{ color: '#333' }}>
+          <li><code>GET /api/users</code> - Fetch all users</li>
+          <li><code>POST /api/users</code> - Create a new user</li>
+          <li><code>GET /api/hello</code> - Simple hello endpoint</li>
+        </ul>
+        <p style={{ color: '#666', fontSize: '14px', marginBottom: '0' }}>
+          Try visiting <a href="/api/users" target="_blank">/api/users</a> or <a href="/api/hello" target="_blank">/api/hello</a> to see the API responses.
+        </p>
+      </div>
     </div>
   );
 }
@@ -92,3 +265,7 @@ App.getMeta = () => ({
   'og:description': 'Complete fullstack solution with Baraqex',
   'og:type': 'website'
 });
+
+// Page metadata for SEO
+App.title = 'Baraqex Fullstack Demo';
+App.description = 'A demonstration of Baraqex fullstack capabilities with SSR and API integration';

package/templates/fullstack-template/src/api/hello.js

@@ -0,0 +1,19 @@
+// Example API route: GET /api/hello
+export async function get(req, res) {
+  res.json({ 
+    message: 'Hello from Baraqex API!', 
+    timestamp: new Date().toISOString(),
+    method: 'GET'
+  });
+}
+
+// POST /api/hello
+export async function post(req, res) {
+  const { name } = req.body;
+  res.json({ 
+    message: `Hello ${name || 'World'}!`,
+    timestamp: new Date().toISOString(),
+    method: 'POST',
+    body: req.body
+  });
+}

package/templates/fullstack-template/src/api/users.js

@@ -0,0 +1,39 @@
+// In-memory user storage for demo
+let users = [
+  { id: 1, name: 'John Doe', email: 'john@example.com' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
+];
+
+// GET /api/users
+export async function get(req, res) {
+  res.json({ 
+    success: true,
+    users,
+    count: users.length
+  });
+}
+
+// POST /api/users
+export async function post(req, res) {
+  const { name, email } = req.body;
+  
+  if (!name || !email) {
+    return res.status(400).json({
+      success: false,
+      error: 'Name and email are required'
+    });
+  }
+  
+  const newUser = {
+    id: users.length + 1,
+    name,
+    email
+  };
+  
+  users.push(newUser);
+  
+  res.status(201).json({
+    success: true,
+    user: newUser
+  });
+}

package/templates/fullstack-template/src/pages/index.tsx

@@ -0,0 +1,200 @@
+import { useState, useEffect } from 'baraqex';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+}
+
+export default function HomePage() {
+  const [users, setUsers] = useState<User[]>([]);
+  const [newUser, setNewUser] = useState({ name: '', email: '' });
+  const [loading, setLoading] = useState(false);
+
+  // Fetch users on component mount
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
+  const fetchUsers = async () => {
+    try {
+      const response = await fetch('/api/users');
+      const data = await response.json();
+      if (data.success) {
+        setUsers(data.users);
+      }
+    } catch (error) {
+      console.error('Error fetching users:', error);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const response = await fetch('/api/users', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(newUser),
+      });
+
+      const data = await response.json();
+      
+      if (data.success) {
+        setUsers([...users, data.user]);
+        setNewUser({ name: '', email: '' });
+      } else {
+        alert('Error: ' + data.error);
+      }
+    } catch (error) {
+      console.error('Error creating user:', error);
+      alert('Error creating user');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div style={{ 
+      fontFamily: 'system-ui, sans-serif', 
+      maxWidth: '800px', 
+      margin: '0 auto', 
+      padding: '20px' 
+    }}>
+      <h1 style={{ color: '#333', marginBottom: '30px' }}>
+        🚀 Baraqex Fullstack Demo
+      </h1>
+      
+      <p style={{ color: '#666', marginBottom: '40px' }}>
+        This page demonstrates server-side rendering with API integration. 
+        The page is rendered on the server and then hydrated on the client.
+      </p>
+
+      {/* Add User Form */}
+      <div style={{ 
+        background: '#f5f5f5', 
+        padding: '20px', 
+        borderRadius: '8px', 
+        marginBottom: '30px' 
+      }}>
+        <h2 style={{ marginTop: '0', color: '#333' }}>Add New User</h2>
+        <form onSubmit={handleSubmit}>
+          <div style={{ marginBottom: '15px' }}>
+            <input
+              type="text"
+              placeholder="Name"
+              value={newUser.name}
+              onChange={(e) => setNewUser({ ...newUser, name: e.target.value })}
+              style={{
+                width: '100%',
+                padding: '10px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '14px'
+              }}
+              required
+            />
+          </div>
+          <div style={{ marginBottom: '15px' }}>
+            <input
+              type="email"
+              placeholder="Email"
+              value={newUser.email}
+              onChange={(e) => setNewUser({ ...newUser, email: e.target.value })}
+              style={{
+                width: '100%',
+                padding: '10px',
+                border: '1px solid #ddd',
+                borderRadius: '4px',
+                fontSize: '14px'
+              }}
+              required
+            />
+          </div>
+          <button
+            type="submit"
+            disabled={loading}
+            style={{
+              background: loading ? '#ccc' : '#007bff',
+              color: 'white',
+              border: 'none',
+              padding: '10px 20px',
+              borderRadius: '4px',
+              cursor: loading ? 'not-allowed' : 'pointer',
+              fontSize: '14px'
+            }}
+          >
+            {loading ? 'Adding...' : 'Add User'}
+          </button>
+        </form>
+      </div>
+
+      {/* Users List */}
+      <div>
+        <h2 style={{ color: '#333' }}>Users ({users.length})</h2>
+        {users.length === 0 ? (
+          <p style={{ color: '#666', fontStyle: 'italic' }}>
+            No users found. Add some users using the form above!
+          </p>
+        ) : (
+          <div style={{ display: 'grid', gap: '10px' }}>
+            {users.map((user) => (
+              <div
+                key={user.id}
+                style={{
+                  background: 'white',
+                  border: '1px solid #ddd',
+                  borderRadius: '6px',
+                  padding: '15px',
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center'
+                }}
+              >
+                <div>
+                  <strong style={{ color: '#333' }}>{user.name}</strong>
+                  <br />
+                  <span style={{ color: '#666', fontSize: '14px' }}>{user.email}</span>
+                </div>
+                <div style={{ 
+                  background: '#28a745', 
+                  color: 'white', 
+                  padding: '4px 8px', 
+                  borderRadius: '4px', 
+                  fontSize: '12px' 
+                }}>
+                  ID: {user.id}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* API Info */}
+      <div style={{ 
+        marginTop: '40px', 
+        padding: '20px', 
+        background: '#e7f3ff', 
+        borderRadius: '8px' 
+      }}>
+        <h3 style={{ marginTop: '0', color: '#0066cc' }}>🔗 API Endpoints</h3>
+        <ul style={{ color: '#333' }}>
+          <li><code>GET /api/users</code> - Fetch all users</li>
+          <li><code>POST /api/users</code> - Create a new user</li>
+          <li><code>GET /api/hello</code> - Simple hello endpoint</li>
+        </ul>
+        <p style={{ color: '#666', fontSize: '14px', marginBottom: '0' }}>
+          Try visiting <a href="/api/users" target="_blank">/api/users</a> or <a href="/api/hello" target="_blank">/api/hello</a> to see the API responses.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+// Page metadata for SEO
+HomePage.title = 'Baraqex Fullstack Demo';
+HomePage.description = 'A demonstration of Baraqex fullstack capabilities with SSR and API integration';