frontend-hamroun 1.2.51 → 1.2.53

package/README.md

@@ -1,29 +1,69 @@
-# Frontend Hamroun
+<div align="center">
 
-A lightweight full-stack JavaScript framework with Virtual DOM and hooks implementation inspired by modern frameworks.
+# 🚀 Frontend Hamroun
 
-![npm](https://img.shields.io/npm/v/frontend-hamroun)
-![npm bundle size](https://img.shields.io/bundlephobia/minzip/frontend-hamroun)
-![npm](https://img.shields.io/npm/dt/frontend-hamroun)
-![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)
+<img src="https://raw.githubusercontent.com/hamroun/frontend-hamroun/main/assets/logo.png" alt="Frontend Hamroun Logo" width="300" style="border-radius: 10px; margin: 20px 0;"/>
 
-## Installation
+A lightweight full-stack JavaScript framework with Virtual DOM and hooks implementation
+
+[![npm](https://img.shields.io/npm/v/frontend-hamroun?style=for-the-badge&color=blue)](https://www.npmjs.com/package/frontend-hamroun)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/frontend-hamroun?style=for-the-badge&color=green)](https://bundlephobia.com/result?p=frontend-hamroun)
+[![npm](https://img.shields.io/npm/dt/frontend-hamroun?style=for-the-badge&color=purple)](https://www.npmjs.com/package/frontend-hamroun)
+[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge)](LICENSE)
+
+<img src="https://via.placeholder.com/800x400?text=Frontend+Hamroun+Framework" alt="Framework Banner" width="800" style="border-radius: 10px;"/>
+
+</div>
+
+<br>
+
+## 📋 Contents
+
+- [Installation](#-installation)
+- [Quick Start](#-quick-start)
+- [Features](#-features)
+- [Client-side Features](#-client-side-features)
+- [Server-side Features](#-server-side-features)
+- [Server-Side Rendering](#-server-side-rendering)
+- [Performance Optimization](#-performance-optimization)
+- [CLI Tools](#-cli-tools)
+- [TypeScript Support](#-typescript-support)
+- [Browser Compatibility](#-browser-compatibility)
+- [Contributing](#-contributing)
+- [Documentation](#-documentation)
+
+<br>
+
+## 🔌 Installation
 
 ```bash
 npm install frontend-hamroun
 ```
 
-## Quick Start
+<div align="center">
+  
+### ✨ Quick Links
+
+[![Documentation](https://img.shields.io/badge/Documentation-Read_Docs-blue?style=for-the-badge)](https://github.com/hamroun/frontend-hamroun)
+[![Examples](https://img.shields.io/badge/Examples-View_Code-green?style=for-the-badge)](https://github.com/hamroun/frontend-hamroun/examples)
+[![API Reference](https://img.shields.io/badge/API-Reference-orange?style=for-the-badge)](https://github.com/hamroun/frontend-hamroun/docs/API.md)
+[![Discord](https://img.shields.io/badge/Discord-Join_Chat-7289DA?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/frontendhamroun)
+
+</div>
 
-Create a new project using:
+## 🚀 Quick Start
+
+Create a new project with a single command:
 
 ```bash
+# Using create-frontend-app
 npx create-frontend-app my-app
-# or
+
+# Or using the frontend-hamroun CLI
 npx frontend-hamroun create my-app
 ```
 
-Then:
+Then launch your new project:
 
 ```bash
 cd my-app
@@ -31,17 +71,92 @@ npm install
 npm run dev
 ```
 
-## Usage
+<div align="center">
+
+### 🎮 Interactive Demo
+
+[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?style=for-the-badge&logo=codesandbox)](https://codesandbox.io)
+[![Open in StackBlitz](https://img.shields.io/badge/Open%20in-StackBlitz-orange?style=for-the-badge&logo=stackblitz)](https://stackblitz.com)
+
+</div>
+
+## 🎯 Features
+
+<div class="features-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;">
+
+<div class="feature-card" style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
+  <h3>🔍 Lightweight Core</h3>
+  <p><strong>&lt;5KB</strong> gzipped for essential runtime</p>
+</div>
+
+<div class="feature-card" style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
+  <h3>⚡ Full-Stack Solution</h3>
+  <p>Client and server capabilities in one package</p>
+</div>
+
+<div class="feature-card" style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
+  <h3>🔄 Virtual DOM</h3>
+  <p>Efficient rendering and diffing algorithm</p>
+</div>
+
+<div class="feature-card" style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
+  <h3>🪝 Hooks API</h3>
+  <p>Complete hooks system for state management</p>
+</div>
+
+<div class="feature-card" style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
+  <h3>🌐 Server-Side Rendering</h3>
+  <p>Optimized SSR with hydration</p>
+</div>
+
+<div class="feature-card" style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
+  <h3>🔐 Authentication</h3>
+  <p>Built-in JWT authentication system</p>
+</div>
+
+<div class="feature-card" style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
+  <h3>💾 Database Integration</h3>
+  <p>Support for MongoDB, MySQL, PostgreSQL</p>
+</div>
+
+<div class="feature-card" style="background: #f8f9fa; border-radius: 8px; padding: 20px;">
+  <h3>🧩 TypeScript Support</h3>
+  <p>Full type definitions included</p>
+</div>
+
+</div>
+
+<br>
+
+## 📊 Framework Comparison
+
+| Feature | Frontend Hamroun | React | Vue | Angular |
+|---------|------------------|-------|-----|---------|
+| Bundle Size | < 5KB | 42KB | 33KB | 65KB |
+| Virtual DOM | ✅ | ✅ | ✅ | ❌ |
+| Hooks API | ✅ | ✅ | ⚠️ | ❌ |
+| Built-in SSR | ✅ | ❌ | ⚠️ | ✅ |
+| Built-in API Server | ✅ | ❌ | ❌ | ❌ |
+| DB Integration | ✅ | ❌ | ❌ | ❌ |
+| Learning Curve | Low | Medium | Low | High |
+
+<br>
+
+## 💻 Basic Usage
 
 ```jsx
 import { render, useState } from 'frontend-hamroun';
 
 function App() {
   const [count, setCount] = useState(0);
+  
   return (
-    <div>
-      <h1>Count: {count}</h1>
-      <button onClick={() => setCount(count + 1)}>Increment</button>
+    <div className="app">
+      <h1>Frontend Hamroun Demo</h1>
+      <p>Count: {count}</p>
+      <button onClick={() => setCount(count + 1)}>
+        Increment
+      </button>
     </div>
   );
 }
@@ -49,116 +164,161 @@ function App() {
 render(<App />, document.getElementById('root'));
 ```
 
-## Features
+<div align="center">
+  <img src="https://via.placeholder.com/600x300?text=Application+Screenshot" alt="Application Screenshot" width="600" style="border-radius: 8px;"/>
+</div>
 
-- Lightweight full-stack framework (<5KB gzipped core)
-- Virtual DOM with efficient diffing algorithm
-- Hooks API (useState, useEffect, useMemo, useRef)
-- Context API for state management
-- Server-Side Rendering
-- Built-in API server with Express
-- Database integration (MongoDB, MySQL, PostgreSQL)
-- Authentication with JWT
-- Error Boundaries
-- JSX support
-- TypeScript support
-- Interactive CLI for project scaffolding
+## 🧩 Client-side Features
 
-## Client-side Features
+### Component Development
 
-### Hooks
+Frontend Hamroun provides a React-like development experience:
 
-#### useState
-Manages component state.
+```jsx
+import { useState, useEffect } from 'frontend-hamroun';
 
+function Counter() {
+  const [count, setCount] = useState(0);
+  
+  useEffect(() => {
+    document.title = `Count: ${count}`;
+    return () => document.title = 'App';
+  }, [count]);
+  
+  return (
+    <div className="counter">
+      <h2>Counter: {count}</h2>
+      <div className="buttons">
+        <button onClick={() => setCount(count + 1)}>+</button>
+        <button onClick={() => setCount(count - 1)}>-</button>
+      </div>
+    </div>
+  );
+}
+```
+
+<details>
+<summary><b>🔍 View Hooks API Reference</b></summary>
+
+### Hooks System
+
+#### 🔄 useState
 ```jsx
 const [count, setCount] = useState(0);
-setCount(count + 1); // Direct value
-setCount(prev => prev + 1); // Using callback
+setCount(count + 1); // Direct update
+setCount(prev => prev + 1); // Functional update
 ```
 
-#### useEffect
-Handles side effects in components.
-
+#### 🔄 useEffect
 ```jsx
 useEffect(() => {
-  document.title = `Count: ${count}`;
+  // Effect logic
+  const subscription = api.subscribe();
   
   return () => {
-    // Cleanup code runs before next effect or unmount
-    console.log('Cleanup effect');
+    // Cleanup logic
+    subscription.unsubscribe();
   };
-}, [count]); // Only re-run when count changes
+}, [dependency]); // Dependency array
 ```
 
-#### useMemo
-Memoizes expensive computations.
-
+#### 🔄 useMemo
 ```jsx
-const doubled = useMemo(() => {
-  console.log('Computing doubled value');
-  return count * 2;
-}, [count]);
+const expensiveValue = useMemo(() => {
+  return computeExpensiveValue(a, b);
+}, [a, b]); // Recomputes only when a or b changes
 ```
 
-#### useRef
-Creates a mutable reference that persists across renders.
-
+#### 🔄 useRef
 ```jsx
-const renderCount = useRef(0);
-renderCount.current += 1; // Update without triggering re-render
-```
+const inputRef = useRef(null);
+
+// Access the DOM element directly
+useEffect(() => {
+  inputRef.current.focus();
+}, []);
 
-#### useErrorBoundary
-Handles component errors.
+return <input ref={inputRef} />;
+```
 
+#### 🔄 useErrorBoundary
 ```jsx
 const [error, resetError] = useErrorBoundary();
 
 if (error) {
   return (
-    <div>
-      <h1>Something went wrong!</h1>
+    <div className="error-boundary">
+      <h2>Something went wrong</h2>
+      <p>{error.message}</p>
       <button onClick={resetError}>Try again</button>
     </div>
   );
 }
 ```
 
-### Context API
+</details>
+
+### 🔄 Context API
+
+Share state across your component tree:
 
-Share state across components without prop drilling.
+<div class="code-with-diagram" style="display: flex; align-items: flex-start; gap: 20px;">
 
 ```jsx
 // Create context
 const ThemeContext = createContext('light');
 
-// Provider component
+// Provider
 function App() {
   const [theme, setTheme] = useState('light');
   
   return (
     <ThemeContext.Provider value={theme}>
-      <Button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
-        Toggle Theme
-      </Button>
-      <ThemedComponent />
+      <Header />
+      <Main />
+      <button onClick={() => setTheme(
+        theme === 'light' ? 'dark' : 'light'
+      )}>
+        Toggle theme
+      </button>
     </ThemeContext.Provider>
   );
 }
 
-// Consumer component
-function ThemedComponent() {
+// Consumer
+function Header() {
   const theme = useContext(ThemeContext);
-  return <div style={{ background: theme === 'dark' ? '#333' : '#fff' }}>
-    Current theme: {theme}
-  </div>;
+  return (
+    <header className={theme}>
+      <h1>My App</h1>
+    </header>
+  );
 }
 ```
 
-## Server-Side Features
-
-### Server Setup
+<div class="diagram" style="background: #f8f9fa; border-radius: 8px; padding: 15px; width: 300px;">
+  <strong>Context Flow Diagram</strong><br>
+  <pre style="background: #f0f0f0; padding: 10px; margin-top: 10px; border-radius: 5px;">
+App (Provider)
+    │
+    ├─► Header (Consumer)
+    │     Uses theme value
+    │
+    ├─► Main
+    │     │
+    │     └─► Article (Consumer)
+    │           Uses theme value
+    │
+    └─► Footer (Consumer)
+          Uses theme value
+  </pre>
+</div>
+
+</div>
+
+## 🖥️ Server-Side Features
+
+### Express Server Integration
 
 ```js
 import { server } from 'frontend-hamroun/server';
@@ -169,7 +329,7 @@ const app = await server.createServer({
   pagesDir: './pages',
   staticDir: './public',
   db: {
-    url: process.env.DB_URL,
+    url: process.env.DATABASE_URL,
     type: 'mongodb' // or 'mysql', 'postgres'
   },
   auth: {
@@ -179,101 +339,482 @@ const app = await server.createServer({
 });
 
 await app.start();
+console.log('Server running at http://localhost:3000');
 ```
 
+<div align="center">
+  <img src="https://via.placeholder.com/600x300?text=Server+Architecture+Diagram" alt="Server Architecture" width="600" style="border-radius: 8px;"/>
+</div>
+
 ### API Routes
 
-Create API endpoints in your `apiDir` folder:
+Create API endpoints easily with file-based routing:
+
+<div class="file-structure" style="display: flex; gap: 20px;">
+
+<div class="code-example" style="flex: 1;">
 
 ```js
-// api/users.js
+// api/users.js - Automatically mapped to /api/users
 export async function get(req, res) {
   const users = await req.db.collection('users').find().toArray();
   res.json(users);
 }
 
 export async function post(req, res) {
-  const user = req.body;
-  const result = await req.db.collection('users').insertOne(user);
+  const { name, email } = req.body;
+  
+  if (!name || !email) {
+    return res.status(400).json({ 
+      error: 'Name and email are required' 
+    });
+  }
+  
+  const result = await req.db.collection('users').insertOne({
+    name, 
+    email
+  });
+  
   res.status(201).json(result);
 }
 ```
 
-## Server-Side Rendering
+</div>
+
+<div class="file-structure-diagram" style="background: #f8f9fa; border-radius: 8px; padding: 15px; min-width: 250px;">
+  <strong>File-based Routing</strong><br>
+  <pre style="background: #f0f0f0; padding: 10px; margin-top: 10px; border-radius: 5px;">
+api/
+├── users.js
+│   ├── get() → GET /api/users
+│   └── post() → POST /api/users
+├── posts/
+│   ├── index.js
+│   │   └── get() → GET /api/posts
+│   └── [id].js
+│       └── get() → GET /api/posts/:id
+└── auth/
+    ├── login.js
+    │   └── post() → POST /api/auth/login
+    └── register.js
+        └── post() → POST /api/auth/register
+  </pre>
+</div>
+
+</div>
+
+<details>
+<summary><b>🔍 View Database Integration Examples</b></summary>
+
+### 💾 Database Integration
+
+Access your database directly in API routes:
+
+<div class="tabs">
+<div class="tab" id="mongodb">
+
+#### MongoDB Example
+
+```js
+// MongoDB example
+export async function get(req, res) {
+  const { id } = req.params;
+  const user = await req.db.collection('users').findOne({
+    _id: new ObjectId(id)
+  });
+  
+  if (!user) {
+    return res.status(404).json({ error: 'User not found' });
+  }
+  
+  res.json(user);
+}
+```
+
+</div>
+<div class="tab" id="mysql">
+
+#### MySQL Example
+
+```js
+// MySQL example 
+export async function get(req, res) {
+  const [users] = await req.db.execute(
+    'SELECT * FROM users WHERE active = ?', 
+    [true]
+  );
+  res.json(users);
+}
+```
+
+</div>
+<div class="tab" id="postgres">
+
+#### PostgreSQL Example
+
+```js
+// PostgreSQL example
+export async function get(req, res) {
+  const result = await req.db.query(
+    'SELECT * FROM users WHERE role = $1', 
+    ['admin']
+  );
+  res.json(result.rows);
+}
+```
+
+</div>
+</div>
+
+</details>
+
+<details>
+<summary><b>🔍 View Authentication Example</b></summary>
+
+### 🔐 Authentication
 
-Frontend Hamroun supports server-side rendering with hydration:
+Built-in JWT authentication:
+
+```js
+// api/auth/login.js
+export async function post(req, res) {
+  const { username, password } = req.body;
+  const user = await req.db.collection('users').findOne({ username });
+  
+  if (!user || !await req.auth.comparePasswords(password, user.password)) {
+    return res.status(401).json({ error: 'Invalid credentials' });
+  }
+  
+  const token = req.auth.generateToken(user);
+  res.json({ 
+    token, 
+    user: { id: user._id, username: user.username } 
+  });
+}
+
+// Protected route
+// api/profile.js
+export async function get(req, res) {
+  // req.auth.requireAuth middleware automatically added
+  // req.user contains the authenticated user
+  res.json(req.user);
+}
+```
+
+</details>
+
+<details>
+<summary><b>🔍 View Middleware Example</b></summary>
+
+### Middleware Support
+
+Add custom middleware to your routes:
+
+```js
+// middleware/logger.js
+export default function logger(req, res, next) {
+  console.log(`${req.method} ${req.path}`);
+  next();
+}
+
+// server.js
+import logger from './middleware/logger';
+
+const app = await server.createServer({
+  // ...other options
+  middleware: [logger]
+});
+```
+
+</details>
+
+## 🌐 Server-Side Rendering
+
+Frontend Hamroun provides seamless SSR with hydration:
+
+<div class="ssr-diagram-container" style="display: flex; gap: 20px; margin-bottom: 20px;">
+
+<div class="code-example" style="flex: 1;">
 
 ```jsx
-// Server-side
+// server.js
 import { renderToString } from 'frontend-hamroun/ssr';
+import App from './App';
+
+app.get('*', async (req, res) => {
+  const html = await renderToString(<App url={req.url} />);
+  
+  res.send(`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <title>My SSR App</title>
+        <link rel="stylesheet" href="/styles.css">
+      </head>
+      <body>
+        <div id="root">${html}</div>
+        <script src="/client.js"></script>
+      </body>
+    </html>
+  `);
+});
 
-const html = await renderToString(<App />);
-res.send(`
-  <!DOCTYPE html>
-  <html>
-    <head><title>My App</title></head>
-    <body>
-      <div id="root">${html}</div>
-      <script src="/client.js"></script>
-    </body>
-  </html>
-`);
-
-// Client-side
+// client.js
 import { hydrate } from 'frontend-hamroun';
+import App from './App';
 
-hydrate(<App />, document.getElementById('root'));
+hydrate(<App url={window.location.pathname} />, 
+  document.getElementById('root'));
 ```
 
-## Performance Optimization
+</div>
+
+<div class="ssr-flow-diagram" style="background: #f8f9fa; border-radius: 8px; padding: 15px; min-width: 250px;">
+  <strong>SSR Flow</strong><br>
+  <pre style="background: #f0f0f0; padding: 10px; margin-top: 10px; border-radius: 5px;">
+1. HTTP Request
+   ↓
+2. Server renders React to HTML
+   ↓
+3. HTML sent to browser
+   ↓
+4. Browser displays HTML
+   ↓
+5. JavaScript loads
+   ↓
+6. Hydration attaches event
+   handlers to existing DOM
+   ↓
+7. App becomes interactive
+  </pre>
+</div>
+
+</div>
+
+<div align="center">
+  <img src="https://via.placeholder.com/700x200?text=SSR+vs+CSR+Performance+Comparison" alt="SSR Performance" width="700" style="border-radius: 8px;"/>
+</div>
+
+## ⚡ Performance Optimization
 
 ### Batch Updates
-Group multiple state updates together to prevent unnecessary re-renders.
+
+Group state updates for better performance:
 
 ```jsx
 import { batchUpdates } from 'frontend-hamroun';
 
-batchUpdates(() => {
-  setCount(count + 1);
-  setName('John');
-  setActive(true);
-});
+function handleSubmit() {
+  batchUpdates(() => {
+    setSubmitting(true);
+    setFormData({ name: '', email: '' });
+    setErrors({});
+    setSubmitCount(c => c + 1);
+  });
+}
+```
+
+### Virtual DOM Diffing
+
+The framework uses an efficient diffing algorithm to minimize DOM operations:
+
+<div class="diffing-container" style="display: flex; gap: 20px; margin-bottom: 20px;">
+
+<div class="code-example" style="flex: 1;">
+
+```jsx
+// This only updates the changed parts of the DOM
+function Counter() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <h1>Counter</h1>
+      <p>Count: {count}</p> {/* Only this text node updates */}
+      <button onClick={() => setCount(count + 1)}>
+        Increment
+      </button>
+    </div>
+  );
+}
 ```
 
-## Project Templates
+</div>
+
+<div class="diffing-diagram" style="background: #f8f9fa; border-radius: 8px; padding: 15px; min-width: 250px;">
+  <strong>Diffing Process</strong><br>
+  <pre style="background: #f0f0f0; padding: 10px; margin-top: 10px; border-radius: 5px;">
+Old Virtual DOM
+    ↓
+New Virtual DOM
+    ↓
+Compare Trees
+    ↓
+Identify Differences
+    ↓
+Update Only Changed
+DOM Elements
+  </pre>
+</div>
 
-The framework comes with several project templates:
+</div>
 
-1. **Basic App**: Simple client-side application
-2. **SSR Template**: Server-side rendering with hydration
-3. **Fullstack App**: Complete solution with API routes, authentication, and database integration
+<div align="center">
+  <img src="https://via.placeholder.com/700x200?text=Performance+Benchmark+Graph" alt="Performance Benchmark" width="700" style="border-radius: 8px;"/>
+</div>
 
-## CLI Tools
+## 🛠️ CLI Tools
 
-Frontend Hamroun comes with a powerful CLI for project management:
+Frontend Hamroun includes powerful CLI tools for development:
+
+<div class="cli-examples" style="background: #f8f9fa; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
 
 ```bash
-# Create a new project
+# Create a new project with interactive template selection
 npx frontend-hamroun create my-app
 
-# Add a new component
+# Generate a new component with customizable features
 npx frontend-hamroun add:component Button
 
-# Add a new page
-npx frontend-hamroun add:page home
-
-# Add a new API route
-npx frontend-hamroun add:api users
-```
-
-## Browser Compatibility
+# Create a new page component
+npx frontend-hamroun add:page Home
 
-Frontend Hamroun works in all modern browsers (Chrome, Firefox, Safari, Edge).
+# Generate an API route
+npx frontend-hamroun add:api users --methods=get,post,put,delete
 
-## License
+# View development tools and tips
+npx frontend-hamroun dev:tools
+```
 
-MIT © Hamroun
+</div>
+
+### 📦 Project Templates
+
+<div class="templates-container" style="display: flex; gap: 20px; overflow-x: auto; padding-bottom: 15px; margin-bottom: 20px;">
+
+<div class="template-card" style="background: #f0f5ff; border-radius: 8px; padding: 15px; min-width: 250px; border-left: 5px solid #4285f4;">
+  <h3>🚀 Basic App</h3>
+  <p>Client-side SPA with essential features</p>
+  <ul>
+    <li>Quick setup</li>
+    <li>No build step in development</li>
+    <li>Focused on simplicity</li>
+    <li>Perfect for learning</li>
+  </ul>
+</div>
+
+<div class="template-card" style="background: #f0fff4; border-radius: 8px; padding: 15px; min-width: 250px; border-left: 5px solid #34a853;">
+  <h3>🌐 SSR Template</h3>
+  <p>Server-side rendering with hydration</p>
+  <ul>
+    <li>SEO-friendly</li>
+    <li>Fast initial load</li>
+    <li>Express server included</li>
+    <li>Optimized for content sites</li>
+  </ul>
+</div>
+
+<div class="template-card" style="background: #fff8e1; border-radius: 8px; padding: 15px; min-width: 250px; border-left: 5px solid #fbbc04;">
+  <h3>⚡ Fullstack App</h3>
+  <p>Complete solution with API, authentication, and database</p>
+  <ul>
+    <li>API routes included</li>
+    <li>Database integration</li>
+    <li>Authentication ready</li>
+    <li>Production-ready setup</li>
+  </ul>
+</div>
+
+</div>
+
+## 📘 TypeScript Support
+
+Frontend Hamroun is built with TypeScript and includes full type definitions:
+
+```tsx
+import { useState } from 'frontend-hamroun';
+
+interface UserProps {
+  id: number;
+  name: string;
+  email: string;
+}
 
-## Contributing
+function UserProfile({ id, name, email }: UserProps) {
+  const [isEditing, setEditing] = useState(false);
+  
+  return (
+    <div className="user-profile">
+      <h2>{name}</h2>
+      <p>{email}</p>
+      <button onClick={() => setEditing(!isEditing)}>
+        {isEditing ? 'Cancel' : 'Edit'}
+      </button>
+    </div>
+  );
+}
+```
 
-Contributions are welcome! Please feel free to submit a Pull Request.
+## 🌍 Browser Compatibility
+
+Frontend Hamroun works in all modern browsers:
+
+<div class="browser-compatibility" style="display: flex; justify-content: space-between; margin: 20px 0;">
+  <div style="text-align: center; padding: 10px;">
+    <div style="font-size: 2em;">�Chrome</div>
+    <div>Latest 2 versions</div>
+  </div>
+  <div style="text-align: center; padding: 10px;">
+    <div style="font-size: 2em;">🦊</div>
+    <div>Firefox</div>
+    <div>Latest 2 versions</div>
+  </div>
+  <div style="text-align: center; padding: 10px;">
+    <div style="font-size: 2em;">🧭</div>
+    <div>Safari</div>
+    <div>Latest 2 versions</div>
+  </div>
+  <div style="text-align: center; padding: 10px;">
+    <div style="font-size: 2em;">🌐</div>
+    <div>Edge</div>
+    <div>Latest 2 versions</div>
+  </div>
+  <div style="text-align: center; padding: 10px;">
+    <div style="font-size: 2em;">🏛️</div>
+    <div>IE11</div>
+    <div>With polyfills</div>
+  </div>
+</div>
+
+## 👥 Contributing
+
+Contributions are welcome! See [CONTRIBUTING.md](./docs/CONTRIBUTING.md) for details.
+
+<div class="contribution-workflow" style="background: #f8f9fa; border-radius: 8px; padding: 20px; margin: 20px 0;">
+  <h3>Contribution Workflow</h3>
+  <ol>
+    <li>Fork the repository</li>
+    <li>Create your feature branch: <code>git checkout -b feature/amazing-feature</code></li>
+    <li>Commit your changes: <code>git commit -m 'Add amazing feature'</code></li>
+    <li>Push to the branch: <code>git push origin feature/amazing-feature</code></li>
+    <li>Open a Pull Request</li>
+  </ol>
+</div>
+
+## 📚 Documentation
+
+For complete documentation, visit [our documentation site](https://github.com/hamroun/frontend-hamroun).
+
+<div align="center">
+
+<div style="margin-top: 40px;">
+  <h3>💖 Support the Project</h3>
+
+  [![GitHub Sponsors](https://img.shields.io/badge/Sponsor-Hamroun-pink?style=for-the-badge&logo=github-sponsors)](https://github.com/sponsors/hamroun)
+  [![Star on GitHub](https://img.shields.io/badge/Star-on_GitHub-yellow?style=for-the-badge&logo=github)](https://github.com/hamroun/frontend-hamroun)
+</div>
+
+<div style="margin-top: 30px;">
+  <p>MIT © Hamroun</p>
+</div>
+
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend-hamroun",
-  "version": "1.2.51",
+  "version": "1.2.53",
   "description": "A lightweight full-stack JavaScript framework",
   "type": "module",
   "main": "./dist/index.js",