Free and Fake APIs You Can Use to Practice Front End Development

John Au-Yeung - Feb 23 '20 - - Dev Community

Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

Even more articles at http://thewebdev.info/

To practice front end development, we often need to practice making HTTP requests to APIs. To do this easily, we can use APIs that are already built so we can focus on front-end development instead of writing our own APIs to practice with.

We'll look at some free APIs you can use to practice.

Dog API

The Dog API is free and it provides us with endpoints for dog pictures and text data. It supports CORS so that we can use it directly from our front end apps.

Petfinder

This API provides us with pet adoption data. It requires OAuth for authentication in order to access the data. This API also supports CORS so we can use it from the front end.

shibe.online

shibe.online gives us URLs for cute dog pictures as data. It takes query strings that's used to query the API for data.

Anime News Network API

If you like Anime, then this API is for you. It returns data in various formats like HTML or XML. Therefore, you'll have to convert to JSON from XML if you need to manipulate and display the data.

Jikan

This is another anime data API. It's the unofficial API for MyAnimeList. There's a REST API that supports CORS in addition to libraries made for various platforms like Python, Ruby, and JavaScript.

JSONPlaceholder

This provides an API with GET, POST, PUT, and DELETE requests and it supports CORS. The endpoints that it provides has preloaded data that we can use to display and also to update them.

REQ | RES

Like JSONPlaceholder, this provides a real API for you to build front-ends on. It has endpoints for all HTTP actions which are used for getting and manipulating fake user data. There's already data prepopulated so that you don't have to add them yourself.

Conclusion

To focus on front end development practice, you can use these APIs to develop your practice front end app. Now you can worry about back end development later.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player