📡

Esma3 Radio

Featured

Professional web app for listening to radio stations worldwide, with a Quran section, smart recommendations, and an advanced notification system

Overview

Esma3 Radio is a comprehensive web application designed to deliver a professional listening experience for radio stations from around the world. The app features a massive database containing thousands of radio stations categorized by country and genre, allowing users to discover new stations effortlessly. It includes a dedicated Quran section with famous reciters, offering live listening and full playback control. The app is powered by a smart recommendation engine that suggests stations based on listening history and preferences. The system supports user accounts with favorites saving, along with an advanced notification system that alerts users about new programs and favorite stations.

Features

  • Browse thousands of radio stations categorized by country and genre with advanced search and smart filtering capabilities
  • Dedicated Quran section featuring a comprehensive library of famous reciters with an advanced audio player that resumes from the last position
  • Smart recommendation engine that analyzes the user's listening history and suggests new stations matching their taste
  • Effective notification system that alerts users when favorite programs start and when new stations are added
  • User accounts with the ability to save favorite stations and sync them across different devices
  • Responsive design that works smoothly on all devices from mobile to desktop with a comfortable dark mode

How It Works

The app relies on Next.js for the frontend with PostgreSQL as the primary database through Prisma ORM. Station data is fetched from multiple sources and stored locally with periodic updates. The authentication system uses NextAuth with support for social media login. Recommendations are calculated through an algorithm that analyzes listening history and matches it with similar users' patterns.

Challenges

The biggest challenge I faced was managing a massive database of thousands of stations while ensuring fast search and filtering. Another challenge was finding reliable APIs for live radio streaming, as many sources frequently go down or change their URLs. Building the smart recommendation engine also required designing an efficient algorithm that analyzes user behavior without impacting app performance.

Technologies Used

Next.jsReactTypeScriptTailwind CSSPostgreSQLPrismaNextAuthPWAshadcn/uiRadix UIFramer MotionZustandRechartsReact Hook FormZoddnd-kitSonnerEmbla CarouselLucideWeb Push APIVercelGitNode.jsBunnext-intlnext-themesReact QuerySharpcmdkdate-fnsTanStack TableMDX EditorReact MarkdownESLint