Playlist Randomizer

screenshot of Playlist Randomizer
react
styled-components
material-ui

A small React app that makes use of Redux, React Router and Material UI

Overview

The Playlist Randomizer is a clever React application designed to streamline the way users interact with their YouTube playlists. It stands out for its ability to address a common frustration: YouTube's inconsistent playlist randomization, particularly when it comes to casting to other devices. This app not only randomizes playlists but also allows users to play or cast their selections seamlessly, making it an excellent tool for music lovers who crave variety in their listening experience.

Built using Redux, React Router, and Material UI, the app features a user-friendly interface that enhances navigation and usability. The integration of local storage ensures that your experience is personalized, as it remembers the playlists you've loaded previously, allowing for quick access each time you return to the app.

Features

  • Random Playlist Generation: Effortlessly randomize large playlists to keep your listening experience fresh and exciting.

  • Play and Cast Options: Play your favorite tracks directly or cast them to your devices, providing versatility in how you enjoy your music.

  • Local Storage Integration: Automatically saves previous playlists, ensuring easy access upon your return to the app.

  • User-Friendly Interface: Designed with Material UI components, the app facilitates a seamless and enjoyable user experience.

  • React and Redux Utilization: Built with robust frameworks that promote efficient state management and component-based architecture.

  • Responsive Design: The app is designed to work well across various devices, enhancing accessibility whether you're on a phone, tablet, or desktop.

  • Real-time Fetching of Playlist Data: Fetches information about public playlists in real-time, keeping content up-to-date and relevant.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

styled-components
Styled Components

Styled Components is a popular library for styling React components using CSS syntax. It allows you to write CSS in your JavaScript code, making it easier to create dynamic styles that are specific to each component.

material-ui
Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

Redux

Redux is a state management library for JavaScript apps that provides a predictable and centralized way to manage application state. It enables developers to write actions and reducers that update the state in response to user interactions, server responses, and other events, and can be used with a variety of front-end frameworks and back-end technologies.