DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Learning Should Be Fun: ReactJS + Twitch API Tutorial
Renaissance Engineer
Renaissance Engineer

Posted on

Learning Should Be Fun: ReactJS + Twitch API Tutorial

How many todo apps and calculators does the world need?

Learning to code is hard, which makes it tough to stay motivated sometimes. It doesn't help that most beginner tutorials are almost always the same rehashed projects that are not only boring to follow but won't help you get a job

IMO the best way to learn is mixing together things you enjoy to create something new. One example would be combining programming with gaming by using the Twitch API

I made this tutorial with beginners in mind. Once you're done with this tutorial you'll have a number of options available to extend the base project to make something unique for your own portfolio. Some examples of features you could add:

  • create a real time dashboard of stats using a charting library and making API calls every minute to update the view counts
  • create a profile route and embed the stream instead of linking directly to twitch https://dev.twitch.tv/docs/embed/
  • change up the styling on the cards used to display our data from the Twitch API
  • add some error handling to handle stuff like API limits or outages
  • add a loading component to wrap around our lists to show a loading icon until the API call has returned
  • break out some of the repeated logic like replacing the URLs and make a List component and Card Component for the repeated UI logic

This tutorial does assume you have some basic knowledge of ReactJS, so make sure you've at least gone through the main Reactjs Getting Started Guide and understand the basic concepts of React like JSX, state management, and how to work with components.

When you're done feel free to leave a link to your project so others can see what you made.

Top comments (3)

Collapse
 
seefer007 profile image
Darren Evans • Edited on

The way I'm jazzing up the fun factor is by incorporating other things to code for that interest me such as gaming and Marvel comics via these APIs:

developer.marvel.com/
develop.battle.net/

Collapse
 
induratized profile image
Abhinav Sharma • Edited on

Do you mind if I made a post with textual representation for visual tutorial ? for me personally, reading is more impactful than audio visual content, it has an upper hand for beginners.

Collapse
 
renaissanceengineer profile image
Renaissance Engineer Author

Sure! feel free to put your own twist on it and add or change features if you want. Just link back and say your post was based on or inspired by my tutorial or something. I'll link back to yours as well for people who might prefer a text version too

What image format should you use in your next project? πŸ€”