Skip to content

ayushman3704/MockEngine

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 

Repository files navigation

# 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-engine

2. Backend Setup

cd backend
npm install

Create 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_key

Start the backend server:

npm run dev

3. Frontend Setup

Open a new terminal window/tab:

cd frontend
npm install

Start the Vite development server:

npm run dev

💻 Usage Example

Once 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);
  }
};

🧠 SDE-Level Technical Highlights

  • O(1) Generator Mapping: Replaced bulky switch-case statements with an object map for faker.js functions, ensuring fast O(1) lookups during data generation.
  • Atomic Database Operations: Utilized findOneAndDelete and $set with 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?**

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages