Ever work on a frontend project and just want to display something specific?
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.
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.
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.
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.
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.
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.
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!
Software Engineer
2yThanks for posting
Frontend Engineer | React | Rest API's | Git | JavaScript | WordPress | Bootstrap| Learning python.
2yThanks for sharing, I feel I just learnt something new.
Putting the FUN in Fundraising | Podcast Host | Fsh Tank Founder
2yGiving it some dummy data?
A Software Engineer who builds apps for businesses
2yYou could also try this: https://medium.com/codingthesmartway-com-blog/create-a-rest-api-with-json-server-36da8680136d