SpotLight is a web app which uses spotify developer APIs and lists your most listened songs, albums, artists and genres.

Overview

SpotLight

SpotLight is a web app which uses spotify developer APIs and lists your most listened songs, albums, artists and genres.

Tech Stack

React NodeJS JavaScript Spotify

Setting Up

  • Fork the repo to your account.
  • Clone the repo to your local computer git clone
  • Make sure Node js is installed on your machine (Node >= 14.0.0 and npm >= 5.6)
  • cd into the project directory and run npm install
  • Login or create an account at the Spotify Developers Dashboard.
  • Click on the Create an App button in the spotify developers dashboard. Fill the details and submit.
  • Note down the Client ID of the app just created.
  • Go to your app Edit Settings and add http://localhost:3000 as a redirect URI.
  • Create a file named .env.local at the project root directory with the following content:
REACT_APP_CLIENT_ID=
   

   

Replace with the one you got from the spotify console.

Folder Structure

├── src/
    ├── Pages/              Code for the pages
    ├── components/         UI Components
    ├── config/             API configs
    ├── styles/             CSS Files

Resources

Comments
  • [FEATURE] Create a NavBar

    [FEATURE] Create a NavBar

    Create a top NavBar component, it should have the following:

    • A functional Logout button.
    • Brand name SpotLight.
    • Profile Icon.

    Suggestions are welcomed :smiley:.

    enhancement JWOC medium 
    opened by sahilsaha7773 10
  • [FEATURE] Add Page titile

    [FEATURE] Add Page titile

    Currently, the title of the website is the default React App, change the title to Home | SpotLight for the Home Page and Login | SpotLight for the Login Page.

    enhancement good first issue JWOC easy 
    opened by sahilsaha7773 3
  • [FEATURE] Show Artist Popularity

    [FEATURE] Show Artist Popularity

    The response data from the top artists Spotify API has the popularity for each artist. Use that data to display the artist popularity in the artist cards.

    Artist Card Screenshot

    Screenshot from 2022-01-21 15-06-02

    enhancement good first issue JWOC easy 
    opened by sahilsaha7773 3
  • [FEATURE] Add Link in

    [FEATURE] Add Link in "Top Artists" section

    Each artist card in the "Top Artists" section should open the Spotify artist page on click. You can get the links from the data received in the top artists API response.

    Artist Card Screenshot

    Screenshot from 2022-01-21 15-06-02

    enhancement good first issue JWOC easy 
    opened by sahilsaha7773 3
  • [FEATURE] Create a seperate Profile Page

    [FEATURE] Create a seperate Profile Page

    Create a separate profile page at the /profile route. It should contain the details of the logged-in user, such as name, profile photos, country etc. The user data can be fetched from the Spotify web API (https://developer.spotify.com/documentation/web-api/reference/#/operations/get-current-users-profile).

    enhancement JWOC hard 
    opened by sahilsaha7773 2
  • Changed Title of Home

    Changed Title of Home

    #5

    Added Home Title. It seems that the login page is not created yet. I could not find anything in the application or in the code. Please correct if wrong.

    opened by TimJ0212 1
Owner
Sahil Saha
Google Code-in 2018 Grand Prize Winner @fossasia | MERN Stack | Flutter | Deep learning |
Sahil Saha
A review aggregator web application that allows users to review albums by leveraging the Spotify Web API.

Reviewify Summary Reviewify is a review aggregator platform that leverages the Spotify Web API. It allows users to: Login with their Spotify accounts

Abhi Ardeshana 3 Oct 7, 2022
It is a discord bot bot which can play lofi song in different language 24/7. It has premium system and cool embed looks with buttons. It can play youtube songs, playlists. This bot code was made by Supreme#2401. It uses djs V12

Lofi-Radio-Music-Bot It is a discord bot bot which can play lofi song in different language 24/7. It has premium system and cool embed looks with butt

Diwas Atreya 89 Jan 2, 2023
Spotlight-like search bar for spotify

Spicetify power bar Spotlight-like quick search bar to navigate to tracks, albums, artists and playlists. Table of contents Installation Usage Setting

Jeroen 43 Jan 4, 2023
spotify.ts is an wrapper built around Spotify's Web API

spotify.ts About spotify.ts is an wrapper built around Spotify's Web API. Features Fast Object Oriented Typescript, ESM, CJS support Easy to Use Insta

null 6 Nov 17, 2022
create a bandcamp-style audio player for selling albums on itch.io

blamscamp Mmh, options, runnin' out of options, Mmh, options, used to have options bandcamp is great (at time of writing,) but it would be great to ha

Blackle Morisanchetto 154 Dec 21, 2022
Spotify 2.0 com NextJS 12 - MIddleware, TailwindCSS, Spotify API, NextAuth, Recoil

Spotify Clone A spotify clone made with NextJS 12, TailwindCSS, NextAuth, Spotify API, Recoil Lessons Learned Setting up NextJS with Tailwind. NextAut

zF4ke 3 Mar 14, 2022
Spotify clone using Next.js, Spotify API, Tailwind, NextAuth, Recoil

Next.js + Tailwind CSS Example This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind

Abdelwahab Hussein 2 Dec 25, 2021
I’m a very useful music bot that can make you play a music with a simple command! I have a lot of good commands that you can have a better experience playing your favorites songs!

I’m a very useful music bot that can make you play a music with a simple command! I have a lot of good commands that you can have a better experience playing your favorites songs!

Hugo Kishi 2 Aug 16, 2022
A decentralized Music Ownership System developed on Truffle Suite and React Bootstrap to allow Music artists to upload their content to the blockchain, that can be streamed by users

A decentralized Music Ownership System developed on Truffle Suite and React Bootstrap to allow Music artists to upload their content to the blockchain, that can be streamed by users.

M. Adil Fayyaz 10 Sep 5, 2022
Advanced Music Bot It is an advance type of discord music bot which plays high quality of music with spotify

Advanced Music Bot It is an advance type of discord music bot which plays high quality of music with spotify, apple music support . You can save your songs and play it. It also has DJ mode system.

Diwas Atreya 65 Dec 25, 2022
Spotify radio is an audio streaming app where you can add effects in real time.

Spotify Radio - Semana JS Expert 6.0 Spotify radio is an audio streaming app where you can add effects in real time. JS-Expert Project of the Week by

Luis Fernando 6 Apr 25, 2022
Web Application that represents a music player using the spotify API, React, JS, CSS, HTML, nodeJS, Firebase, material-ui, JSON and other technologies. Made by Yohan Hmaiti

Web Application that represents a music player using the spotify API, React, JS, CSS, HTML, nodeJS, Firebase, material-ui, JSON and other technologies. Made by Yohan Hmaiti

Yohan Hmaiti 2 Jan 8, 2022
Spotify Web API with Next.js

Resumo Statsfy é um site que exibe seus artistas e músicas mais escutadas, além de músicas recentes. Você pode usar clicando neste link. (Apenas usuár

otaviozin 8 Sep 5, 2022
Add some fire to your Spotify music playlists 🔥🎧

Spotifire ?? Add some fire to your Spotify music playlists ?? Built With Next.js React Tailwind CSS (v3.0) NextAuth Recoil Spotify Web API Preview Vis

Niloy Sikdar 15 Jun 19, 2022
Replace your Spotify album artwork with an animated version.

Spotify Animated Album Artwork Replace your Spotify album artwork with an animated version. preview.mp4 Install My english is broken, please bear with

qier222 4 Jul 14, 2022
update your twitter banner with the song you're currently playing on Spotify

This is a Next.js project bootstrapped with create-next-app. Getting Started First, run the development server: npm run dev # or yarn dev Open http://

Dunsin 4 Oct 17, 2022
🎼 - MusicBridge Recieves MIDI messages and converts them to AppleScript commands to control Apple Music and Spotify for macOS.

MusicBridge MusicBridge Recieves MIDI messages and converts them to AppleScript commands to control Apple Music and Spotify for macOS. Installation Si

null 3 Dec 20, 2022
A simple package to download music tracks from spotify 🎵

A simple package to download music tracks from spotify ??

Alen Yohannan 26 Dec 25, 2022
SpotifyUiClone - A Ui Clone of Spotify, only studing purporses

Spotify Ui Clone An Kinda Clone of the Spotify Ui for studing purposes Summary This is a project made in React Js, so the idea is to make an ui for an

Jf_Dess 1 Jan 7, 2022