Worldy-Music-at-Your-Fingertips

07 Project 1: Interactive Front-End Application

Project Requirements

You and your group will use everything you’ve learned over the past six modules to create a real-world front-end application that you’ll be able to showcase to potential employers. The user story and acceptance criteria will depend on the project that you create, but your project must fulfil the following requirements:

• Use a CSS framework other than Bootstrap.
• Be deployed to GitHub Pages.
• Be interactive (i.e., accept and respond to user input).
• Use at least two server-side APIs.
• Does not use alerts, confirms, or prompts (use modals).
• Use client-side storage to store persistent data.
• Be responsive.
• Have a polished UI.
• Have a clean repository that meets quality coding standards (file structure, naming conventions, follows best practices for class/id naming conventions, indentation, quality comments, etc.).
• Have a quality README (with unique name, description, technologies used, screenshot, and link to deployed application).

  Presentation Requirements

  Use this project presentation template to address the following:

• Elevator pitch: a one minute description of your application
• Concept: What is your user story? What was your motivation for development?
• Process: What were the technologies used? How were tasks and roles broken down and assigned? What challenges did you encounter? What were your successes?
• Demo: Show your stuff!
• Directions for Future Development
• Links to the deployed application and the GitHub repository

  Grading Requirements

  This project is graded based on the following criteria:

• Application uses at least two server-side APIs
• Application uses client-side storage to store persistent data.
• Application doesn't use JS alerts, prompts, or confirms (uses modals instead).
• Application uses a CSS framework other than Bootstrap.
• Application is interactive (accepts and responds to user input)
• Application should be a unique and novel idea.
• Your group should clearly and concisely articulate your project idea.
• Application deployed at live URL and loads with no errors.
• Application GitHub URL submitted.
• Repository has a unique name.
• Repository follows best practices for file structure and naming conventions.
• Repository follows best practices for class/id naming conventions, indentation, quality comments, etc.
• Repository contains multiple descriptive commit messages.
• Repository contains a quality README file with description, screenshot, and link to deployed application.
• Application user experience is intuitive and easy to navigate.
• Application user interface style is clean and polished.
• Application is responsive.
• Your group should present using a slide deck.
• Every group member should speak during the presentation.
• Your presentation should follow the Project Presentation Template.
• There are no major disparities in the number of GitHub contributions between group members.

User Story

As a user I want to select the radio station by Country from the first drop down box. From the Country drop this will give me a list of available radio stations to choose from. When I select/click on the “Play” button the radio station will play on a second page > this will also trigger the second API to leave an inspirational quote as the background image.

Who is the audience?

Our target audience can be broken into 2 main streams: 1) People that are have migrated, or, are travelling in another country and would like to listen to a radio station easily from their chosen part of the world – I.e. not limited to the local radio stations. This could also be someone that wishes to learn a different language; they can tune in and test their current knowledge or listen and learn. 2) Someone who would like to listen to a certain radio station and looking for a set genre. For example; if the user wanted to go to the gym they could select FreshFM to get the heart rate up, alternatively if the user is driving they may like something more suited. 3) OR… “ahem Ben Fawcett”… if you wanted to go Rock Climbing at your favourite outdoor space you can easily tune in to the station of your choice to get the job done! 😉

What is the problems that the product solves?

Easy access to all live streamed radio stations across the world for FREE!

How does the product solve that problem?

Using our user friendly interface, combined with the Radio Browser API and search functions within the application, it will enable the user to select the country of choice followed by the radio station.

Acceptance Criteria

• There is Drop-down box to be able to select a ‘country’.
• There is a Drop-down box with a list of ‘Radio Stations’ for the country I selected.
• When we click the ‘Play’ button it takes me to the second page where my radio station will start playing.
• The second page will have the same search fields as the first, but, smaller and includes a ‘reset’ button (go back).
• In the background the second API will fire and display a Quote in the background; this could have an element of styling – a randomizer that would change colours with every new quote? (Randomizer is an added feature and not a must have – if we have time to complete).
• We will need a ‘Play’ & ‘Stop/Pause’ button.
• Potentially to add in if we have time: I want a saved button/tile that stores my already listened/selected radio station in a column under the search fields.

Installation

N/A

Usage

To use and view this challenge please use this the following link to access the deployed website: "https://benarmstrong81.github.io/Worldy-Music-at-Your-Fingertips/"

Our project allows users to use the drop-down boxes to select their country of choice and then a list of the Radio Stations available within that counrty. The second page will display an inspirational quote to inspire the user while listing to their station and put them in a uplifting, positive mindful state 🙏

The following image shows the web application's appearance:

Credits

In colaboration with:

• Ben Armstrong https://github.com/BenArmstrong81
  
• Darien Hallam https://github.com/thorne7
  
• Manoj Adikar https://github.com/ManojAdikari
  
• Pipat Samapuak https://github.com/PipatSamapuak
  
• Trung Nguyen https://github.com/Trung2096
  

With special thanks to the UniSA Full Stack Web Development Class.

What We Learned

Through out the past 6 weeks we have learnt the following; HTML, CSS, JavaScripot, Bootstap, JQuery, DOM, API's, Google Fonts, Creationg professional README files, Arrays, Pseudo Coding, Wireframing and much much more!!

Using the above skills we created this whole project from scratch including; a HTML, CSS, JavaScript and README files.

We all feel rather proud, after only 6 weeks of coding to colaborate and complete such a task is greatfully satisfying.

Features for the Future

• Play button opens chosen radio station to another page with clean & polished CSS
• A list of preiously listened to stations when reloading the page

License

Please refer to the LICENSE in the repo.