synthax higlighting on readme code snippets

README.md

@@ -1,68 +1,50 @@
-# AxiosFlow
-## Revolutionizing Frontend API Interaction
+AxiosFlow
+Revolutionizing Frontend API Interaction
 AxiosFlow is a powerful TypeScript library that automatically generates type-safe API functions, providing a seamless and intuitive way to interact with your backend services.
 
-## Key Features
-### Comprehensive Type Safety
- - Robust Error Prevention: Ensures type-safe API calls
- - Compile-Time Validation: Catches type mismatches before runtime
- - Enhanced Code Quality: Reduces potential errors in API interactions
-### Intelligent Type Generation
- - Automatic Function Creation:
- - Generates fully typed API client functions
- - Eliminates manual type definitions
- - Dramatically reduces boilerplate code
- - Compile-Time Type Safety:
- - Guarantees type consistency across API interactions
- - Provides comprehensive type inference
-### End-to-End Type Inference
- - Backend to Frontend Type Mapping:
- - Seamless type propagation
- - Catches potential type mismatches during development
-### Code Reliability:
- - Enhances type consistency
- - Minimizes runtime type-related errors
-## Core Capabilities
- - Automatic API function generation
- - Type-safe API interactions
- - Dynamic URL parameter support
- - Minimal configuration required
-
-
-
-# AxiosFlow API
-
+Key Features
+Comprehensive Type Safety
+Robust Error Prevention: Ensures type-safe API calls
+Compile-Time Validation: Catches type mismatches before runtime
+Enhanced Code Quality: Reduces potential errors in API interactions
+Intelligent Type Generation
+Automatic Function Creation:
+Generates fully typed API client functions
+Eliminates manual type definitions
+Dramatically reduces boilerplate code
+Compile-Time Type Safety:
+Guarantees type consistency across API interactions
+Provides comprehensive type inference
+End-to-End Type Inference
+Backend to Frontend Type Mapping:
+Seamless type propagation
+Catches potential type mismatches during development
+Code Reliability:
+Enhances type consistency
+Minimizes runtime type-related errors
+Core Capabilities
+Automatic API function generation
+Type-safe API interactions
+Dynamic URL parameter support
+Minimal configuration required
+AxiosFlow API
 AxiosFlow API is an TypeScript library, which has the potential to completely change the way we do backend API development. With intelligent routing, type-safe implementations, and automatic schema generation, it takes care of most of the complicated things while you build your robust web APIs.
 
-## Main Benefits
-
-- Type-Safe Routing: Compile-time type checking for API endpoints
-- Dynamic Route Generation: Automatically create routes with minimal configuration
-- Intelligent Schema Export: Generate type-safe API schemas for frontend consumption
-- Seamless Express Integration: Works perfectly with Express.js
-- Decorator-Based API Definition: Clean, intuitive API method declarations
-
-## Configuration
-
-### Backend setup
-
-#### Installation
-
-#### Install core dependencies
-```
+Main Benefits
+Type-Safe Routing: Compile-time type checking for API endpoints
+Dynamic Route Generation: Automatically create routes with minimal configuration
+Intelligent Schema Export: Generate type-safe API schemas for frontend consumption
+Seamless Express Integration: Works perfectly with Express.js
+Decorator-Based API Definition: Clean, intuitive API method declarations
+Configuration
+Backend setup
+Installation
+Install core dependencies
 npm install express cors dotenv axiosflow-api
-```
-
-#### Install TypeScript and types
-```
+Install TypeScript and types
 npm install -D typescript @types/express @types/cors ts-node
-```
-
-## Step-by-Step Setup
-
-### 1. Create Controller (userController.ts)
-
-```
+Step-by-Step Setup
+1. Create Controller (userController.ts)
 import { Request, Response } from 'express';
 
 // Interfaces for type safety
@@ -127,10 +109,7 @@ export class UserController {
     });
   }
 } 
-```
-### 2. Create User Routes (userRoutes.ts)
-
-```
+2. Create User Routes (userRoutes.ts)
 import { registerRoute, typeRef } from 'axiosflow-api';
 import { UserController, UserRequest, User } from '../controllers/userController';
 
@@ -174,10 +153,7 @@ export function registerUserRoutes() {
 export const controllerInstances = {
   UserController: userController,
 };
-```
-### 3. Create Router (router.ts)
-
-```
+3. Create Router (router.ts)
 import { Router } from 'express';
 import { createRoutes } from 'axiosflow-api';
 import { registerUserRoutes, controllerInstances } from './userRoutes';
@@ -191,10 +167,7 @@ registerUserRoutes();
 createRoutes(router, controllerInstances);
 
 export default router;
-```
-### 4. Create Server (server.ts)
-
-```
+4. Create Server (server.ts)
 import express from 'express';
 import cors from 'cors';
 import dotenv from 'dotenv';
@@ -231,10 +204,7 @@ app.use((err: Error, req: express.Request, res: express.Response, next: express.
 app.listen(PORT, () => {
   console.log(`Server is running on http://localhost:${PORT}`);
 });
