Frontend Architecture | Component Hierarchy

[JCastaner]

Create a cohesive plan moving forward, so the group understands what they need to work on. We should at least have the plan for the basic components done.

[chrisbendel]

10 will have related comments in there:

This is more of a frontend architecture ticket. What components need to be created, how the file structure will be laid out, etc.

Whoever does this, read through this, and try to plan it out more 'higher level' - https://reactjs.org/docs/thinking-in-react.html#step-1-break-the-ui-into-a-component-hierarchy

You don't need to get into the nitty gritty of each button/small component, but bigger stuff should be outlined.

[NaomiHoniker]

Kind of blending together what I'm seeing from Lenora's wireframe, Thomas' outline, and some comments from Jake, (and also attaching these posts, relevant to #9, here for easy access and reference) I agree that we can ditch a dedicated page for logging in in favor of a navbar login. Also, a music widget at the bottom is a wonderful idea!

In addition to compiling those comments, I've also been reading into the link that Professor Bendel posted and Spotify's api so I can try and picture in my head what we'd need to be getting from them. I assume we are using react, right? According to that reading, we should be building our front-end around the back-end data that we'll be using. It helps to "Separate your UI into components, where each component matches one piece of your data model."

Our music widget will (at the very least) need to GET the Album art, Album name, and Artist name. It may need to send some information back to Spotify as well, perhaps incorporating a search bar, and back/forwards buttons to skip to and from songs in the queue. If I'm understanding this correctly, our 'state' (info to be output, managed within the component. Should be unable to be computed from anything and should change over time) will likely be both the contents of the search box and the song being played. To put this into a format like the react site does it:

• Music Widget
  • Album/Song info (data to retrieve from Spotify, based on user input.) -Album Art -Album Name -Artist Name -Song Name
  • User Tools (interact with Spotify) -Play/Pause -Previous song -Search bar -Skip song

Finally, I also found a site that has made browser games that are free to use in our own sites. Not sure how much everyone else trusts .zip files off some random Quora user's site, but he seems trustworthy enough to me. Unless we decided that we're coding our own browser games, which is fine by me, and I'd love to help, but that sounds slightly out of the scope of what this project wants for us. Couldn't find any game APIs, so this might be our best shot, unless we wanna do like... Betting on people's League rank or DOTA 2 stats or something.

[A-Waters]

I agree with you (@RichardHoniker) .... mostly.

The site you linked about making games off that users site seems hella sketch NGL . But I also agree that the games do seem a little out of scope, but maybe we are wrong. I think we are gonna have to decide what games we are including first before we make that decision however. And I'm not sure on any great alternatives to this issue...

[NaomiHoniker]

Yeah haha the site is pretty sketch. Just a suggestion for things like that we should be on the lookout for. If anyone sees/knows of any similar things we can implement, or has done a browser game in another class, we could do that, too!

[chrisbendel]

@CSI-280/web-people I thought the general direction you guys were going towards was to build some basic games with the spotify API, and in that sense I don't really expect like a traditional "video game" (things like animations, graphics, whatever) most of these games can be purely text based with images from the API (think album art, song art, whatever) - the example that keeps popping into my head is something like "Which song has more views) even if you were to start with a simple game essentially ripping off the google higher/lower game

That game would be relatively simple, all things considered:

• make a GET request for a random song
• Take song 1 vs song 2, display some data for each, with a button to pick either one
• Display some stuff based on whether they were right or wrong, keep playing if they're right, make another GET request for a random song... repeat

Ultimately only reason im responding is so that you guys don't get too caught up thinking you need something really fancy (unless you are up to the challenge)

PS. The music widget breakdown @RichardHoniker wrote up is exactly what I was hoping to see from you guys, that's good stuff

[NaomiHoniker]

Oh, that's actually a really good idea! I think in my mind I was way overcomplicating things haha. yeah, making a game using Spotify data should totally work! I like that! Everyone else on board, or does anyone have any suggestions?

[A-Waters]

-> #12 <-