UMG Utility Library

The purpose of this library is to provide reusable API fetches to both Spotify & Contentful without the need to rewrite the same logic across multiple projects. Due to the time limit & nature of this project, there is plenty of room for expanding the libraries functionality. Some of these ideas can be found under the Expanding the Library section.

Table of Contents

1. Installation & Setup
2. Spotify Requirements
3. Contentful Requirements
4. Spotify Utilities
5. Contentful Utilities
6. Expanding the Library

Installation and Setup

Install the library via npm or yarn npm i @brandonireland/umgutilities or yarn install @brandonireland/umgutilities

Spotify Requirements

The Spotify utilities & endpoints this library provides requires a client ID as well as a client secret and an app that has a Redirect URI. The details of the authentication process for Spotify can be found here for reference.

Quick tutorial for local development:

1. Create a Spotify developer account found here and fill in your details.
2. In your Spotify Developer Dashboard, click Create An App and provide a Name and Description.
3. To use this locally while developing, click on your newly developed app in your Dashboard, go to Edit Settings in the navigation and under Redirect URIs and add in a callback URI. For example, https://localhost:3000/callback
4. Your client ID as well as client secret can be found in your applications dashboard.

Contentful Requirements

To utilize the Contentful methods this library provides, requires a space, environment, accessToken & host provided by Contentful.

Quick Tutorial for local development:

1. Create a Contentful Account here.
2. Create an Organization and a space for your project.
3. In your Spaces home, navigate to the settings tab and click on API Keys.
4. On the top right of the page, select Add API Key, then name your API key and click save.
5. The space ID, Content Preview API - access token , & environment value will be needed. For development purposes our host key will be preview.contentful.com.

Using the Library

Spotify Example

import  React, { useEffect, useState } from  'react';
import { SpotifyHelpers } from  '@brandonireland/umgutilities';

const  SpotifyData  = () => {
	const [data, setData] = useState(null);

	useEffect(() => {
		async function fetchData() {
			const spotify = new SpotifyHelpers({ clientId: '<CLIENT_ID>', secret: '<SECRET>' });
			spotify.artistId = '2YZyLoL8N0Wb9xBt1NhZWg';
			const data = await spotify.getArtist();
			setData(data);
		}
		fetchData();
	}, []);

	return (
		<div>Hello World!</div>
	);
}
export  default  SpotifyData;

The Library provides these Methods: | Method | Parameters | Type | Description | |--------------------|-------------------|------------------------|----------------------------| | getArtist | Id | String | Returns Artist Data | | getArtists | [Id] | String[] | Returns Array of Artists | | getArtistTopTracks | Id, market | String[], String | Returns Artists Top Tracks | | getRelatedArtists | Id | String | Returns Related Artists | | getArtistAlbums | Id, market, limit | String, String, Number | Returns Artists Albums | | getAlbums | [Id] | String[] | Returns Array of Albums | | getAlbum | Id | String | Returns Album | | getAlbumTracks | Id, market, limit | String, String, Number | Returns Album Tracks |

The Library provides these Getters

| Get | Type | Default Value | Description | | -------- | ------ | ------------- | ----------------- | | artistId | String | | Returns Artist Id | | limit | Number | 10 | Returns Limit | | market | String | 'US' | Returns Market |

The Library provides these Setters | Set | Type | Description | |----------|--------|--------------------| | artistId | String | Sets the Artist Id | | limit | Number | Sets the Limit | | market | String | Sets the Market |

Contentful Example

import  React, { useEffect, useState } from  'react';
import { ContentfulHelpers } from  '@brandonireland/umgutilities';

const  ContentfulData  = () => {
	const [data, setData] = useState(null);

	useEffect(() => {
		async  function  fetchData() {
			const  contentful = new const contentful = new ContentfulHelpers({ space: '<SPACE_ID>', environment: '<ENVIRONMENT>', accessToken: '<CONTENTFUL_PREVIEW_TOKEN>', host: 'preview.contentful.com' });

			const data = await contentful.getEntries({id: <ENTRY_ID>, limit: 1, include: 10});
			setData(data);
		}
		fetchData();
	}, []);

	return (
		<div>Hello World!</div>
	);
}
export  default  ContentfulData;

The Library provides these Getters | Get | Type | Default Value | Description | |---------|--------|---------------|------------------| | limit | Number | 1 | Returns Limit | | include | Number | 10 | Returns included |

The Library provides these Setters

| Set | Type | Description | | ------- | ------ | -------------------------- | | limit | Number | Sets the Limit | | include | Number | Sets the amount to include |

Expanding the Library

This library could be expanded in many directions. Firstly, the Spotify methods could be expanded to hit different spotify endpoints like Search, Playlists, Shows, etc. The Spotify api can be found here for reference to give a few ideas.

Secondly, the Contentful Methods could be expanded into returning data in a formatted way thats easy to work with. Thirdly, the library could add new classes to support other API's that UMG utilizes frequently.