Learning to use an API is a must skill in the modern world. I will be sharing several fun APIs and projects that will enhance your portfolio.
At times we have moments where we don't know what to do. Just staring at the black and blank code editor having no idea what to work on.
To help overcome this , I have covered every API with a project you can do alongside it.
APIs we are going to discuss today :
- Giphy API
- Sound cloud API
- Discord API
- Covid-19 API
- Pokemon API
Prerequisite
I expect you to know basics of HTML , CSS ,JAVASCRIPT :
- Creating form elements in HTML.
- Basic designing with CSS. [extra skill for designing projects]
- Basic JAVASCRIPT knowledge.
Giphy API
As the name implies it's an API for gifs. It is one of the most popular API in the world of gifs.
Project Ideas you can make with this API :
1 . GIF Search Engine :
What is it?
A simple query-based project where you retrieve GIFs based on the query. All you need is a simple input box and a button and get creative with designs.
Difficulty : Beginner / Easy
User Stories :
Upon pressing enter, in the input box, it should retrieve the GIFs.
Gifs retrieved before should get deleted.
What you will learn after building this?
- Using fetch API
- Displaying data from an API
- Using on key-down or on key-up to check whether the user presses enter. [Hint!]
2 . GIF TV
What is it?
Every second a new single GIF should be retrieved and displayed on the screen. Users should have the ability to slow down the fetching of a new GIF.
Difficulty : Beginner / Easy
What will you learn after building this?
- Using setInterval [Hint !]
- Pretty much the same as the previous one.
Sound Cloud API
A simple song API to retrieve music and make cool projects.
Project Ideas you can make with this API :
- Simple Music App
What is it?
A simple song/music app clone.
Difficulty : Beginner - Intermediate
Features you can add :
- Searching for particular songs
- Playing the song on click
- Adding / Removing songs of Playlist
- Saving playlist to localStorage
What will you learn after building this?
- Using fetch API
- Using localStorage
- Playing / Streaming audio
- onkeydown / onkeyup events
Discord API
Official Discord API you can use to make some cool discord bots.
Commands my discord bot currently has... You can test the bot out here
This is your own creative space, play around with it. Learn new things and enjoy them.
Covid-19 API
In today's world, the COVID-19 tracker project is being treated like the todo list of the past .. why not join the fun?
User Stories :
- World COVID data should be shown
- People can search for country-specific data
- Designing inspiration can be taken from dribble
- It should be responsive
Features you can add
- Use chartjs for making some cool graphs
- Add some animations using pop-motion
What you will learn after building this?
- Using fetch API
- Using .toLocaleString()
Pokemon API
A simple API to get pokemon data...
User Stories :
- At least 100 pokemon are shown.
- You should be able to filter out the options
- When you click any pokemon you will see in a new page more data about the pokemon you selected.
- It should be responsive
Features you can add
- Pokemon Game
- Recreate this with a framework and observe the number of lines :)
What you will learn after building this?
- Using fetch API
- Filtering data list
- Using routify etc
Special Announcement
I will be joining the #2Articles1Week challenge. I am going to make tutorial-posts for projects mentioned here. If it's something that interests you, please hit the Subscribe button to get notified of my latest posts.
Feel free to connect with me on twitter or join our community on discord