Live Demo

Description

CLICK HERE FOR FULL PROJECT BREAKDOWN

PodApp is inspired by my love for Podcasts! It's an application to discover and listen to podcasts in the web browser. The user can browse different categories or search for a podcast. The application pulls images and data from the ITunes API.

I've written a few blog posts about the making of the app here.

Tecnologies Used

• React & Javascript
• Material UI
• Docker
• Jest/Enzyme
• React Testing Library
• Git & Github

Main Features

• Audio player
• Podcast charts
• Search podcasts
• Genre catergories

Technical details

Custom Hook used for fetching data. Full script here.

const useHttp = () => {
  const [httpState, dispathHttp] = React.useReducer(httpReducer, {
    loading: false,
    error: null,
    data: null,
    categoryData: null,
    genres: [],
  });

  const proxyurl = 'https://ancient-river-53390.herokuapp.com/';

  const sendRequest = React.useCallback((url) => {
    dispathHttp({ type: 'SEND' });
    axios
      .get(proxyurl + url)
      .then((response) => {
        if (response.data.results && response.data.results.length === 0) {
          dispathHttp({
            type: 'ERROR',
            errorMessage: 'No results found!',
          });
        } else {
          dispathHttp({
            type: 'RESPONSE',
            responseData: response.data,
            categoryData: null,
          });
        }
      })
      .catch((error) => {
        dispathHttp({
          type: 'ERROR',
          errorMessage: 'Something went wrong! ' + error,
        });
      });
  }, []);

Audio Context for passing down audio data to the media player. Full script here .

export const AudioContext = React.createContext({
  audio: null,
  image: null,
  toggleAudio: () => {},
  autoPlay: false,
  trackName: null,
  artistName: null,
});

const Audio = (props) => {
  const [audio, setAudio] = React.useState(null);
  const [image, setImage] = React.useState(null);
  const [trackName, setTrackName] = React.useState(null);
  const [artistName, setArtistkName] = React.useState(null);

  const toggleAudio = (audioLink, audioImage, artistName, trackName) => {
    setAudio(audioLink);
    setImage(audioImage);
    setArtistkName(artistName);
    setTrackName(trackName);
  };

  return (
    <AudioContext.Provider
      value={{
        audio: audio,
        image: image,
        setAudio: toggleAudio,
        artistName: artistName,
        trackName: trackName,
      }}
    >
      {props.children}
    </AudioContext.Provider>
  );
};

Example of testing with React Testing Library. Full script here .

test('should catch error', async () => {
  axios.get = jest.fn(() =>
    Promise.resolve({
      json: () => Promise.reject(),
    })
  );

  const httpData = setup();
  expect(httpData.isLoading).toBe(false);
  expect(httpData.data).toBe(null);
  expect(httpData.error).toBe(null);
  expect(httpData.categoryData).toBe(null);
  expect(httpData.genres).toStrictEqual([]);

  await act(async () => {
    httpData.sendRequest('www.test.com');
  });

  expect(httpData.error).toBe(
    "Something went wrong! TypeError: Cannot read property 'results' of undefined"
  );
});

Responsive Design

Future Features

• Authentication
• Subscription to Podcasts
• Links to download podcasts
• Listening history
• Listening feed
• Recommendation list
• Profile page

Project setup

Docker Container

In order to run this container you'll need docker installed.

• Windows
• OS X
• Linux

Docker Build

docker build -t podcast-app_sample-prod -f Dockerfile .

Docker Test

docker run -e CI=true podcast-app_sample-prod npm run test

Docker Run

docker run -it --rm -p 1337:80 podcast-app_sample-prod

View http://localhost:1337/ in browser.

NPM

npm install
npm start

Tests

npm test