When we need to search about gaming news or details, we would want to hear music of some kinds, so we would use another app to listen to them. But in this web app, we solved this problem and joined the gaming news with music section to hear them.
♢ You can check the live link form HERE.
Check out the figma design from HERE.
In this app, we divided the functionality between two sections: Gaming News Section and Music Section.
-
In the Gaming Section, we toke the picture of the game, the title, the description, the platform, the developer, and the release date. There's more than four hundred games collected from more than five categories to give the user all the kinds and types of games that he is interested in under one single click.
-
In the Music Section, we putted some songs for some artists that the gamer loves to hear to, those artists like: Eminem, Topac Shakur, Jay-Z, Drake, and Snop Dog. By that, the user is able to listen to his favorite music and read the data about the game that he needs to know about under the same roof.
-
When the user open the web app, he will find the landing page which contains two pictures, left and right arrows, a title, and short statement at the bottom of the page.
-
If the user clicked the right arrow, it will take him to the landing page of the music section. At the music section's landing page, the user can see the a picture, an arrow at the left top of the page, two headings, short description, and a button. When the user clicks this button, it will take him to the home page for the music which contains the songs, each song has a picture, name, artist, and play icon, when you click the play icon, it will play the song at the top of the page.
-
If the user clicked the left arrow, it will take him to the landing page of the gaming section. At the gaming section's landing page, the user can see a console picture, two headings, short description, and a button. When the user clicks the button, it will take him to the home page for the gaming page, which contains a search bar, categories bar, and a container for each game, each container contains a picture for the game and a learn more button, when the user clicks the learn more button he will go to the detailed page for the games which contains the picture, the title, the platform, the developer, the release date, and a button to visit the website of the game.
-
As a user, I should be able to choose between gaming and music sections in the landing page of the web app by clicking on the right and left arrows.
-
As a user, I should be able to see the landing page of the music section if I clicked the right arrow.
-
As a user, I should be able to click learn more button at the landing page of the music section and go to the home page of the music.
-
As a user, I should be able to see the music boxes and choose between them to play my preferable song.
-
As a user, I should be able to click each play icon at each song container to play the song in the top container/box.
-
As a user, I should be able to see the landing page of the gaming section if I clicked the left arrow.
-
As a user, I should be able to click the learn more button at the landing page of the gaming section and go to the home page of the gaming news section.
-
As a user, I should be able to click the search bar to search about some games by it's name.
-
As a user, I should be able to click each category button to filter the games by it's category.
-
As a user, I should be able to click each learn more button to take me to the details page of the game.
-
As a user, I should be able to see the details and the picture of each game I clicked its learn more button.
-
As a user, I should be able to click the Visit Game Website to go to the game original website.
Our mentor is the great Sara!.