Another Twitch Status App

Code Feedback
1

Finally got around to finishing the Twitch API project, I’m pleased with how it turned out. I played around with a few things I haven’t used before on this project and maybe it was a bit overkill. I used Handlebars.js, OOP JavaScript, and my first time using CSS Grid.

The card images and the streamer summaries are hardcoded in a data structure in the app.js file since if a streamer isn’t broadcasting we get a ‘null’ response. Aside from that hardcoded data, everything else is from the API response.

localhost_3000_
localhost_3000_923×1884 462 KB

https://nick-damico.github.io/FreeCodeCamp-Project-7-Twitch-App/

1 Like
2
  1. Your mixing ES5 with ES6, stick to one of those, ES6 preferably
  2. You can do a lot more before calling your app OOP - i’d suggest maybe creating an App class, that initialises the Twitch part, passes appropriate DOM elements etc. Having one file with a bunch of DOM queries, helper function AND a class isn’t quite what i’d call OOP, but definetly a step in the right direction
  3. I’m confused by your build config. SASS gets compiled in your app folder, but also in the dist? Why is dist even in the repo, perhaps ignore it?
  4. Don’t forget {} in your SASS
  5. Storing your css media query breakpoints in variables might be a good idea
  6. Is jQuery a dependency? I see you load it, but i didn’t see you use it anywhere. BTW if you have a build process, it should handle dependency installation and import
  7. There are arrow functions and normal functions in your gulpfile. Try and stick to one consistent style
  8. If you want feedback on code - provide access to the actual code, i had to look up your profile on github and find the correct repo

Very impressive work! Maybe the most professional project i’ve seen of FCC!

1 Like
4

Thank you for all the valuable feedback and your time.

1.) I will add a Class like ‘App’ to handle the DOM queries like you suggested and possible move the helper functions to an appropriate class as well.
2.) I’m going to try and identify all the ES5 syntax and move to ES6 like you suggested.
3.) jQuery is a dependency at the moment. It was a solution I made in haste since I couldn’t get a response from the API endpoint using fetch(). I got in a hurry and just used the $.getJSON method, so I will try to work on a solution using JS and remove jQuery since it a large dependency for only needing that one method.

Of course, I will spend time on all the suggested corrections you mentioned above.

Thanks again,
Nick

5

Try and make fetch work, it’s perfect for your use case. Also i wanted to share an app i made a while ago - https://github.com/borisyordanov/mentor-mate-internship/tree/master/github-issues. I’m not saying this is the best way to refactor your app, but it might help you get there.

1 Like
6

I will keep at it until I get fetch working, you are absolutely correct. I will give this repo a good look over and use it to help with my refactor. If you don’t mind I might ask a few more questions a little later.

7