React Part II Jamming Project: Too Difficult Too Soon?

Hello everyone!

I am following the Front End course as a complete beginner and recently started React Part II. I felt quite lost when I finished the first lessons and notice that the first project “Practice Project: Jamming” had so little information for a “practice” project, in the format of a major portfolio project. Once I read through it I didn’t understand almost any of the steps as the instructions are awfully vague. As the very first React project (off platform), I feel like it is terribly hard and complicated, with very little guidance and more topics than just starting a simple React page (includes api requests, authetication, etc)

What I have thought to do is follow an old (3 months) video I found on Youtube where they had actual step by step tasks, follow that and try to adapt it to the newer version. I personally believe that React Part II has been the weakest point of the course. Very little information for what is required, and a really big first React project (“Jamming”) with so many things requested to have done (react components, api requests, authentication, etc). I personally hope they can fix this course, as I find that it is not very beginner friendly. Unlike the previous courses, such as HTML, CSS and JS, who have more smaller projects (off platform) that help new users start something new yet small. I already thought it was odd that the latest sections had no projects, and now it seems they put all off-platform projects into one, instead of having smaller projects to practice and learn. I believe it’s good to have some good help on the off platform projects (first ones of new topics) as it helps better understand how to start something new. Then, with the portfolio projects, they should be less handheld.

Let me know your thoughts! I hope this can be fixed in the future for others!

14 Likes

I had difficulty with the api portion but found some guidance online and was able to get the project to work. for the second part i used spotify developer page for inspiration to add api calls to get top tracks and recommended tracks.

1 Like

Could you share some of the resources you looked at?

I’ve gone through most of the codeacademy front end course and saved the Jamming project to come back to because I knew it was outdated… and I am happy they have updated it but I have to day it is a big jump still from the practice projects and I am getting a little overwhelmed with where to begin. Well, I started with making the html css shells for each component but now for the react props I am a bit overwhelmed and lost.

1 Like

I agree, I am SO lost with this project lmao. Even just the set up for react was so complicated to figure out on my own.

I’ve been looking through the old(?) version with more guidance here, but even with that it still feels like a lot.

2 Likes

Here is the youtube video I followed. They go through the old version of the course, which is much more helpful for a first time project in React, much more like the previous projects in the whole career path.
Still, try to do the exercises yourself. Pause and do each exercise yourself, and if you still need help, of course you can see what they did and how to fix it, but doing it yourself will help a lot more! I think you also still need to rework it with what you’ve learned. If I remember it correctly, the old exercise still uses React classes instead of functions. AND use the exercise solutions offered in the updated version, because that version has the function components, which can be helpful if really stuck.
But it is 100x better than the new one in my opinion. The new version has the form of the Portfolio Projects, which are supposed to be have less help, since you’ve had practice before.

Hope this helps and good luck!

4 Likes

Oh wow, I didn’t even know you could actually find it! I used a Youtube video of someone going through it and follow it myself, but this is much better hahaha
It is tough, but you got this. Definitely look through React’s new documentation page here. Their documentation is great, it has examples and explains very well.

I also agree that the the project it too difficult. I could do the react parts having followed the course, but in my opinion interacting with the Spotify API needs a separate course in itself, and I found the Spotify documentation too difficult to follow at my current level of understanding. I’m thinking now of just leaving the project and carrying on with the rest of the full stack developer course, as I am so frustrated with this project, and the only other option would be to quit learning to code.

1 Like

Thank you for this, I hope it will get me out of the various jams I have got into with the current jammming project :slight_smile:

1 Like

Hey how’s it going with the jamming project?
My head’s aching doing this project since it’s just too vague with what steps they gave. I feel like taking someone else’s help would be beneficial to completing the project. I checked one video on youtube about the project but that was like before the update. I feel like learning from that would help me in understanding how it works in any way. I need that understanding of how each component works the way it works. This is what bothers me.

I don’t know what to do cause I haven’t completed it yet and don’t see any solution to it.

Hi, in the end I gave up with this project, as I was spending too much time staring at the screen and then making changes which didn’t solve anything. Basically I got the React set up for the different components, but came unstuck with refreshing the acesss token to the Spotify API, and decided to come back to it when I had more experience with using APIs.

1 Like

