Dynamic API Builder Service

A comprehensive, local-first API mocking service that allows you to dynamically create, configure, and serve API endpoints with a modern, cyberpunk-themed UI.

🚀 Features

• Dynamic Endpoint Creation: Create GET, POST, PUT, DELETE, PATCH endpoints on the fly.
• Visual JSON Builder: Construct complex JSON responses without writing raw JSON, or edit raw JSON directly.
• Latency Simulation: Simulate slow network conditions (0-5000ms delay) per endpoint.
• Status Code Control: Force endpoints to return specific status codes (e.g., 404, 500) for error testing.
• File Manager: Drag-and-drop file uploads (images, documents) served statically.
• Request Logging: Real-time inspection of incoming requests (headers, query params, body) for debugging.
• Network Access: Access the API and UI from any device on your local network (mobile, tablet, etc.).

🛠️ Tech Stack

• Backend: Node.js, Express, LowDB (JSON database), Multer (File uploads)
• Frontend: React (Vite), TailwindCSS v3, Framer Motion, Axios, Lucide React

📦 Installation

Clone the repository or download the source code.

1. Backend Setup

cd server
npm install

2. Frontend Setup

cd ui
npm install

🏃‍♂️ Usage

You need to run both the server and the UI.

Start the API Server

The server runs on port 3000.

cd server
node index.js

Output: Server running on http://localhost:3000 and http://0.0.0.0:3000

Start the UI

The UI runs on port 5173.

cd ui
npm run dev

Output: Network: http://<YOUR_IP>:5173/

📱 Accessing from Mobile/Other Devices

1. Make sure your computer and mobile device are on the same Wi-Fi network.
2. Start both the server and UI as shown above.
3. Check the npm run dev output for the Network URL (e.g., http://192.168.1.15:5173).
4. Open that URL in your mobile browser.
5. Note: Windows Firewall rules have been added for ports 3000 and 5173. If you still can't connect, ensure your network profile is set to "Private" or check your firewall settings.

📝 API Endpoints

The service exposes a few management APIs you can use programmatically if needed:

• GET /_manage/endpoints: List all endpoints
• GET /_manage/files: List uploaded files
• GET /_manage/logs: Get request logs
• POST /_manage/upload: Upload a file (multipart/form-data, field: file)

All other paths (e.g., /api/users) will be matched against your dynamically defined endpoints.

📂 Project Structure

Simple_API_Service/
├── server/             # Express Backend
│   ├── uploads/        # Stored uploaded files
│   ├── db.json         # LowDB database file (Endpoints & Logs)
│   └── index.js        # Main server entry
├── ui/                 # React Frontend
│   ├── src/            # Source code
│   └── vite.config.ts  # Vite configuration
└── README.md           # This file

🛡️ Troubleshooting

• 500 Internal Server Error? Check the server terminal for error logs.
• Can't connect from mobile? Verify the IP address is correct and Windows Firewall is not blocking Node.js.
• UI Blank? Check the browser console (F12) for errors.

---

Built with ❤️ by your AI Agent.