create-aziz-app 2.0.13 → 2.0.15

package/template/api/getUser.js

@@ -0,0 +1,60 @@
+// API Route: /api/getUser
+// Next.js App Router style with NextResponse
+
+const { NextResponse } = require('../modules/next-response');
+
+// Mock database
+const users = [
+    { _id: '1', name: 'Aziz Ahmed', email: 'aziz@example.com', role: 'admin', phone: '123-456-7890' },
+    { _id: '2', name: 'John Doe', email: 'john@example.com', role: 'user', phone: '098-765-4321' },
+    { _id: '3', name: 'Jane Smith', email: 'jane@example.com', role: 'user', phone: '555-123-4567' }
+];
+
+// GET handler - Next.js App Router style
+async function GET(request) {
+    try {
+        // Parse URL and get search params
+        const { searchParams } = new URL(request.url);
+        const email = searchParams.get('email');
+        const id = searchParams.get('id');
+
+        // Find by email
+        if (email) {
+            const user = users.find(u => u.email === email);
+            if (!user) {
+                return NextResponse.json(
+                    { error: 'User not found' },
+                    { status: 404 }
+                );
+            }
+            return NextResponse.json(user);
+        }
+
+        // Find by ID
+        if (id) {
+            const user = users.find(u => u._id === id);
+            if (!user) {
+                return NextResponse.json(
+                    { error: 'User not found' },
+                    { status: 404 }
+                );
+            }
+            return NextResponse.json(user);
+        }
+
+        // No params provided
+        return NextResponse.json(
+            { error: 'Email or ID required' },
+            { status: 400 }
+        );
+    } catch (error) {
+        console.error('Error fetching user:', error);
+        return NextResponse.json(
+            { error: 'Failed to fetch user' },
+            { status: 500 }
+        );
+    }
+}
+
+// Export the handler
+module.exports = { GET };

package/template/api/getUserWithDB.js

@@ -0,0 +1,65 @@
+// API Route: /api/getUserWithDB
+// Complete Next.js App Router style with DB and Model
+
+const { NextResponse } = require('../modules/next-response');
+const connectDB = require('../lib/db');
+const User = require('../models/User');
+
+// GET handler - Exactly like Next.js!
+async function GET(request) {
+    try {
+        // Connect to database
+        await connectDB();
+
+        // Parse URL and get search params
+        const { searchParams } = new URL(request.url);
+        const email = searchParams.get('email');
+        const id = searchParams.get('id');
+
+        // Find by email
+        if (email) {
+            const user = await User.findOne({ email });
+            
+            if (!user) {
+                return NextResponse.json(
+                    { error: 'User not found' },
+                    { status: 404 }
+                );
+            }
+
+            // Return user without sensitive fields
+            const { password, ...userData } = user;
+            return NextResponse.json(userData);
+        }
+
+        // Find by ID
+        if (id) {
+            const user = await User.findById(id);
+            
+            if (!user) {
+                return NextResponse.json(
+                    { error: 'User not found' },
+                    { status: 404 }
+                );
+            }
+
+            // Return user without sensitive fields
+            const { password, ...userData } = user;
+            return NextResponse.json(userData);
+        }
+
+        // No params - return error
+        return NextResponse.json(
+            { error: 'Email or ID required' },
+            { status: 400 }
+        );
+    } catch (error) {
+        console.error('Error fetching user:', error);
+        return NextResponse.json(
+            { error: 'Failed to fetch user' },
+            { status: 500 }
+        );
+    }
+}
+
+module.exports = { GET };

package/template/api/hello.js

@@ -1,26 +1,17 @@
 // API Route: /api/hello
-// Simple Next.js-style API route
+// Next.js App Router style
 
