diff --git a/README.md b/README.md index 8a9d4d0..f7361b5 100644 --- a/README.md +++ b/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([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(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 ( +
+

Users Lists

+
+); + +}; +Check the examples folder for implementation samples on both the client and server sides \ No newline at end of file