Would you like to find new music no matter how far away it was created? Are you about to travel and want to listen to the local top 10 hits on the plane ride over? Then welcome to our Wormhole music listing app.
This was a group project. We were given two weeks to stretch ourselves to learn a new technology and reinforce technologies recently learned in an app we design start to finish on our own.
As a group we agreed to use Redux, React, Router, Asynchronous JavaScript, Cypress end to end acceptance testing, and conditional rendering. The Rubric & Spec for this project can be found here
- The choice to see music by Country or the Randomization of music from new countries
- Lists of artists by Country
- List of top hits by country
- Cypress testing to test user flows
- Responsive and Responsible - can be used on all screen sizes with considerations for tabbing, color choices, and button sizing for easer of UX
- Clone this repo using:
git clonehttps://github.com/bhohnco/StretchMod3
cdinto your cloned directory- Run
npm install - Run
npm start
You can learn more about creating apps using React and JSX here: Create React App Documentation
For more about combining React with Redux here: React Redux Documentation
- Once the app is set up locally, from the root directory, install
Cypress
- Run
npm install cypress --save-dev
- To open and run the tests
- Run
npx cypress open
-
Once the app is accessed, a user is immediately shown a welcoming page with a newly randomized locations music list
-
There is an artist list and a top tracks list
-
To access a specific Country, there is a drop down menu to search specific for specific music in each Once
- Further understand and implement modularity of Reacts Component structure with SCSS styling
- Build on React Application using the Global State Management tool, Redux
- Test all Component flows and Asynchronous JavaScript using cypress
We were given this project as an opportunity to stretch ourselves to learn a new technology and implement it. All of our work to better learn React, Cypress, Router and finally Redux was independent of our instructors. We met as a team every day to pull apart our iterations and apply what we were learning on Redux together, and to make sure we were on track with our work/life balance goals. As a team we found our other classmates to be a huge resource in discovering how redux is best applied in an application.
-
Refactor all of modular files for best practice approaches for redux, to ensure all user flows are accounted for
-
Access to the images paired in our artists api
- This may mean the use of a new api
- Otherwise we will implement a crawler to help grab the images from the wiki pages our api has them living on, at the moment
-
Implementing Aria inside the react component structure to verify that our page is truly accessible
-
Creating the ability to save our users favorites
| Peter Muellerleile GH | Bryan Hohn GH | Angie Battillo GH |
 |
 |
 |
| Functionality | Framework | Global State Management | Structure | Styling | Styling | Testing | Package Installation |
 |
 |
 |
 |
 |
 |
 |
 |
