/Online-Radio

Radio Station 23 is an online radio application that allows users to browse, discover, and listen to their favorite radio stations from around the world.

Primary LanguageTypeScript

Radio Station 23

Radio Station 23 is an online radio application built using React, Tailwind CSS, and Howler.js. It allows users to browse, discover, and listen to their favorite radio stations from around the world.

Features

  • Browse Page: View the top 100 stations, sort by country or language, and search for specific stations.
  • Radio Map Page: Explore stations on a map and start streaming with a single click.
  • Favorite Page: Save liked stations for easy access.
  • Control Bar: Play/pause audio, set auto-stop timer, "like" stations, adjust volume.
  • User Feedback: Intuitive loaders, skeletons, and toasts provide feedback and enhance user experience.

Approach

Technologies Used

  • React: Used for building the user interface.
  • Tailwind CSS: Utilized for styling and creating a responsive design.
  • Howler.js: Integrated for streaming live audio from radio stations.
  • React Context API: Used to manage theme color, audio progress, and like functionality across the app.
  • Local Storage: Saved liked stations to provide a seamless user experience.

Architecture

  • Component-Based Design: Organized the app into reusable components for modularity and maintainability.
  • React Contexts: Utilized contexts to manage global state and share data between components.
  • Responsive Design: Ensured the app is accessible and functional across various devices and screen sizes.
  • Optimized Performance: Implemented intuitive loaders and skeletons to improve perceived performance and user experience.

Future Scope

  • User Authentication: Implement user accounts to personalize the app experience and sync liked stations across devices.
  • Enhanced Discovery: Introduce features like personalized recommendations and station ratings.
  • Social Integration: Allow users to share favorite stations with friends.

online-radio-topaz vercel app_ online-radio-topaz vercel app_ (5) online-radio-topaz vercel app_ (6) online-radio-topaz vercel app_ (1) online-radio-topaz vercel app_ (3) online-radio-topaz vercel app_ (2) online-radio-topaz vercel app_ (7)