🎞️infotainment🎞️

What is infotainment? 🤔

A website built using React meant to display your information and allow you to listen to music. Use infotainment to relax, study, or browse. The choice is yours.

How do I use infotainment? 🐱‍💻

1. Clone this repository git clone https://github.com/davido-noowin/infotainment.git
2. CD into the directory and create a .env file in the root folder
3. Install dependencies via npm install
4. Register for a client ID and secret on the Spotify developer dashboard NOTE: You must have a premium Spotify account
5. In the Spotify developer dashboard, include the following redirect URIs when prompted:

6. In the .env file, add the following:

SPOTIFY_CLIENT_ID="my spotify client id"

SPOTIFY_CLIENT_SECRET="my spotify client secret"

7. Run the application by typing npm run start This will fire up the backend server for the Spotify API and the UI.

8. Select videos to play using the sidebar and login to Spotify to listen to music.

9. Use the built-in Spotify player to listen to your playlists or new songs/albums.

10. Enter zip code for weather updates NOTE: Weather readings only work for US-based zip codes

11. Sit back, relax, and enjoy!

References 💡

• Figma design
• Spotify Web API documentation
• Spotify Web Playback
• YouTube iFrame API
• Weather (Open-Meteo API)
• Zip Code API

Images 🖼️

Home Screen:

Spotify Search:

User's Spotify Playlists:

Changing Videos & Weather:

Browsing Spotify Albums:

Listening to Longer Playlists:

Built With 🔨

• React - Frontend
• Express JS - Backend
• Vite - Code Bundling & Packaging