-```
-### Advanced Configuration: Middleware and Interceptors
-
-```
+Advanced Configuration: Middleware and Interceptors
 import { Request, Response, NextFunction } from 'express';
 import { registerRoute, typeRef } from 'axiosflow-api';
 
@@ -282,46 +252,28 @@ export function registerUserRoutes() {
   );
 
 
-```
-## Client Setup 
+Client Setup
+Prerequisites
+Node.js (v16+) TypeScript Axios
 
-### Prerequisites
-
-Node.js (v16+)
-TypeScript
-Axios
-
-#### Global installation  via npm 
-
-``` npm install -g axiosflow
-```
-
-#### Verify Installation
-```
+Global installation via npm
+npm install -g axiosflow
+Verify Installation
 axiosflow --help 
-```
-#### Generate API Functions
-
-```
+Generate API Functions
 # Basic generation
 axiosflow generate
 
 # With specific options
 axiosflow generate -b http://localhost:3000 -o ./src/services
-```
-### 3. Generated Files Structure in project structure
-
-```
+3. Generated Files Structure in project structure
 src/services/
 ├── apiFunctions.ts     # Generated API functions
 ├── apiConfig.ts        # API endpoint configurations
 ├── types.ts            # Type definitions
 └── api-schema.json     # API schema documentation
-```
-## Usage in React/TypeScript Project
-### Fetch Users
-
-```
+Usage in React/TypeScript Project
+Fetch Users
 import { get_users } from './services/apiFunctions';
 
 async function UserList() {
@@ -332,10 +284,7 @@ async function UserList() {
     // Handle error
   }
 }
-```
-### Create User
-
-```
+Create User
 import { post_users } from './services/apiFunctions';
 
 async function createUser(name: string) {
@@ -347,4 +296,55 @@ async function createUser(name: string) {
   }
 }
 
-```
+or in components :
+
+import React, { useEffect, useState } from 'react';
+import { get_users, post_users, get_users_id } from '../services/apiFunctions';
+import { User, UserRequest } from '../services/types';
+
+const UserComponent: React.FC = () => {
+    const [users, setUsers] = useState<User[]>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+    const [error, setError] = useState<string | null>(null);
+
+
+    // Fetch the list of users from the API on component mount 
+    useEffect(() => {
+        const fetchUsers = async () => {
+            try {
+                setLoading(true);
+                setError(null);
+
+                console.log('Attempting to fetch users...');
+                const userList = await get_users();
+                
+                console.log('Fetched Users:', userList);
+                
+                if (userList.length > 0) {
+                    setUsers(userList);
+                } else {
+                    setError('No users found');
+                }
+            } catch (err) {
+                console.error('Fetch Users Error:', err);
+                
+                const errorMessage = err instanceof Error 
+                    ? err.message 
+                    : 'An unexpected error occurred';
+                
+                setError(errorMessage);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchUsers();
+    }, []);
+return (
+    <div> 
+    <h1>Users Lists</h1>
+    </div>
+);
+
+};
+Check the examples folder for implementation samples on both the client and server sides