Scores by Google Lighthouse:
What Users Can Do with CastAlleys
Just search for what you want to listen to and you are ready to play the show. You can use it on your phone without having to download an extra app since it's a progressive web app. To add some fun when enjoying its simplicity, you can choose what color you want the app in.
- Written in React, JavaScript, HTML5, and CSS3.
- Built with Create React App, React Router, and Progressive Web Apps.
- Deployed to Heroku and Netlify.
- Non-sensitive data is stored in the local storage of user's web browser.
- Run
npm installto install all the dependencies. - Get your freemium X-ListenAPI-Key from https://www.listennotes.com/api/ to be able to call the podcast search API.
- Create a file named
apiKey.jsin thesrcfolder. Paste this lineexport const apiKey = "key";into the file and replace the stringkeywith your key grabbed from the previous step. - Run
npm startto make edits in the development mode.
There are many free resources that helped me learn new things and solve problems for building this project, as well as the paid resources. Below are my thanks to some of the free resource providers.
If you are reading this and you are learning to code, I hope the info below can save you some time of searching for free and good resources. Shoot me an email if you want to know about the paid resources.
Thank you,
- Wenbin Fang, for making Listen Notes - the podcast search & directory API.
- Wes Bos, for teaching how to build 30 things with vanilla Javascript.
- Wes Bos and Scott Tolinski, for hosting Syntax.fm and talking about Pre-launch Checklist and Workflows.
- the team behind React, for sharing how to think in React.
- the team behind React Router, for sharing Learn Once, Route Anywhere.
- Canva, for offering free visual design templates.
- Justin Avery, for making Am I Responsive to check and present responsive designs.
The navigation bar is inspired by Patagonia. The homepage cover image is inspired by Spotify.
If you have questions on how to get the app up and running or want to say hi, please shoot me an email.
CastAlleys was built as a capstone project for an online coding bootcamp (Altcademy) I enrolled. My goals for this project were to build something at least I would use (I like podcasts) and something that I could practice what I had learned with and challenged me to learn more.
- Some podcast listeners who use computers more often than mobile phones want to search and play a show directly from their computer, without the need to take out their phone, unlock the screen and open an app. They will find CastAlleys handy to use since it is optimized for web users.
- There are also podcast listeners who want to keep their mobile apps to the minimum. They can use CastAlleys on their phone's home screen without downloading it since it is a progressive web app.
- Search:
- Podcast search
- Episode search with matched keyword(s) highlighted in titles, descriptions and transcripts
- Episode search within a given podcast
- Podcast streaming with playback controls
- Star a podcast
- Like an episode
- Track play history
- Customizable theme color
In case you are interested in checking out wireframes, here are the initial drafts I made with pen and paper for large screens: link. For wireframes of small screens and design changes, I coded them without sketches.
- Steps: generate the idea, plan for the scope of work and timeline, decide on the art direction, make wireframes for critical pages, plan for the component hierarchy in React, and set up the file structure based on the hierarchy.
- Major steps: Build a static version. Then move on to build an interactive version by adding features one at a time.
- For each major step, repeat the process of 'build, test, deploy, commit to GitHub'.
- Lighthouse was used to audit the app.
- Prettier was used to format the code.