-export default async function handler(req, res) {
-    const { method, query } = req;
+const { NextResponse } = require('../modules/next-response');
 
-    if (method !== 'GET') {
-        res.setHeader('Allow', ['GET']);
-        return res.status(405).json({ 
-            error: 'Method not allowed',
-            message: `Method ${method} is not allowed. Use GET instead.`
-        });
-    }
-
-    const name = query.name || 'World';
+async function GET(request) {
+    const { searchParams } = new URL(request.url);
+    const name = searchParams.get('name') || 'World';
     
-    return res.status(200).json({
+    return NextResponse.json({
         message: `Hello, ${name}!`,
         timestamp: new Date().toISOString(),
-        method: method,
-        query: query
+        method: request.method
     });
 }
 
-// CommonJS export for Node.js compatibility
-module.exports = handler;
+module.exports = { GET };

package/template/api/loginUser.js

@@ -0,0 +1,61 @@
+// API Route: /api/loginUser
+// Next.js App Router style
+
+const { NextResponse } = require('../modules/next-response');
+
+// Mock database
+const users = [
+    { _id: '1', name: 'Aziz Ahmed', email: 'aziz@example.com', password: 'admin123', role: 'admin' },
+    { _id: '2', name: 'John Doe', email: 'john@example.com', password: 'user123', role: 'user' }
+];
+
+// POST handler
+async function POST(request) {
+    try {
+        // Parse request body
+        const body = await request.json();
+        const { email, password } = body;
+
+        // Validation
+        if (!email || !password) {
+            return NextResponse.json(
+                { error: 'Email and password are required' },
+                { status: 400 }
+            );
+        }
+
+        // Find user
+        const user = users.find(u => u.email === email);
+        
+        if (!user) {
+            return NextResponse.json(
+                { error: 'Invalid credentials' },
+                { status: 401 }
+            );
+        }
+
+        // Check password (in production, use bcrypt!)
+        if (user.password !== password) {
+            return NextResponse.json(
+                { error: 'Invalid credentials' },
+                { status: 401 }
+            );
+        }
+
+        // Return user data (without password)
+        const { password: _, ...userData } = user;
+        
+        return NextResponse.json({
+            ...userData,
+            message: 'Login successful'
+        });
+    } catch (error) {
+        console.error('Login error:', error);
+        return NextResponse.json(
+            { error: 'Failed to login' },
+            { status: 500 }
+        );
+    }
+}
+
+module.exports = { POST };

package/template/api/users.js

@@ -1,155 +1,59 @@
 // API Route: /api/users
-// Next.js-style API route handler
+// Next.js App Router style
+
+const { NextResponse } = require('../modules/next-response');
 
-// Mock database (in production, use a real database)
 let users = [
     { id: 1, name: 'Aziz Ahmed', email: 'aziz@example.com', createdAt: new Date().toISOString() },
     { id: 2, name: 'John Doe', email: 'john@example.com', createdAt: new Date().toISOString() },
     { id: 3, name: 'Jane Smith', email: 'jane@example.com', createdAt: new Date().toISOString() }
 ];
 
-// Next.js-style default export
-export default async function handler(req, res) {
-    const { method, query, body } = req;
-
-    switch (method) {
-        case 'GET':
-            // GET /api/users - Get all users
-            // GET /api/users?id=1 - Get specific user
-            if (query.id) {
-                const user = users.find(u => u.id === parseInt(query.id));
-                if (!user) {
-                    return res.status(404).json({ 
-                        error: 'User not found',
-                        message: `No user found with id ${query.id}` 
-                    });
-                }
-                return res.status(200).json(user);
-            }
-            
-            // Return all users
-            return res.status(200).json({
-                users,
-                total: users.length,
-                timestamp: new Date().toISOString()
-            });
-
-        case 'POST':
-            // POST /api/users - Create new user
-            const { name, email } = body;
-            
-            // Validation
-            if (!name || !email) {
-                return res.status(400).json({ 
-                    error: 'Validation error',
-                    message: 'Name and email are required',
-                    fields: {
-                        name: !name ? 'Name is required' : null,
-                        email: !email ? 'Email is required' : null
-                    }
-                });
-            }
+async function GET(request) {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get('id');
 
-            if (!email.includes('@')) {
-                return res.status(400).json({ 
-                    error: 'Validation error',
-                    message: 'Invalid email format' 
-                });
-            }
-
-            // Check if email already exists
-            if (users.find(u => u.email === email)) {
-                return res.status(409).json({ 
-                    error: 'Conflict',
-                    message: 'User with this email already exists' 
-                });
-            }
+    if (id) {
+        const user = users.find(u => u.id === parseInt(id));
+        if (!user) return NextResponse.json({ error: 'User not found' }, { status: 404 });
+        return NextResponse.json(user);
+    }
 
-            // Create new user
-            const newUser = {
-                id: users.length > 0 ? Math.max(...users.map(u => u.id)) + 1 : 1,
-                name,
-                email,
-                createdAt: new Date().toISOString()
-            };
-            
-            users.push(newUser);
-            
-            return res.status(201).json({
-                message: 'User created successfully',
-                user: newUser
-            });
+    return NextResponse.json({ users, total: users.length });
+}
 
-        case 'PUT':
-            // PUT /api/users?id=1 - Update user
-            const userId = query.id || body.id;
-            
-            if (!userId) {
-                return res.status(400).json({ 
-                    error: 'Bad request',
-                    message: 'User ID is required' 
-                });
-            }
+async function POST(request) {
+    const { name, email } = await request.json();
 
-            const userIndex = users.findIndex(u => u.id === parseInt(userId));
-            
-            if (userIndex === -1) {
-                return res.status(404).json({ 
-                    error: 'User not found',
-                    message: `No user found with id ${userId}` 
-                });
-            }
+    if (!name || !email) {
+        return NextResponse.json({ error: 'Name and email are required' }, { status: 400 });
+    }
 
-            // Update user
-            users[userIndex] = {
-                ...users[userIndex],
-                ...body,
-                id: users[userIndex].id, // Prevent ID change
-                updatedAt: new Date().toISOString()
-            };
+    if (users.find(u => u.email === email)) {
+        return NextResponse.json({ error: 'Email already exists' }, { status: 409 });
+    }
 
-            return res.status(200).json({
-                message: 'User updated successfully',
-                user: users[userIndex]
-            });
+    const newUser = {
+        id: Math.max(...users.map(u => u.id)) + 1,
+        name, email,
+        createdAt: new Date().toISOString()
+    };
+    users.push(newUser);
 
-        case 'DELETE':
-            // DELETE /api/users?id=1 - Delete user
-            const deleteId = query.id;
-            
-            if (!deleteId) {
-                return res.status(400).json({ 
-                    error: 'Bad request',
-                    message: 'User ID is required' 
-                });
-            }
+    return NextResponse.json({ message: 'User created', user: newUser }, { status: 201 });
+}
 
-            const deleteIndex = users.findIndex(u => u.id === parseInt(deleteId));
-            
-            if (deleteIndex === -1) {
-                return res.status(404).json({ 
-                    error: 'User not found',
-                    message: `No user found with id ${deleteId}` 
-                });
-            }
+async function DELETE(request) {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get('id');
 
-            const deletedUser = users.splice(deleteIndex, 1)[0];
+    if (!id) return NextResponse.json({ error: 'ID required' }, { status: 400 });
 
-            return res.status(200).json({
-                message: 'User deleted successfully',
-                user: deletedUser
-            });
+    const idx = users.findIndex(u => u.id === parseInt(id));
+    if (idx === -1) return NextResponse.json({ error: 'User not found' }, { status: 404 });
 
-        default:
-            // Method not allowed
-            res.setHeader('Allow', ['GET', 'POST', 'PUT', 'DELETE']);
-            return res.status(405).json({ 
-                error: 'Method not allowed',
-                message: `Method ${method} is not allowed for this endpoint`,
-                allowedMethods: ['GET', 'POST', 'PUT', 'DELETE']
-            });
-    }
+    const deleted = users.splice(idx, 1)[0];
+    return NextResponse.json({ message: 'User deleted', user: deleted });
 }
 
-// CommonJS export for Node.js compatibility
-module.exports = handler;
+module.exports = { GET, POST, DELETE };

package/template/app/about/page.js

@@ -0,0 +1,45 @@
+/** @jsx h */
+import { h } from '/_framework/runtime.js';
+import { navigate } from '/_framework/router.js';
+
+// About page — route: /about
+export default function Page() {
+    return (
+        <div style={{ padding: '40px 32px', maxWidth: '900px', margin: '0 auto' }}>
+            <h1>About 📖</h1>
+
+            <div class="card">
+                <h2>What is AzizApp?</h2>
+                <p>
+                    A lightweight Next.js clone — file-based routing, React hooks,
+                    server-side API routes, and ES module imports. Zero dependencies.
+                </p>
+            </div>
+
+            <div class="card">
+                <h2>File Structure</h2>
+                <pre style={{ background: '#282c34', color: '#61dafb', padding: '16px', borderRadius: '8px', fontSize: '13px' }}>
+{`app/
+  layout.js       ← root layout
+  page.js         ← /
+  about/
+    page.js       ← /about
+  blog/
+    [slug]/
+      page.js     ← /blog/:slug
+
+api/
+  users.js        ← /api/users
+
+components/
+  Navbar.js
+  Footer.js`}
+                </pre>
+            </div>
+
+            <button class="btn btn-primary" onClick={() => navigate('/')}>
+                ← Back Home
+            </button>
+        </div>
+    );
+}

package/template/app/layout.js

@@ -0,0 +1,23 @@
+/** @jsx h */
+import { h } from '/_framework/runtime.js';
+import Navbar from '/components/Navbar.js';
+import Footer from '/components/Footer.js';
+
+// Root layout — wraps every page (like Next.js app/layout.js)
+export default function Layout({ children }) {
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+            <Navbar />
+            <main style={{ flex: 1 }}>
+                {children}
+            </main>
+            <Footer />
+        </div>
+    );
+}
+
+// Optional: export metadata
+export const metadata = {
+    title: 'My App',
+    description: 'Built with AzizApp'
+};

package/template/app/page.js

@@ -0,0 +1,54 @@
+/** @jsx h */
+import { h } from '/_framework/runtime.js';
+import { navigate } from '/_framework/router.js';
+
+// Home page — route: /
+export default function Page() {
+    const [count, setCount] = useState(0);
+
+    return (
+        <div style={{ padding: '40px 32px', maxWidth: '900px', margin: '0 auto' }}>
+            <h1>Welcome Home 👋</h1>
+
+            <div class="card">
+                <h2>Counter</h2>
+                <p>useState works exactly like React!</p>
+                <div class="count-display">{count}</div>
+                <div class="counter-actions">
+                    <button class="btn btn-danger"  onClick={() => setCount(c => c - 1)}>−</button>
+                    <button class="btn btn-primary" onClick={() => setCount(c => c + 1)}>+</button>
+                    <button class="btn btn-grey"    onClick={() => setCount(0)}>Reset</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <h2>File-based Routing</h2>
+                <p>
+                    Each <code>page.js</code> inside <code>app/</code> is a route — just like Next.js.
+                    Create <code>app/about/page.js</code> and it becomes <code>/about</code>.
+                </p>
+                <div style={{ display: 'flex', gap: '12px' }}>
+                    <button class="btn btn-primary" onClick={() => navigate('/about')}>
+                        Go to About →
+                    </button>
+                    <button class="btn btn-primary" onClick={() => navigate('/test')}>
+                        Go to Test →
+                    </button>
+                </div>
+            </div>
+
+            <div class="card">
+                <h2>Import Anything</h2>
+                <p>
+                    Use <code>import</code> statements just like Next.js.
+                    The dev server resolves bare imports from <code>node_modules</code>.
+                </p>
+                <pre style={{ background: '#282c34', color: '#61dafb', padding: '16px', borderRadius: '8px', overflow: 'auto', fontSize: '13px' }}>
+{`import mongoose from 'mongoose';
+import connectDB from '@/lib/db';
+import User from '@/models/User';`}
+                </pre>
+            </div>
+        </div>
+    );
+}

package/template/app/test/page.js

@@ -0,0 +1,55 @@
+/** @jsx h */
+import { h } from '/_framework/runtime.js';
+
+// Test page — route: /test
+export default function Page() {
+    const [count, setCount]   = useState(0);
+    const [name, setName]     = useState('');
+    const [email, setEmail]   = useState('');
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        alert(`Name: ${name}\nEmail: ${email}\nCount: ${count}`);
+    };
+
+    return (
+        <div style={{ padding: '40px 32px', maxWidth: '900px', margin: '0 auto' }}>
+            <h1>Test Page 🧪</h1>
+
+            <div class="card">
+                <h2>useState</h2>
+                <div class="count-display">{count}</div>
+                <div class="counter-actions">
+                    <button class="btn btn-primary" onClick={() => setCount(c => c + 1)}>+</button>
+                    <button class="btn btn-danger"  onClick={() => setCount(0)}>Reset</button>
+                </div>
+            </div>
+
+            <div class="card">
+                <h2>Form</h2>
+                <form onSubmit={handleSubmit}>
+                    <input
+                        type="text"
+                        value={name}
+                        onInput={(e) => setName(e.target.value)}
+                        placeholder="Your name"
+                    />
+                    <input
+                        type="email"
+                        value={email}
+                        onInput={(e) => setEmail(e.target.value)}
+                        placeholder="Your email"
+                    />
+                    <button type="submit" class="btn btn-primary">Submit</button>
+                </form>
+            </div>
+
+            <div class="card">
+                <h2>State</h2>
+                <p>Name: <strong>{name || '—'}</strong></p>
+                <p>Email: <strong>{email || '—'}</strong></p>
+                <p>Count: <strong>{count}</strong></p>
+            </div>
+        </div>
+    );
+}

package/template/components/Footer.js

@@ -0,0 +1,10 @@
+/** @jsx h */
+import { h } from '/_framework/runtime.js';
+
+export default function Footer() {
+    return (
+        <footer>
+            <p>Made with ⚡ AzizApp</p>
+        </footer>
+    );
+}

package/template/components/Navbar.js

@@ -0,0 +1,30 @@
+/** @jsx h */
+import { h } from '/_framework/runtime.js';
+import { navigate, useRouter } from '/_framework/router.js';
+
+export default function Navbar() {
+    const { pathname } = useRouter();
+
+    const links = [
+        { href: '/',       label: 'Home'     },
+        { href: '/about',  label: 'About'    },
+        { href: '/test',   label: 'Test'     },
+        { href: '/api-demo', label: 'API Demo' },
+        { href: '/contact', label: 'Contact' },
+    ];
+
+    return (
+        <nav>
+            <span class="brand" onClick={() => navigate('/')}>⚡ AzizApp</span>
+            {links.map(({ href, label }) =>
+                <a
+                    href={href}
+                    class={pathname === href ? 'active' : ''}
+                    onClick={(e) => { e.preventDefault(); navigate(href); }}
+                >
+                    {label}
+                </a>
+            )}
+        </nav>
+    );
+}