RadioPlayer project rebuilt in React

Hyper Island - The First Web App Module - Brief 5.

radioplayereact.mp4

📂 The Brief:

• Rebuild my Web App with the React library.

⏳ Time spent / Deadline:

2 weeks.

🎯 Goals:

• Crash course in React and rebuild my RadioPlayer Project.
• Make use of Sveriges Radio API.

🦾 Solution:

Nail down the React fundamentals, get to an MPV in a week and integrate new features.

👨‍🎓 Learnings:

• React
  • Installing Create React App and generating the project.
  • Refactoring elements using JSX.
  • Creating components.
  • Adding Keys.
  • Destructuring arrays and objects.
  • Working with the useState Hook and useEffect.
  • Fetch/display data from multiple APIs.
  • Handling loading states.
  • Deploying to Git Hub Pages & Netlify.

⁉️ Future Improvements:

• React Router

  • The App is static, but I ran out of time to implement React Router and set up different routes to pages.

• Test Driven Development

  • I could have made better use of the Jest testing platform and React testing library.
  • Made good use of Strict Mode to follow best practices and flag areas for improvement.

• Vanilla JS

  • The project highlighted areas I need to improve on, such as scoping, callbacks, passing functions, short circuiting and array methods.

• Conditional Operators

  • I couldn't get all of these operating how I'd like, so if there are less than four songs in the API playlist, the App crashes 😬.
  • ✅ Bug fixed using optional chaining. Used ?. to short-circuit null to undefined

💻 Tech used in this specific repository:

• Git Hub / Git Hub Pages
• JavaScript
• React
• Swedish Radio's open API
• Open Weather API
• Unsplash API