create-aziz-app 2.0.12 → 2.0.14

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "create-aziz-app",
-  "version": "2.0.12",
+  "version": "2.0.14",
   "description": "A React-like framework with state management, routing, and API routes - Create apps with auto-import, live reload, and Next.js-like features",
   "keywords": [
     "react",
+    "full-stack",
     "framework",
     "cli",
     "create-app",
@@ -12,7 +13,7 @@
     "api-routes",
     "live-reload"
   ],
-  "license": "MIT",
+  "license": "AZIZ",
   "author": "Syed Muhammad Aziz Ahmed",
   "type": "commonjs",
   "files": [

package/template/README.md

@@ -1,6 +1,11 @@
-# Aziz App - React-like Framework
+# Aziz App - Lightweight Next.js Clone
 
-A simple, clean React-like framework with state management, routing, and API routes.
+A **lightweight Next.js clone** with React hooks, API routes, and file-based routing. All the benefits of Next.js, but **6x smaller** with **zero dependencies**!
+
+```
+Next.js: ~400KB + 20 dependencies
+Aziz App: ~50KB + 0 dependencies
+```
 
 ## 📁 Project Structure
 
@@ -96,33 +101,23 @@ function ProfilePage() {
 
 ## ✨ Features
 
-### Auto-Registration ⚡
-```javascript
-// Just name your function with "Page" suffix
-function AboutPage() {
-    return <div><h1>About</h1></div>;
-}
-// Automatically becomes route "#/about"
-```
-
-### State Management
+### React Hooks (Identical to Next.js!)
 ```javascript
 const [count, setCount] = useState(0);
 const [name, setName] = useState('');
-```
 
-### Routing
-```javascript
-// Auto-registers based on function name
-function HomePage() { }  // → #/home
+useEffect(() => {
+    console.log('Mounted!');
+}, []);
 
-// Or manually register for custom names
-registerPage("user-profile", UserProfilePage);
-
-// Navigate
-navigate("about");
+const memoized = useMemo(() => expensive(), [dep]);
+const callback = useCallback(() => action(), [dep]);
+const ref = useRef(null);
+const [state, dispatch] = useReducer(reducer, initial);
 ```
 
+**All hooks work exactly like React/Next.js!**
+
 ### API Routes
 ```javascript
 // api/todos.js - Runs on SERVER (Node.js)!
@@ -152,15 +147,14 @@ The CLI will automatically set up your chosen framework!
 
 ## 📚 Documentation
 
+- **[Next.js Comparison](docs/NEXTJS-COMPARISON.md)** - How it compares to Next.js
 - **[Getting Started](docs/GETTING-STARTED.md)** - Complete setup guide
 - **[Auto-Registration](docs/AUTO-REGISTRATION.md)** - How pages auto-register
 - **[API Routes](docs/API-ROUTES.md)** - Server-side API endpoints (like Next.js!)
-- **[API Guide](docs/API-GUIDE.md)** - Legacy API guide
 - **[Auto-Import](docs/AUTO-IMPORT.md)** - Auto-import system details
 - **[Dev Server](docs/DEV-SERVER.md)** - Live reload and development
 - **[How It Works](docs/HOW-IT-WORKS.md)** - System architecture
 - **[Troubleshooting](docs/TROUBLESHOOTING.md)** - Fix common issues
-- **[Quick Start](docs/QUICK-START.md)** - Quick examples
 
 ## 🛠️ Commands
 

package/template/api/createUser.js

@@ -0,0 +1,69 @@
+// API Route: /api/createUser
+// Next.js App Router style
+
+const { NextResponse } = require('../modules/next-response');
+
+// Mock database
+let users = [
+    { _id: '1', name: 'Aziz Ahmed', email: 'aziz@example.com', role: 'admin', phone: '123-456-7890' }
+];
+
+// POST handler
+async function POST(request) {
+    try {
+        // Parse request body
+        const body = await request.json();
+        const { name, email, password, role, phone } = body;
+
+        // Validation
+        if (!name || !email || !password) {
+            return NextResponse.json(
+                { 
+                    error: 'Validation failed',
+                    message: 'Name, email, and password are required'
+                },
+                { status: 400 }
+            );
+        }
+
+        // Check if email already exists
+        if (users.find(u => u.email === email)) {
+            return NextResponse.json(
+                { error: 'User with this email already exists' },
+                { status: 409 }
+            );
+        }
+
+        // Create new user
+        const newUser = {
+            _id: String(users.length + 1),
+            name,
+            email,
+            password, // In production, hash this with bcrypt!
+            role: role || 'user',
+            phone: phone || '',
+            createdAt: new Date().toISOString()
+        };
+
+        users.push(newUser);
+
+        // Return user data (without password)
+        const { password: _, ...userData } = newUser;
+
+        return NextResponse.json(
+            {
+                message: 'User created successfully',
+                user: userData
+            },
+            { status: 201 }
+        );
+    } catch (error) {
+        console.error('Create user error:', error);
+        return NextResponse.json(
+            { error: 'Failed to create user' },
+            { status: 500 }
+        );
+    }
+}
+
+module.exports = { POST };

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,13 +1,26 @@
 // API Route: /api/hello
-// This runs on the SERVER (Node.js), not in the browser!
+// Simple Next.js-style API route
 
-// Export the handler function (like Next.js)
-module.exports = async function handler(req, res) {
-    const name = req.query.name || 'World';
+export default async function handler(req, res) {
+    const { method, query } = req;
+
+    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';
     
     return res.status(200).json({
         message: `Hello, ${name}!`,
         timestamp: new Date().toISOString(),
-        method: req.method
+        method: method,
+        query: query
     });
-};
+}
+
+// CommonJS export for Node.js compatibility
+module.exports = handler;

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,60 +1,155 @@
 // API Route: /api/users
-// This runs on the SERVER (Node.js), not in the browser!
+// Next.js-style API route handler
 
-// Mock database (in real app, use a real database)
-const users = [
-    { id: 1, name: 'Aziz Ahmed', email: 'aziz@example.com' },
-    { id: 2, name: 'John Doe', email: 'john@example.com' },
-    { id: 3, name: 'Jane Smith', email: 'jane@example.com' }
+// 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() }
 ];
 
-// Export the handler function (like Next.js)
-module.exports = async function handler(req, res) {
-    // Handle different HTTP methods
-    switch (req.method) {
+// Next.js-style default export
+export default async function handler(req, res) {
+    const { method, query, body } = req;
+
+    switch (method) {
         case 'GET':
-            // Get all users or a specific user
-            if (req.query.id) {
-                const user = users.find(u => u.id === parseInt(req.query.id));
-                if (user) {
-                    return res.status(200).json(user);
-                } else {
-                    return res.status(404).json({ error: 'User not found' });
+            // 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 res.status(200).json(users);
+            
+            // Return all users
+            return res.status(200).json({
+                users,
+                total: users.length,
+                timestamp: new Date().toISOString()
+            });
 
         case 'POST':
-            // Create a new user
+            // 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
+                    }
+                });
+            }
+
+            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' 
+                });
+            }
+
+            // Create new user
             const newUser = {
-                id: users.length + 1,
-                name: req.body.name,
-                email: req.body.email
+                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(newUser);
+            
+            return res.status(201).json({
+                message: 'User created successfully',
+                user: newUser
+            });
 
         case 'PUT':
-            // Update a user
-            const userId = req.query.id || req.body.id;
+            // 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' 
+                });
+            }
+
             const userIndex = users.findIndex(u => u.id === parseInt(userId));
-            if (userIndex !== -1) {
-                users[userIndex] = { ...users[userIndex], ...req.body };
-                return res.status(200).json(users[userIndex]);
+            
+            if (userIndex === -1) {
+                return res.status(404).json({ 
+                    error: 'User not found',
+                    message: `No user found with id ${userId}` 
+                });
             }
-            return res.status(404).json({ error: 'User not found' });
+
+            // Update user
+            users[userIndex] = {
+                ...users[userIndex],
+                ...body,
+                id: users[userIndex].id, // Prevent ID change
+                updatedAt: new Date().toISOString()
+            };
+
+            return res.status(200).json({
+                message: 'User updated successfully',
+                user: users[userIndex]
+            });
 
         case 'DELETE':
-            // Delete a user
-            const deleteId = req.query.id;
+            // 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' 
+                });
+            }
+
             const deleteIndex = users.findIndex(u => u.id === parseInt(deleteId));
-            if (deleteIndex !== -1) {
-                const deleted = users.splice(deleteIndex, 1);
-                return res.status(200).json({ message: 'User deleted', user: deleted[0] });
+            
+            if (deleteIndex === -1) {
+                return res.status(404).json({ 
+                    error: 'User not found',
+                    message: `No user found with id ${deleteId}` 
+                });
             }
-            return res.status(404).json({ error: 'User not found' });
+
+            const deletedUser = users.splice(deleteIndex, 1)[0];
+
+            return res.status(200).json({
+                message: 'User deleted successfully',
+                user: deletedUser
+            });
 
         default:
-            return res.status(405).json({ error: 'Method not allowed' });
+            // 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']
+            });
     }
-};
+}
+
+// CommonJS export for Node.js compatibility
+module.exports = handler;

package/template/components/Navbar.jsx

@@ -5,12 +5,13 @@ function Navbar() {
 
     return (
         <nav>
-            <span class="brand" onClick={() => navigate("home")}>⚡ AzizJS</span>
-            <a href="#/home"     class={path === "home"     ? "active" : ""}>Home</a>
-            <a href="#/about"    class={path === "about"    ? "active" : ""}>About</a>
-            <a href="#/contact"  class={path === "contact"  ? "active" : ""}>Contact</a>
-            <a href="#/test"     class={path === "test"     ? "active" : ""}>Test</a>
-            <a href="#/api-demo" class={path === "api-demo" ? "active" : ""}>API Demo</a>
+            <span class="brand" onClick={() => navigate("home")}>⚡ AzizApp</span>
+            <a href="#/home"       class={path === "home"       ? "active" : ""}>Home</a>
+            <a href="#/about"      class={path === "about"      ? "active" : ""}>About</a>
+            <a href="#/test"       class={path === "test"       ? "active" : ""}>Test</a>
+            <a href="#/hooks-demo" class={path === "hooks-demo" ? "active" : ""}>Hooks</a>
+            <a href="#/api-demo"   class={path === "api-demo"   ? "active" : ""}>API Demo</a>
+            <a href="#/contact"    class={path === "contact"    ? "active" : ""}>Contact</a>
         </nav>
     );
 }