Aziz App - React-like Framework

A simple, clean React-like framework with state management, routing, and API routes.

📁 Project Structure

template/
├── app.html              # Main HTML file
├── app.config.js         # Auto-generated config (don't edit manually)
│
├── modules/              # Core system modules
│   ├── router.js         # Routing & rendering engine
│   ├── state.js          # State management (useState)
│   ├── api.js            # API route system
│   └── README.md         # Module documentation
│
├── scripts/              # Build & dev tools
│   ├── dev-server.js     # Development server with auto-import
│   ├── generate-imports.js  # Import generator
│   └── build.js          # Build script
│
├── docs/                 # Documentation
│   ├── API-GUIDE.md      # API routes guide
│   ├── AUTO-IMPORT.md    # Auto-import system docs
│   ├── GETTING-STARTED.md  # Getting started guide
│   └── QUICK-START.md    # Quick start guide
│
├── api/                  # API route handlers
│   ├── hello.js          # Example: /api/hello
│   └── users.js          # Example: /api/users
│
├── components/           # Reusable UI components
│   ├── Navbar.jsx
│   ├── Footer.jsx
│   └── Counter.jsx
│
└── pages/                # Page components (routes)
    ├── Home.jsx          # Route: #/home
    ├── About.jsx         # Route: #/about
    ├── Contact.jsx       # Route: #/contact
    ├── test.jsx          # Route: #/test
    └── ApiDemo.jsx       # Route: #/api-demo

🚀 Quick Start

1. Start the Dev Server

npm run dev

This will:

• Start HTTP server on http://localhost:3000/
• Watch for file changes in api/, components/, and pages/
• Auto-generate imports when you create new files
• Auto-reload on changes

2. Open Your Browser

http://localhost:3000/

3. Create New Files

Just create files in the appropriate folders - they're automatically imported!

Create a new page:

// pages/Profile.jsx
/** @jsx h */

// Auto-registers as "#/profile" - no registerPage() needed!
function ProfilePage() {
    const [name, setName] = useState('');
    
    return (
        <div>
            <h1>Profile</h1>
            <input 
                value={name}
                onInput={(e) => setName(e.target.value)}
                placeholder="Your name"
            />
            <p>Hello, {name}!</p>
        </div>
    );
}

Navigate to: http://localhost:3000/#/profile

✨ That's it! No registerPage() call needed. Just name your function YourNamePage() and it auto-registers!

✨ Features

Auto-Registration ⚡

// Just name your function with "Page" suffix
function AboutPage() {
    return <div><h1>About</h1></div>;
}
// Automatically becomes route "#/about"

State Management

const [count, setCount] = useState(0);
const [name, setName] = useState('');

Routing

// Auto-registers based on function name
function HomePage() { }  // → #/home

// Or manually register for custom names
registerPage("user-profile", UserProfilePage);

// Navigate
navigate("about");

API Routes

// api/todos.js
registerApiRoute('todos', async (req, res) => {
    return res.status(200).json({ todos: [] });
});

// Use in components
const response = await fetchApi('/api/todos');
const data = await response.json();

CSS Frameworks

Choose your preferred styling:

• Custom CSS - Built-in responsive styles
• Bootstrap 5 - Popular component framework
• Tailwind CSS - Utility-first framework

The CLI will automatically set up your chosen framework!

Auto-Import

• Create files in pages/, components/, or api/
• Dev server automatically detects them
• Refresh browser to see changes

📚 Documentation

• Getting Started - Complete setup guide
• Auto-Registration - How pages auto-register
• API Guide - How to create API routes
• Auto-Import - Auto-import system details
• Dev Server - Live reload and development
• Troubleshooting - Fix common issues
• Quick Start - Quick examples

🛠️ Commands

npm run dev      # Start dev server with auto-import
npm run build    # Generate imports manually

🎯 Key Concepts

Pages

• Files in pages/ become routes
• Name functions with "Page" suffix (e.g., AboutPage)
• Auto-registers as route (e.g., #/about)
• Optional: Use registerPage("custom-name", Component) for custom routes

Components

• Reusable UI components
• Use JSX syntax with /** @jsx h */
• Import automatically

API Routes

• Files in api/ become API endpoints
• Use registerApiRoute("path", handler)
• Access via fetchApi('/api/path')

State

• Use useState(initialValue) like React
• Returns [value, setValue]
• Triggers re-render on change

🔥 Hot Tips

1. Dev server must be running for auto-import to work
2. Refresh browser after creating new files
3. Use /** @jsx h */ at the top of JSX files
4. Route names are case-sensitive - #/home not #/Home

📦 What's in Each Folder

• modules/ - Core framework code (don't modify unless extending)
• scripts/ - Build tools (don't modify)
• docs/ - Documentation (read these!)
• api/ - Your API routes (add your endpoints here)
• components/ - Your components (add reusable UI here)
• pages/ - Your pages (add new pages here)

🎉 You're Ready!

Start the dev server and start building:

npm run dev

Then open http://localhost:3000/ and start creating!