Mockend

Quickly generate mock backends of your frontends

Comment

Inspiration

A couple of months ago, I participated in a hackathon. The hackathon aimed for the best submission hosted on the vercel platform. Unfortunately, I was not that great at frontends at the time, so I decided to build an API.

There existed a lot of fake data generators. So I had an idea to build an API that could return fake data in a structured way. This led to the building of fakeapi. Mockends core data building logic started with fakeapi. Anyway, I didn't win any prize in the hackathon as the other submissions were outstanding.

Fast forward; I decided to brainstorm why my idea wasn't catchy and ended on the conclusion all the requests to fakeapi were over a post request and did only serve as a data generator.

So I decided to build the first version of managed fake API generator that could be used to mock an API. Unfortunately, upon further research, I found out that no other tool in the market lets you mock an entire app. This was when phoney was born. Phoney lets you build app and endpoints related to an app. Each of these endpoints returns data in a custom format and mimics the production environment.

Phoney is now upgraded to Mockend because I wanted it to mean what it does. That is, mockend lets you mock a backend for prototyping/testing your frontends.

What it does

  • Lets you create multiple apps
  • Let you create multiple endpoints per app
  • You can use the same endpoints as your production API. Only the BASE_URL needs to be switched when going from development to production
  • Custom response for each endpoint
  • Support GET, POST, PUT and DELETE methods
  • Support 200, 201, and 202 status codes
  • Support dynamic endpoints, /api/id/{id}
  • Swagger UI for each app
  • Share swagger UI by making the app public
  • Automatic API-KEY protection for each app, X-API-KEY in headers
  • Create bulk endpoints by uploading app schema. An app schema is a JSON file that describes all the endpoints in an app

How we built it

I wanted to build a beautiful application for mockend. The backend for mockend is built using Django and PostgreSQL as the database. Turbolinks is used for smooth page transitions. Turbolinks give the application a SPA(Single Page Application) like feeling. This is done by intercepting all <a> requests, fetching the page using XHR, and replacing the current body with the response. The Django application returns data in HTML format, and interactivity is added to the frontend using HTMX. HTMX allows partial updates and other cool features by working directly with HTML data. For styling, TailwindCSS is used.

Challenges we ran into

  1. The core data-generating logic The data generating login is a recursive loop that keeps calling itself to generate inner blocks. The algorithm required some fine-tuning and trial error to reach the best/efficient solution.
  2. The dynamic endpoint The dynamic endpoint was another challenge. The program had to parse all the dynamic elements somehow and query the database without costing much. Ultimately with the help of the python mapper library, this was done.
  3. The first development with htmx and tailwind used the django-compressor library. But this was causing too many problems when moving to production. So, after some failed attempts, I decided to set up the tailwind purging step manually.
  4. other minor challenges took some debugging to solve
  5. Turbolinks initially broke all the javascript on the page. That is, HTMX and the JSON editor were not loading correctly. So I decided to put HTMX import in the body to reload it every time. The Editor page is kept out of turbolinks navigation to prevent breaking

Accomplishments that we're proud of

  1. The dynamic endpoint - I don't think any other mock backend/API generators support dynamic endpoints.
  2. Very minimal use of any javascript framework for building a web application. The only minimal use is the AlpineJS used for toggling the theme and activating the navbar burgers.
  3. proudly a hypermedia application
  4. All green(except PWA) in lighthouse test
  5. The whole web experience
  6. The templates page lists all public templates that do not have any API-KEY enabled. Suitable for letting people test out your application.

What we learned

I learnt a lot

  1. How to work with Django to build a complete hypermedia application
  2. How to build beautiful applications with TailwindCSS
  3. How to implement dark mode in tailwindcss
  4. How to setup Cloudflare proxy with traefik enabled on the server
  5. How to write Django tests
  6. How to write better Dockerfile
  7. How to build a fantastic application with Django, HTMX, TailwindCSS, AlpineJS, Turbolinks, Docker, Traefik, AWS, and Graviton

What's next for Mockend

  1. A common feature in all other mock API generators is an anonymous endpoint. This is set as a low priority but will be implemented. Thus users will be able to generate single endpoints without login or creating an app
  2. Write more tests. I want to move most of the testing to unit tests
  3. Implement cloning support for public templates. Users can quickly clone a template and modify it for their use.

Built With

Share this project:

Updates