NOTTA - Music Streaming Platform (Frontend)

Project Description

NOTTA is a frontend music streaming platform designed to provide users with an immersive experience for discovering, listening to, and exploring music. The platform features a wide range of music genres, albums, singles, and artists, with a focus on user-friendly navigation and seamless playback. Key features include a responsive design, dynamic routing, and interactive components for browsing and playing music.

Key Features:

• Music Catalog: Browse albums, singles, and artists with detailed information.
• Music Player: Play, pause, and control music playback with a sleek and intuitive UI.
• Genre Exploration: Explore music by genre with a visually appealing grid layout.
• Search Functionality: Search for artists, albums, and singles with dynamic results.
• Responsive Design: Optimized for desktop, tablet, and mobile devices.
• Dynamic Routing: Seamless navigation between pages using React Router.
• State Management: Efficient handling of music playback and user interactions using React hooks.

Technologies Used:

• Frontend: React, Tailwind CSS, React Router
• State Management: React Hooks (useState, useEffect, useContext)
• Routing: React Router DOM
• Icons: Lucide React
• Audio Playback: HTML5 Audio API
• Data Management: Local data modules for artists, albums, and singles

---

How to Run the Project

1. Clone the Repository:

   git clone https://github.com/Aamooum/NOTTA.git
   cd NOTTA

2. Install Dependencies:

   npm install

3. Run the Development Server:

   npm start

4. Open in Browser: Visit http://localhost:3000 to view the application.

---

Project Structure

src/
├── components/              # Reusable UI components
│   ├── AlbumHeader/         # Album header component
│   ├── AlbumTable/          # Album track list component
│   ├── Footer/              # Footer component
│   ├── GenresGrid/          # Genre grid component
│   ├── HorizontalScrollArtists/ # Horizontal scroll for artists
│   ├── HorizontalScrollMediaView/ # Horizontal scroll for albums/singles
│   ├── MediaGridView/       # Grid view for albums/singles
│   ├── MusicPlayerUI/       # Music player UI component
│   ├── ProgressBar/         # Progress bar component
│   ├── SearchPopularArtists/ # Popular artists search component
│   ├── SectionHeader/       # Section header component
├── data/                    # Static data (e.g., artists, albums, singles, genres)
├── pages/                   # Page components (e.g., Home, Album, Artist, Genre, Search)
├── App.js                   # Main application component
├── index.js                 # Entry point

---

Screenshots

Home Page

Single Page

Album Page

Artist Page

Search Page

Search Result Page

Genres Page

Genre Page