Hey I just completed it now. I went on the same video which shows how to build one and I started to understand some stuff from the explanation he gives. So I ended up not building an app with classes but instead using functional components. I even took some little bit of help from the solution code and that’s how I got it. Will still need to learn how to use the Spotify API tho.

2 Likes

Hey Guys … :face_with_peeking_eye: I’ve just started the project for jamming as well…

and as our first app to create, I agree its really difficult to know where to start. :confused:

All I have done is:

  • activated my terminal - to create-react-app - check its compiled
  • opened my visual studio code, edited the name to ‘Jammming’.
  • checked that React opens in google chrome.
  • and signed up to Spotify - created an app and have my api code.

but I don’t know where to go from here…? :pleading_face:

1 Like

I’d recommend using the previously mentioned youtube vid as a guide - https://www.youtube.com/watch?v=DbJQB1tmYsQ (+a part 2)

SypherSec is using class based components (as opposed to function based ones) but I was able to rewrite his components as function based ones as I followed, without too much dificulty, which keeps it true to the updated project.

Take it bit by bit. Troubleshoot as best you can using your own resourcefulness and refer to the solution code as a last resort when you really need to.

I had managed all the previous projects on the Full-stack Dev course on my own, but this one was beyond me. Even with the extra help it was still a challenge. Good luck! :slight_smile:

You’re right, it was quite a difficult project to start, I understand that part of the study is self-teaching but I felt quite lost. I started by creating the components and using a mock data and I definitely had to read the sample code they showed to get unstuck. But the hardest part… to use the API, and the authentication part. It’s one thing to be taught how to get data using async functions, but Spotify’s documentation on its API almost drove me a little crazy. In the end I managed to do it, I used an example they have in a github repository using node.js for authentication with PCKE flow. And from there I managed to finish the project

1 Like

Hey Angela, thank you for your advice… :smiley:

I really appreciate it. In the end I created the app…but It doesn’t work correctly.
(Probably because as you said we do need to change to function based components - not class)

I think I have managed quite well so far… but this was so long - even though I went over it again. I didn’t want to waste anymore time on it.
I’ve just joined as a full stack member too - as I think it may be worth reaching out to see who would like to practice together on certain areas.

I’ve just done the Petlover practice project - following Yorley’s video. He’s brilliant for learning - he explains as well as demonstrates.

if there was smaller videos of the jammming app practice - I know I could have got it working.

(but desperately want to continue on with the full stack course, and make some development)

Please reach out if I can help you with anything. :grin:

1 Like

I tried to do the same and move forward with the course, however I try every day to improve some feature or fix some bug. If you need help you can contact me. This is the link to my app: jammmingbrowser.netlify.app , so you can review it and give me feedback. To do that, I must integrate your email to my spotify dashboard (if you want you can send it to me via private message). And this is the link to my GitHub repository: ANGELA-PARGA/JAMMMING (github.com) for you to check out my code, it’s not perfect but I tried to make it easy to understand.

Hey Angela :grin:

that’s excellent thank you. yes I will do it now.
this is the link to my portfolio so you can see what I have done so far to…

My Portfolio

It’s not perfect either… but it definitely gives you a feel for my love for the countryside. :face_with_hand_over_mouth:
I’ll will reach out to you on a private message, I will send you my email through the chat… :smiley:

does anyone know how to run the example code, I tried NPM start but it doesn’t work for me.

lookingofrward to the rpely

I was struggling a lot with the project, so I tried running the “solution” code. It wouldn’t run right off the bat for me. That’s because the file they had me download didn’t include the node modules (so it didn’t have react-scripts, which tells npm start what to do, i think). I moved the node modules folder over from my own project and I was able to run npm start.
I had further issues with the solution code, though. Just like my own code, it would load the results into my results list component, then immediately reload the page. I tried doing the e.preventdefault and such, but I wasn’t able to stop this issue. It was eventually solved by a programmer friend of mine, though I’m not sure how he did it. I’m trying to continue from here but I feel so drained from trying to troubleshoot through this project. It’s reassuring to see a bunch of y’all struggling with this too.

Yes, it’s really tough project. I’m glad that Sypher Sec made a walk through video on YouTube. And I was surprised that after that they gave me Create a Playlist App With the Spotify API (Part Two). I barely made one project, and now they want me to add more functionality there :see_no_evil: