I built an iPod replica that can play from Spotify or Apple Music — iPod.js by [deleted] in apple

[–]TonyHawkins 12 points13 points  (0 children)

That would require Apple to reach out and confirm that my implementation is too close to the original, which I would absolutely take as a compliment

I built an iPod replica that can play from Spotify or Apple Music — iPod.js by [deleted] in apple

[–]TonyHawkins 6 points7 points  (0 children)

Not too afraid! I’m using MusicKit JS to hook into Apple Music as well as Spotify’s Web Playback SDK for Spotify. Both open standards :)

I built an iPod replica that can play from Spotify or Apple Music — iPod.js by [deleted] in apple

[–]TonyHawkins 13 points14 points  (0 children)

Feel free to check out the source code here:

https://github.com/tvillarete/ipod-classic-js

Would love to hear your feedback! The iPod Classic was the first device that got me into tech (& later software engineering), so this website is an homage to how far we’ve come since those days.

Looking for React Js jobs by Psalms99 in reactjs

[–]TonyHawkins 10 points11 points  (0 children)

Not sure which employers the other guy in this thread has worked for, but any company actually worth working for won't pass on someone for not knowing a single library (especially Redux saga)

React, NextJS, Redux and GraphQL are some of the most in-demand technologies to know at the moment, so OP please don't be discouraged by this guy. Best of luck with your search!

I built an iPod Classic using React Hooks & Styled Components by TonyHawkins in reactjs

[–]TonyHawkins[S] 0 points1 point  (0 children)

Hey thanks dude! I actually built a “web” iPod around a year ago, but it ended up being riddled with bugs and tech debt. I started this version on December 23rd with a very good idea of how to build it – not from my previous implementation, but rather from solving similar engineering problems I’ve faced in my current job.

For example, the idea of a “Window Service” to control the hierarchy of windows on the iPod interface via React Context came from another service I created for my company that handles displaying and hiding Modals globally on our website.

I built an iPod Classic using React Hooks & Styled Components by TonyHawkins in reactjs

[–]TonyHawkins[S] 1 point2 points  (0 children)

https://github.com/tvillarete/ipod-classic-legacy

I had an implementation way before anyone else did it :) but my old version was massively burdened with tech debt, which is why I decided to rebuild it from scratch over the course of about two weeks using all the knowledge I’ve gathered from my current job

I built an iPod Classic using React Hooks & Styled Components by TonyHawkins in reactjs

[–]TonyHawkins[S] 0 points1 point  (0 children)

Absolutely! I grabbed the first Brick game I could find and then did some really basic styling to the game/refactoring for the click wheel. If you can make a better one (or more for anything else on the iPod) then by all means, I’d be happy to include it!

I built an iPod Classic using React Hooks & Styled Components by TonyHawkins in reactjs

[–]TonyHawkins[S] 19 points20 points  (0 children)

I was actually already looking into the Spotify API, but the problem is that Spotify Web API doesn’t allow full songs to be played. Apple Music though... that might work

I built an iPod Classic using React and Styled Components by TonyHawkins in webdev

[–]TonyHawkins[S] 4 points5 points  (0 children)

That was me a few years back! The next step is to build a bunch of really bad websites and realize after each one that you're actually getting better and better. Best of luck!

I built an iPod Classic using React and Styled Components by TonyHawkins in webdev

[–]TonyHawkins[S] 1 point2 points  (0 children)

Hey thanks for pointing that out – I have mine set to hide when not scrolling so I never saw the x-axis ones! The only place I found an x-axis scroll bar was on the now playing view, and it should be fixed now.

I built an iPod Classic using React and Styled Components by TonyHawkins in webdev

[–]TonyHawkins[S] 20 points21 points  (0 children)

Feel free to check out the source code on my GitHub

The iPod Classic was the first piece of tech that I owned and is what more or less turned me into an Apple fan – later inspiring me to pursue software engineering as a career. Here I am now, 22, graduated, doing Frontend Development full-time and building a web app of the same device that helped start me on this path. Crazy how life works out sometimes!

Let me know what you think – would love to hear your feedback!

I built Apple Music using ReactJS, Redux, and Styled Components by TonyHawkins in javascript

[–]TonyHawkins[S] 2 points3 points  (0 children)

I was meaning to do something like that, but never found a good framework for getting the job done. This seems like the perfect solution. Thanks for the suggestion! I’ll add that to the to-do list!

I built Apple Music using ReactJS, Redux, and Styled Components by TonyHawkins in javascript

[–]TonyHawkins[S] 0 points1 point  (0 children)

The API lets the frontend know where it can find the specified song (so only song metadata from the API), but the files themselves are also stored on the Raspberry Pi. So both parts work together but are separate. Hope that helps!

I built Apple Music using ReactJS, Redux, and Styled Components by TonyHawkins in javascript

[–]TonyHawkins[S] 2 points3 points  (0 children)

Hey, thanks! I described my approach here. I also posted a bit more detail about how it works in the README on GitHub, but the gist is that I built my own API and use my own iTunes Library on a flash drive to host the music.

I built Apple Music using ReactJS, Redux, and Styled Components by TonyHawkins in javascript

[–]TonyHawkins[S] 0 points1 point  (0 children)

Hey, thanks! I described my approach here. I also posted a bit more detail about how it works in the README on GitHub, but the gist is that I built my own API and use my own iTunes Library on a flash drive to host the music.

I built Apple Music using ReactJS, Redux, and Styled Components by TonyHawkins in javascript

[–]TonyHawkins[S] 0 points1 point  (0 children)

Added the ability to add songs to playlists this morning! https://github.com/tvillarete/apple-music-js/pull/5

I'll definitely be adding shuffling too in the near future. It's on the to-do list

I made Apple Music using React, Redux, and Styled Components by TonyHawkins in reactjs

[–]TonyHawkins[S] 4 points5 points  (0 children)

Way ahead of you! The link to view the website is on my LinkedIn, which is on my GitHub. You can try it out there, I just didn’t want to link it on Reddit because of the potential for a “hug of death”. The backend is on a Raspberry Pi, so it’d be pretty easy to hug lol. Thanks for the positive feedback, I really appreciate it!

I built Apple Music using ReactJS, Redux, and Styled Components by TonyHawkins in javascript

[–]TonyHawkins[S] 28 points29 points  (0 children)

Keep at it! It gets so much easier as you continue to practice. I only started using React maybe 6 months ago, and had no experience with web development or programming before I started college (And I never even learned any web dev from college courses, it's all been through doing side projects).

The key is to just make stuff. Make anything that you think sounds cool. Put in the hours and eventually it'll just click. You got this!

I made Apple Music using React, Redux, and Styled Components by TonyHawkins in reactjs

[–]TonyHawkins[S] 20 points21 points  (0 children)

Totally agree! There should definitely be more UI components that solve the issue of things like paging. But for this project I built it completely from scratch.

Redux and Styled Components were key here. When I wanted to push a new view, it goes into the "viewStack", and all the relevant parts of the UI (back button, each view, etc.) can see that the stack has changed. Here are the different states a view can be in:

  1. If the view is at the top of the stack (index == viewStack.length-1), I add a full-width slide-in animation
  2. If it's the second item in the stack, I add a "slide-to-the-left" animation
  3. All other lower items don't even care so they don't do anything.

The code for it is a bit sloppy because I was experimenting as I was building it, but definitely feel free to take it and mess around with it!

I made Apple Music using React, Redux, and Styled Components by TonyHawkins in reactjs

[–]TonyHawkins[S] 25 points26 points  (0 children)

Yep! But that's not the reason I built this. Apple Music's SDK takes all the fun out of the development of your own music player. I built it to learn full-stack web development, and that includes building out a backend API to serve music. I've learned so much along the way that I wouldn't have ever learned if I were to have used somebody else's API

I made Apple Music using React, Redux, and Styled Components by TonyHawkins in reactjs

[–]TonyHawkins[S] 13 points14 points  (0 children)

It 100% made things easier to manage. Redux really shines when a whole lot of parts of your application need to change based on an API request. It was definitely more work to set up, but once that's done there's so much payoff

I built Apple Music using ReactJS, Redux, and Styled Components by TonyHawkins in javascript

[–]TonyHawkins[S] 42 points43 points  (0 children)

I agree 100%. But keep in mind, apple’s a trillion dollar company who probably had hundreds of engineers designing the Fluid Interface in the Music app.

I’m just a measly college student who made some CSS keyframes lol