# MockEngine 🚀
**A Dynamic REST API Mocking Platform for Frontend Developers**
## 📖 Overview
MockEngine is a full-stack SaaS tool built to unblock frontend developers. Instead of waiting for backend teams to build APIs, developers can visually design custom database schemas, set data types, and instantly generate live, production-ready REST API endpoints.
Powered by **Faker.js**, the engine generates dynamic, realistic JSON data on the fly. It also allows developers to simulate network latency and force HTTP error codes to perfectly test their UI loading states and error boundaries.
## ✨ Key Features
* **Visual Schema Builder:** Dynamically add fields and select data types (UUID, Full Name, Email, Date, Boolean, etc.) without writing code.
* **Instant Live URLs:** Hit "Save" and immediately get a live endpoint (`/api/mock/:userId/:projectId/*`) that can be fetched via `axios` or `fetch`.
* **Latency & Error Simulation:** Configure specific endpoints to artificially delay responses (e.g., 2000ms) or force specific HTTP error codes (e.g., 500, 404) for robust UI testing.
* **Project Management:** Group endpoints into separate projects. Implemented using **Cascading Deletes** (deleting a project automatically cleans up orphaned endpoints in the database).
* **Optimistic UI Updates:** Fast and seamless frontend experience using React state management for CRUD operations without unnecessary page reloads.
* **Secure Authentication:** JWT-based user authentication.
## 🛠️ Tech Stack
**Frontend:**
* React.js (Vite)
* Tailwind CSS
* React Router DOM
* Axios
* Lucide React (Icons)
**Backend:**
* Node.js & Express.js
* MongoDB & Mongoose (Optimized with `.lean()` and atomic operations)
* Faker.js (Dynamic Data Generation)
* JSON Web Tokens (JWT) & bcryptjs
* CORS
## ⚙️ Local Setup & Installation
Follow these steps to run the project locally on your machine.
### Prerequisites
* Node.js (v16 or higher)
* MongoDB installed locally or a MongoDB Atlas URI
### 1. Clone the repository
```bash
git clone [https://github.com/your-username/mock-engine.git](https://github.com/your-username/mock-engine.git)
cd mock-enginecd backend
npm installCreate a .env file in the backend directory and add the following variables:
PORT=5000
MONGO_URI=your_mongodb_connection_string
JWT_SECRET=your_super_secret_jwt_keyStart the backend server:
npm run devOpen a new terminal window/tab:
cd frontend
npm installStart the Vite development server:
npm run devOnce you create an endpoint in the MockEngine Dashboard (e.g., /users), you can immediately use it in any external frontend application like this:
import axios from 'axios';
const fetchUsers = async () => {
try {
// URL generated by MockEngine
const response = await axios.get('http://localhost:5000/api/mock/your-user-id/your-project-id/users');
console.log(response.data);
// Output: Array of 50 perfectly formatted, realistic fake users!
} catch (error) {
console.error("Error fetching data:", error);
}
};- O(1) Generator Mapping: Replaced bulky switch-case statements with an object map for
faker.jsfunctions, ensuring fast O(1) lookups during data generation. - Atomic Database Operations: Utilized
findOneAndDeleteand$setwith dot-notation for partial updates, reducing database calls and preventing data wipeouts. - Wildcard Routing: Implemented Express
router.all('/*')to dynamically catch and process deeply nested API routes defined by the user.
Built with ❤️ by Aayushmaan
***
### SDE Tip 💡
Jab aap isey GitHub par daalenge, toh is README mein sabse upar apne actually banaye huye React app ka ek clear **Screenshot** zaroor add kar dijiyega (Dashboard ya Visual Builder ka). Screenshots recruiters ka dhyaan sabse jaldi attract karte hain.
Aapka poora Local System aur Documentation ab officially complete ho chuka hai!
**Kya ab hum aage badhein aur isey MongoDB Atlas aur Vercel/Render par Deploy karne ka process shuru karein taaki aap ise apne resume mein daal sakein?**