ennanuel / Ridm

Ridm is a web player project created using React, Redux and TailwindCSS. It utilizes Deezer's API to get song data, and Musixmatch API to get song lyrics.

Home Page:https://ridm.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Ridm - Web Player

Project Logo/Header Image React TailwindCSS Redux

Overview

Ridm - Web Player is a dynamic and engaging full-stack project with a primary focus on frontend development. This project is a testament to my dedication and growth as a developer over the past two years. By leveraging technologies such as ReactJS, Tailwind CSS, Redux, Redux Toolkit, and Color Thief, I have created a web player that brings rhythm to everyone.

Key Features

  • Deezer API Integration: Ridm utilizes the Deezer API to seamlessly fetch songs, artist information, album details, genre data, and even radio content. This integration adds a rich layer of content to the web player, enhancing the user experience.

  • Musixmatch API for Lyrics: To provide users with an immersive experience, the Musixmatch API is integrated to fetch accurate and synchronized lyrics for each song. This dual-API approach showcases my ability to work with diverse technologies and integrate them harmoniously.

  • Backend Proxy for CORS: To resolve CORS-related errors, I implemented a backend proxy. This solution ensures smooth communication between the frontend and the Deezer and Musixmatch APIs, overcoming challenges and enhancing the project's reliability. (Link to project here).

Technologies Used

  • ReactJS: The project is built on the ReactJS library, ensuring a smooth and interactive user interface.

  • Tailwind CSS: Tailwind CSS is employed for styling, allowing for a clean and visually appealing design.

  • Redux and Redux Toolkit: These state management tools enhance the project's scalability and maintainability, ensuring efficient data flow.

  • Color Thief: The Color Thief library is utilized to extract color palettes from album artwork, contributing to a visually cohesive design.

Learning Highlights

  • API Integration Mastery: Ridm challenged me to integrate two distinct APIs, Deezer and Musixmatch, fostering a deeper understanding of API interactions and data retrieval.

  • Responsive Design: The project pushed the boundaries of my design skills, emphasizing the importance of creating not only aesthetically pleasing designs but also ensuring responsiveness across various devices.

  • Flexbox and Grid Layout: A deeper understanding of Flexbox and Grid layout was gained, contributing to the creation of flexible and well-organized user interfaces.

  • Documentation Proficiency: Ridm encouraged me to dive into documentation, enhancing my ability to comprehend and implement features by effectively navigating through technical documentation.

Showcase

Screenshots/GIFs

Screenshot 1 Screenshot 2 Screenshot 3 Screenshot 4 Screenshot 5 Screenshot 6

Demo Link

Live Demo

Feedback

I invite you to explore this project and provide any feedback you may have. Your insights are valuable, and I appreciate your time in reviewing my work. Thank you for your consideration!

About

Ridm is a web player project created using React, Redux and TailwindCSS. It utilizes Deezer's API to get song data, and Musixmatch API to get song lyrics.

https://ridm.netlify.app


Languages

Language:JavaScript 97.9%Language:CSS 1.9%Language:HTML 0.2%