Deezer API

NextJS / ReactJS (Redux & SWR)

Deezer API is a music player and artist search tool connected to Deezer's external and public API.
It allows you to browse its database to find your favorite tracks, play them, and create your own
Library with your data.

DEPLOY:
https://deezer-player-react.vercel.app

Index

1. Project Title and Deployment Link

2. Features

3. Components

4. Technologies and Tools used

5. Lighthouse Results

6. Project Setup

7. Contribution

8. Project Status

9. Project Developer

Features

✔️ APP state managed with Redux and SWR

✔️ Search Engine for Tracks and Artists

✔️ Music Player with Playback Controls

✔️ Library for Adding or Removing Favorite Tracks and/or Artists

✔️ Error handling

✔️ Responsive design

✔️ SCSS with custom variables

✔️ Flexbox and grid layouts

✔️ User feedbacks

Components

⚛️ SEARCH ENGINE
    - TRACKS: 3 items to choose from, and the selected one will play in the PLAYER
    - ARTISTS: 3 related artists listed, selecting one navigates to their page dynamically

⚛️ ARTIST PAGE
    - Displays the artist's top 5 tracks, with the option to play them
    - Artist's image
    - Button to automatically play the first track
    - Favorite button to add the artist to the Artists section of the Library

⚛️ PLAYER
    - Track title
    - Artist name
    - Album image
    - Track progress bar
    - Total track duration
    - Volume control with Mute option
    - Playback buttons:
      - Play / Pause
      - Previous track
      - Next track

⚛️ TRACK
    - Track title
    - Artist name
    - Type of item
    - Album cover
    - Favorite icon to Add or Remove from Library

⚛️ LIBRARY
    Local and persistent database that allows storing:
      - Favorite Tracks
      - Favorite Artists

⚛️ FAVORITE BUTTON
    Allows Adding or Removing the track and/or artist from the Library

⚛️ TRENDING TRACKS
    A dynamic list that compiles the top 12 global tracks

⚛️ SPINNER
    Used for loading elements

⚛️ UNDER CONSTRUCTION
    A presentation component for empty pages

⚛️ ERROR / NOT FOUND
    A presentation component for errors and non-existent pages

Technologies and Tools used

Lighthouse Results

Project Setup

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.js. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Contribution

If you want to contribute to this project, follow these steps:

1. Perform a fork to the repository.

2. Create a branch for your feature or bugfix: git checkout -b feature/your-feature-name

3. Make the necessary changes and commits: git commit -m 'Add some feature'

4. Push to branch: git push origin feature/your-feature-name

5. Send a pull request to the original repository.

Project Status

Project Developer

Kevin Schans