Back to Project List

Diode 🔌

Diode is an easy to use API proxy to hide your API secrets and add common middlewares without implementing a backend! ✨

Respository Video ▶️

Diode 🔌

Open-source API proxy server with an easy-to-use dashboard for configuring middlewares and secrets.

What does Diode do?

Third party APIs make it easy to integrate functionalities across apps. But using them on a purely front-end project is a hassle. Most of the time, the API endpoints require an API key which cannot be exposed on the frontend. Hence, most of us setup a proxy backend server that makes the request to the third party API with the API keys and make the frontend request this proxy server instead. While it might be a trivial solution that shouldn't take a lot of time to implement, it can get very repeatable and tedious over time.

Diode solves this problem by abstracting this proxy server and allowing you to add and configure as many API routes and consume them directly on the frontend without having to worry about exposing any API keys! Since Diode sits in between all the requests going to the third-party server, it also makes it easy to add commonly used middlewares to the API route with just a click!
Fun fact: All of this happens without you having to write a single line of code.

Features

  • 💡 Easy to use dashboard.
  • ⏩ Query parameters and request headers forwarding.
  • 🕶️ Encrypted Secrets that get dynamically injected when making requests.
  • 🔮 Request and Response structure preservation.
  • One-click middlewares for:
    • 🚫 IP/HTTP restriction
    • ⏱️ Rate-limiting
    • 📌 Caching
  • 💙 Open source, can be self-hosted.

Try it out

Deploy

Note: Deploying on Heroku free plan may cause higher latencies

Project Setup

Pre-requisites:

  • Node.js and npm installed.
  • Postgres installed.
  • Redis installed.

Clone the repo, install dependencies

git clone https://github.com/blenderskool/diode.git
cd diode
npm install

Setup environment variables

Create a .env file and provide values for all the variables listed in .env.example file.

Setup database

In the root of this project, run the following command to setup the database schema

npx prisma db push

Build the project

npm run build

Start the server

npm run start

Diode will start running at port 3000.

Explore the database

Prisma Studio makes it easy to explore and edit the data in the database. You can start it by running

npx prisma studio

Prisma Studio will be running at port 5555.

License

Diode is MIT Licensed

Akash Hamirwasia

Done with most of the frontend!

The last 2 hours were really productive. Have completed most of the UI work, connecting to the backend is left in some parts. What's remaining:
- Connecting some frontend forms with the backend.
- Testing the integration.
- Preparation for deploying on Heroku.

November 14, 2021

Added Project details page

The project details page is where Api routes, secrets, and stats associated with that project are shown. Using Chakra-UI for the first time, it's really good!

November 14, 2021

Setup Frontend and built the Projects page

Setup Chakra-UI for the frontend, also got done with the Projects page.

November 14, 2021

Added Secrets substitution and performance metrics capturing 🕶️

Secrets are variables that can be used within the requests in their query string and headers. They can be some API keys or any arbitrary string. Secrets are encrypted and stored on the database and only decrypted while making the actual request.

Performance metrics captured are:
- Total number of successful calls to origin endpoint.
- Total number of failed calls to origin endpoint.
- Average response time of origin endpoint.

This completes most of the backend work of Diode, at least the MVP! 🚀

November 13, 2021

Added Cache middleware 📌

Cache middleware caches the API response + headers in Redis and returns it for a specified duration before re-fetching new data from the origin server.

Had to implement this from scratch as well, couldn't find an existing middleware that supported configurations required for this project. Learned a lot ✌️
Turns out that caching the headers is as crucial as caching the response!

November 13, 2021

Added IP addresses and HTTP Restriction middleware 🚫

Restriction middleware restricts which IP addresses or origins can make the request to the endpoint. Users can configure any one of the following restrictions:
- IP address: Restricts access to only some IP addresses.
- HTTP origins: Restricts access to only origins. Blocks others with CORS.

Could make use of some express middlewares for this one with Next.js!

November 13, 2021

Added Rate Limiting middleware ⏱️

Rate limiting middleware limits the number of requests that can be made within a specified time interval. Took longer than expected to implement this as most middleware packages did not allow modifying the key used in the Redis store, so had to use a custom solution. Thinking of adding some more middlewares 💪

November 13, 2021

Added schema and basic proxy functionalities 👌

Query and request headers are forwarded by the proxy. Took a little bit of fiddling to get the headers forwarding working. Notice how in the demo below, the request does not pass any Unsplash API keys(because the proxy picks them up from DB)

November 13, 2021

Started working on the project! 🙌
Created a project repository, scaffolded it with Next.js and Prisma.

November 13, 2021

Project created by Akash Hamirwasia

November 12, 2021