DEV Community

John Au-Yeung
John Au-Yeung

Posted on

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

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.

Top comments (25)

Collapse
 
crimsonmed profile image
Médéric Burlet

Any api is a very good one as it compiles information of a lot of open api
any-api.com/

I think you could include NASA API it has a lot of data and information available to the public:
api.nasa.gov/

Open Weather is also a good one:
openweathermap.org/api

For any Anime Fan I would recommend:
animenewsnetwork.com/encyclopedia/...
This is a good one as it lets you get movie like information, covers, actors, and more.

Last but not least the must have of all APIs
pokeapi.co/

Collapse
 
aumayeung profile image
John Au-Yeung

NASA's API is pretty high quality. Lots of photos URLs, data for near-earth objects, etc.

Open Weather API also a good free weather API to practice with.

The other ones are also good finds.

Collapse
 
znick1982 profile image
Nikolay

If you need to design an API, for example, create custom methods, generate and save some data on the server I can recommend fake.rest
It's a project-based service, with a variety of settings for HTTP response.

Collapse
 
aumayeung profile image
John Au-Yeung

That looks good. I see that it can seed data according to the docs, which makes it even better.

Creating data by hand is awful.

Collapse
 
znick1982 profile image
Nikolay

Thanks.
Yes, the data can be seeded in Store Arrays and used in CRUD operations or could be regenerated dynamically for each response if required.

Collapse
 
scrabill profile image
Shannon Crabill

Dog CEO is the best.

Here are some other fun APIs I found recently.

Collapse
 
aumayeung profile image
John Au-Yeung

Thanks. These are good for practice.

Collapse
 
chriswalt64 profile image
Chris Walters (He/Him)

One tool I have been using is crudpi.io/

It lets you create a standalone CRUD API. I like this in particular because it lets you format your JSON return however you want it, and it also includes some auto-values to give you sample data (Random First and Last names for example).

Good read!

Collapse
 
aumayeung profile image
John Au-Yeung

Thanks. Your site looks good. If it has auth built-in, then it's even better.

Collapse
 
vladgen profile image
David

Hi guys, you can try DevApiService. I discover it a few week ago and I'm delighted because this online tool has a lot of functions that I need. Some of them are: mock API, fake API, sort the results of the API, pagination, token authentication, share APIs with other users, etc. An interesting functionality is that you are the owner of the data you upload and you can modify it all you want without limits.

Collapse
 
vikramchandra profile image
Vikram Sharma

For those developing news apps (like I did) this list of news apis offers many free apis.

Collapse
 
aumayeung profile image
John Au-Yeung

These are good. I would also add the New York Times API to the list.

Any of them give full content for free?

Collapse
 
vikramchandra profile image
Vikram Sharma

I don't think anyone gives full content for free.

Collapse
 
nikacodes profile image
Nicole Zonnenberg

pokeapi.co/

Pokemon API is one of my favorites :D

Collapse
 
aumayeung profile image
John Au-Yeung

It's good. It has lots of endpoints and data you can display.

Collapse
 
douglasfugazi profile image
Douglas Fugazi

Cool recommendations 👍😊

Collapse
 
aumayeung profile image
John Au-Yeung

Thanks

Collapse
 
sally profile image
Sally

I'm rather fond of the US National Parks one. There's tons of information per park, including alerts, which are frequently updated and sometimes contain warnings about bears. Win win.

Collapse
 
aumayeung profile image
John Au-Yeung

Thanks. I didn't know that existed

Collapse
 
ilyaukin profile image
Ilya Lyaukin

jsonplaceholder.typicode.com/
also good fake API