RadioStation 23 | Online Radio Player Application

A web application for streaming radio stations with a user-friendly dashboard.

How to use

For using Clone this project

git clone https://github.com/AJOYSR/RadioStation23.git

cd to the repository and put this into terminal

npm install

to run the app

npm run dev

Features

Radio Station Display

• View a list of available radio stations with detailed information.

Station Information

• Display detailed information about each radio station, including name, country, language, and genre.

Personal Choice Theme

• If user select theme, local storage will save it for better experience of user

Visual Categorization

• Categorize stations based on language and genre, providing a visually appealing interface.

Voting System

• Users can vote for their favorite radio stations, and the total votes are displayed.

Like and Play Buttons

• Like and play buttons for each station for user interaction.

Streaming Player

• An integrated streaming player for playing radio stations with volume control, mute option, and loop functionality.

Dark Mode

• Toggle between light and dark modes for personalized user experience.

Responsive Design

• Ensure a seamless experience on various devices with a responsive design.

Accessibility

• Design with accessibility in mind to ensure usability for a diverse audience.

Mobile-Friendly

• Optimize the layout for mobile devices to provide a smooth experience on smaller screens.

User-Friendly UI

• Control audio playback with play, pause, volume adjustment, and loop toggle.

Optimized Performance

• Ensure compatibility with major web browsers for a wide user reach.

Code Modularity

• Structure the codebase in a modular way for maintainability and scalability. Context API Usage

• Utilize React Context API for managing global state, such as dark mode preferences.

Tailwind CSS Integration

• Integrate Tailwind CSS for efficient styling and consistent design.

Screenshots

this the landing/homepage

this the live location of the RadioStation

Music player with controller

Find by country

Find by Name

Technologies

Frontend:

React:

• A JavaScript library for building user interfaces.

React Router:

• A standard library for routing in React applications.

Tailwind CSS:

• A utility-first CSS framework used for styling.

React Player:

• A React component for playing various types of media.

State Management:

React Context API:

• Used for managing global state, such as the dark mode preference.

CSS:

• Cascading Style Sheets for styling the application.

Markdown:

• A lightweight markup language for formatting.

Development Environment:

npm (Node Package Manager):

• Package manager for installing and managing project dependencies.

Visual Studio Code:

• A popular code editor for writing and editing code.

Version Control:

Git:

• Distributed version control system for tracking changes in the codebase.

GitHub:

• A web-based platform for hosting and collaborating on Git repositories.

Deployment

• netlify | free hosting site

Authors

• @Ajoy Sarker

Deployment

To deploy this project run

  npm run build