Ever work on a frontend project and just want to display something specific?

Danny Thompson

Director Of Technology @ThisDotLabs | React | Golang | Java |

Published May 9, 2022

Ever work on a frontend project and just want to display something specific? Maybe you want to just see or test something but do not want to go through the hassle of making an API, rely on backend services or Maybe you don't know anything about making an API?

Here's what I did!

So I started messing around with Mirage.js! Really liked the mocking library and wanted to experiment for a bit to see if this would be a good fit. First impressions, really like the docs. It is also pretty easy to use. So let me walk you through how I used it.

This is a screenshot of the mirage.js documentation landing page. It is a dark grey background with white and light green text. "Build complete frontend features, even if your API doesn't exist." With a CTA to read the docs and start the tutorials.

I wanted to create a dashboard that would mimic an online banking platform. Displaying a Checking, Savings and a 401k account. Nothing too crazy but a simple design that I can always expand upon later.

Shows 3 cards for a banking dashboard. White cards with a box shadow around the sides. A grey window with the currency and balance levels are shown under each respective title, Checking, Savings and 401k.

Created this using React. First thing I did was set up my environment. Then I created my mock server, server.js, and the info I wanted to share. This was actually really simple to do here.

This is a snapshot of the code in the server.js file where I am creating a mock server. Here is the code in the snippet import { createServer } from "miragejs" createServer({ routes() { this.namespace = "api" this.get("/banking", () => { return { accounts: [ { id: 1, name: "checking", amount: "amount", total: "2,000" }, { id: 2, name: "savings", amount: "amount", total: "5,000" }, { id: 3, name: "401k", amount: "amount", total: "45,000" }, ], } }) }, })

The get request will return an array with the entries inside. We will map over this to create multiple cards instead of designing each one individually.

Console.log of the API request and what will be fetched. An array with 3 objects.

Here I have fetched the data from the API and placed the results in json() so it is easy to use. Then I setBanking to the results but specifically to the accounts. I then used the useEffect hook to fetchData.

Code Snippet of the code in the main App,js file. import { useEffect, useState } from "react" import Spinner from "./spinner.js" import "./App.css" function App() { const [banking, setBanking] = useState([]) const fetchData = async () => { const result = await fetch("/api/banking") const bankingInfo = await result.json() setBanking(bankingInfo.accounts) } useEffect(() => { fetchData() }, [])

Here I am checking to make sure the banking variable has an entry in it by using a ternary operator. Ternary operators work like this.

Condition ? (Do this) : (Otherwise Do This)

So here I am saying if the length of Banking is > 0 Then map the info. Otherwise, show the spinner.

Code Snippet on a red background. Here is the code from that snippet return ( div className="container"> {banking.length > 0 ? ( div className="cardContainer"> {banking.map(({ id, name, total }) => ( div className="card" key={id}> div className="named">{name}/div> div className="cardContent"> div className="totalAmount">${total}/div> /div> /div> ))} /div> ) : ( Spinner /> )} /div> ) } export default App

It is that easy to create a Mock server and API to display all the info you want. Best part, I can change that info and it will not break my frontend. With just a few tiny changes, this went from a Banking Application to a Landlord Rental Tracking Application!

Hope this showed you something new and giving you ideas on how you can experiment with things. Of course it is always great to make your own APIs but there are certain scenarios where that isn't necessary. This is a great substitute in situations like that!