Jamming project error no token provided

hi im getting error before the build exercise it giving a error 400, can someone please help im stuck, been at it all day but cant seem to fix the issue

{
  "error": {
    "status": 401,
    "message": "No token provided"
  }
}

my spotify.js file

const ClientId = 'f22c9c9a605840a0a474a659381d1app';
const redirectUri = 'http://localhost:3000';



let accessToken;

const Spotify = {
    getAccessToken() {
        if (accessToken) {
            return accessToken;

        }

        // check for access token match
        // window href will get the url we want to get
        const accessTokenMatch = window.location.href.match(/access_token([^&]*)/);
        const expiresInMatch = window.location.href.match(/expires_in([^&]*)/);

        if (accessTokenMatch && expiresInMatch) {
            accessToken = accessTokenMatch[1];
            //accessToken = accessToken.replace(`=`, ``);
            const expiresIn = Number(expiresInMatch[1]);
            // This clears the parameter, allowing to grab a new access token when it expires
            window.setTimeout(() => accessToken = '', expiresIn * 1000);
            window.history.pushState('Access Token', null, '/');
            return accessToken;

        }else {
            const accessUrl = `https://accounts.spotify.com/authorize?client_id=${ClientId}&response_type=token&scope=playlist-modify-public&redirect_uri=${redirectUri}`
            window.location = accessUrl;
        }

    },

    search(term) {
        const accessToken = Spotify.getAccessToken();
        return fetch(`https://api.spotify.com/v1/search?type=track&q=${term}`, 
            { headers: {
                Authorization: `Bearer ${accessToken}`
            }
        }).then(response => {
            return response.json();
        }).then(jsonResponse => {
            if (!jsonResponse.tracks) {
                return [];
            }
            return jsonResponse.tracks.items.map(track => ({
                id: track.id,
                name: track.name,
                artist: track.artist[0].name,
                album: track.album.name,
                uri: track.uri
            }));
        });
    },

    savePlayList(name, trackUris) {
        if (!name || !trackUris.length) {
            return;
        }

        const accessToken = Spotify.getAccessToken();
        const headers = { Authorization: `Bearer ${accessToken}`};
        let userId;

        return fetch('https://api.spotify.com/v1/me', { headers: headers }
        ).then(response => response.json()
        ).then(jsonResponse => {
            userId = jsonResponse.id;
            return fetch(`/v1/users/${userId}/playlists`, 
            {
                headers: headers,
                method: 'POST',
                body: JSON.stringify({ name: name })
            }).then(response => response.json()
            ).then(jsonResponse => {
                const playlistId = jsonResponse.id;
                return fetch(`/v1/users/${userId}/playlists/${playlistId}/tracks`, {
                    headers:  headers,
                    method: 'POST',
                    body: JSON.stringify({ uris: trackUris })
                })
            })

        })
    }
}

export default Spotify;

app.js

import React from 'react';
import './App.css';

import SearchBar from '../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';

import Spotify from '../../util/Spotify';


class App extends React.Component {

  constructor(props) {
    super(props);
    
    this.state = {
      // searchResults: [{name: 'name1', artist: 'artist1', album: 'album1', id: 1},
                      // {name: 'name2', artist: 'artist2', album: 'album2', id: 2},
                      // {name: 'name3', artist: 'artist3', album: 'album3', id: 3}
                    // ],
                      // playlistName: 'My PlayList',
                      // playlistTracks: [{name: 'playlistName1', artist: 'playlistArtist1', album: 'playlistAlbum1', id: 4},
                      // {name: 'playlistName2', artist: 'playlistArtist2', album: 'playlistAlbum2', id: 5},
                      // {name: 'playlistName3', artist: 'playlistArtist3', album: 'playlistAlbum3', id: 6}
                    // ]

                    searchResults: [],
                    playlistName: 'My Playlist',
                    playlistTracks: []

    };
    this.addTrack = this.addTrack.bind(this);
    this.removeTrack = this.removeTrack.bind(this);
    this.updatePlaylistName = this.updatePlaylistName.bind(this);
    this.savePlaylist = this.savePlaylist.bind(this);
    this.search = this.search.bind(this);
  }

