PodApp
PodApp is inspired by my love for Podcasts!
It's an application for discovering and listening to podcasts in the web browser. The user can browse different genre categories or search for a podcast.
Features
> Play podcasts via Audio Player
> Browse podcast charts & categories
> Search Podcasts
> Discover random category on homepage
> Responsive design
Project Goal
This project's primary purpose was to generate a fast site that could also be used on a mobile. I wanted the user to feel that they can quickly discover a new podcast whilst having a pleasant experience using the site.
On the technical side, testing was the main focus. I wanted to learn how to use React Testing Library whilst implementing TDD methodologies. I also wanted to learn how to use React Router and reframe from using Redux and instead use a combination of React Context and component containers.
In terms of planning, I wanted to flesh out the different components and states that would be needed for the project, which you can see below.
Planning & Lookdev
Technologies
React was was the obvious choice to use because of its state management and reusable components. I could easily pull data from the API and use array iterations to pass the data to different components.
I used a custom hook to handle the data requests. The hook was reused throughout the different containers and was very helpful when creating each page, as I could feed the requested URL into the hook and it would manage the API request, loading state and data conversion.
I decided to use React Context to handle the data being passed to the media player component, to avoid having to pass props through intermediate elements.
ReactJS
Material Ui
Itunes API
Technical Hurdles & Solutions
The most challenging part of the project was finding the correct API requests for the needed data. The Itunes API documents are limited, so it required many google searches and experimenting.
I also discovered that the Itunes API does not supply all of the episodes data. However, the JSON data provides an RSS feed, so after the inital response, I parsed the RSS feed and combined the two response arrays. Some of the data is inconsistent, so I handled this in the custom hook.
I attempted to use TDD throughout, but sometimes I wasn't so disciplined and tinkered before writing tests. It became apparent that React hooks are tricky to test, and I ended up using React Testing Library because I was struggling to destructure the functions with Enzyme.
Code Snippets
Lessons Learned
This project was a great way to improve my understanding of React, such as React Context and React Router. I also learnt how to use Docker at a superficial level and became familiar with React Testing Library.
TDD with unit testing trained me to write UI components which were far more straightforward, easier to maintain, and easier to compose and reuse with other components. I realised how robust unit testing is as it helped refactor my components and made the project easier to maintain.
In the future, to make these projects even more professional, I will use a better Git workflow with issues and pull requests while using expressive and precise branch names and committing messages.
Overall, it was a highly satisfying experience, and I'm excited to learn even more on my next project.
Other Projects
MY MOVIE LIST
Inspired by my interest in films, this application allows users to create a list of movies to watch and rate.
WEATHER CITY APP
Users can search for a city name and if matched, will display current weather.