Octave
Music streaming web-app
Overview:
OctaveA is a music streaming web app that combines the power of ReactJs and Firebase to deliver a seamless listening experience. This app not only allows users to stream music but also offers functionalities that enrich the user experience, such as customizable playlists and a user-friendly interface. With its modern design and responsive layout, OctaveA is a fantastic choice for music lovers who enjoy both accessibility and functionality.
The app leverages browser storage to maintain playlists and recently played songs, providing a convenient way for users to engage with their favorite tracks. Its integration with the Media Session API further enhances user interaction by enabling control over music playback directly from the keyboard.
Features:
-
SongList Management: Users can easily add or remove songs from their current playlist, with data temporarily saved in the browser's session storage for convenience.
-
Favourites and Custom Playlists: Allows users to mark songs as favorites or create personalized playlists tailored to their tastes.
-
Recently Played Songs: Keeps track of recently played tracks stored in local storage, ensuring easy access to songs that users have listened to.
-
Media Session API Integration: This feature enables music playback control through keyboard shortcuts, providing a convenient way to manage music without needing to interact with the web page.
-
User Authentication: The app supports Google login and email-password authentication via Firebase, making it easy for users to securely sign in and access their music.
-
Responsive Design: Built with a modern UI, OctaveA offers a polished look and feel that works well across various devices, enhancing user engagement.
-
Developer-Friendly Setup: For developers looking to contribute or modify the app, installation and setup are straightforward, with detailed instructions provided for system requirements and configurations.
- 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
- 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.
- Firebase
Firebase offers a comprehensive set of features, including real-time database, authentication, hosting, cloud functions, storage, and more. Firebase provides an easy-to-use interface and allows developers to focus on building features rather than managing infrastructure.
- 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.