  addTrack(track) {
    let tracks = this.state.playlistTracks;
    if (tracks.find(savedTrack => savedTrack.id === track.id)) {
      return;
    }

    tracks.push(track);
    this.setState({ playlistTracks: tracks });
  }

  removeTrack(track) {
    let tracks = this.state.playlistTracks;
    tracks = tracks.filter(currentTrack => currentTrack.id !== track.id);

    this.setState({ playlistTracks: tracks });
  }

  updatePlaylistName(name) {
    this.setState({ playlistName: name });
  }
  
  savePlaylist() {
    //alert("this method is linked to the button correctly!")
    const trackUris = this.state.playlistTracks.map(track => track.uri);
    Spotify.savePlaylist(this.state.playlistName, trackUris).then(() => {
      this.setState({
        playlistName: 'New Playlist',
        playlistTracks: []
      })
    })
  }

  search(term) {
    window.sessionStorage.searchTerm = term;
    //console.log(term)
    Spotify.search(term).then(searchResults => {
      this.setState({ searchResults: searchResults })
    })
  }

  //componentDidMount() {
    //window.addEventListener('load', () => {Spotify.getAccessToken()});
  //}

  render(){
    return (
      <div>
        <h1>Ja<span className="highlight">mmm</span>ing</h1>
        <div className="App">
          {/* <! -- Add a SearchBar component -->  */}
          <SearchBar onSearch={this.search} />
          <div className="App-playlist">
            {/* <!-- Add a SearchResults component --> */}
            <SearchResults searchResults={this.state.searchResults}
                            onAdd={this.addTrack} />
            {/* <!-- Add a Playlist component --> */}
            <Playlist playlistName={this.state.playlistName} 
                      playlistTracks={this.state.playlistTracks} 
                      onRemove={this.removeTrack} 
                      onNameChange={this.updatePlaylistName}
                      onSave={this.savePlaylist} />
          </div>
        </div>
      </div>
    )
  }
}

export default App;

searchbar.js

import React from 'react';
import './SearchBar.css';

class SearchBar extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            term: ''
        }

        this.search = this.search.bind(this);
        this.handleTermChange = this.handleTermChange.bind(this);
    }

    search() {
        this.props.onSearch(this.state.term);
    }

    handleTermChange(event) {
        this.setState({ term: event.target.value });
    }

    render(){
        return(
            <div className="SearchBar">
                <input onChange={this.handleTermChange} placeholder="Enter A Song, Album, or Artist" />
                <button className="SearchButton" onClick={this.search}>SEARCH</button>
            </div>
        )
    }
}

export default SearchBar;

playlist.js

import React from ‘react’;

import ‘./Playlist.css’;

import TrackList from ‘…/TrackList/TrackList’;

class Playlist extends React.Component {

constructor(props) {

    super(props);

    this.handleNameChange = this.handleNameChange.bind(this);

}

handleNameChange(event) {

    this.props.onNameChange(event.target.value);

}

render() {

    return (

        <div className="Playlist">

            <input defaultValue={"New Playlist"} onChange={this.handleNameChange} />

            <TrackList component tracks={this.props.playlistTracks}

                        onRemove={this.props.onRemove}

                        isRemoval={true}

                         />

            <button className="Playlist-save" onClick={this.props.onSave}>SAVE TO SPOTIFY</button>

        </div>

    )

}

}

export default Playlist;

It looks like your Client ID is invalid, so Spotify displays this error the first time a new user tries to authenticate:

INVALID_CLIENT: Invalid client

When you generated it on Spotify, did you remember to authorize your specific redirect URI?

image is what mine shows

For what it’s worth, I used the client ID from my project in your Spotify.js (and added the trailing / to the redirect URL) and was able to get to the next issue