Build a Fullstack Music App with Next.js Course App Overview

Transcript from the "Course App Overview" Lesson

[00:00:00]
>> The next thing that I wanted to talk about after we have everything set up is how we're gonna break this app down and kind of the scope of what we wanna cover. So if you head over to that link again in Notion, at the top I have some screenshots of the app, so these will be our design assets.

[00:00:15] So if you've never worked at a company, maybe you just graduated out of bootcamp, maybe you're fresh out of college, or maybe you've been contracting, you just really haven't worked with a team. Typically what's gonna happen, especially if you're doing frontend work, or even full stack work, is there's gonna be some designers and some product managers and some UX folks on your team that have already done the research.

[00:00:37] They've already did the interviews, the qualitative, the quantitative analysis, they did all this stuff to really figure out, here's a design that we wanna make. Hopefully did that, I don't know. Some people don't, it depends on what company you work at. But for most companies, yeah, there's a lot of research that goes into the design.

[00:00:50] It's not just someone sitting down just cranking things out on Sketch or Figma. And you as an engineer, you're gonna take those designs and you're going to implement them as close to if not exactly the same that the designers intended. Because no one wants to hire engineers that can't implement a design.

[00:01:05] If I'm a company and I hire the best designer that we could afford and our engineers can't implement their designs, then what was the point, right? So our engineers have to be just as good as the designers. So your job is to get pretty close if not exactly the same as the designs.

[00:01:21] And in today's world, there's so many design tools out there that can take a design from Figma or Sketch and they'll output CSS. It'll even output React. Some of them even spit out React components and animations, which is pretty cool. I'm a little more old school, so we're just gonna look at the design and we're gonna get it done that way.

[00:01:38] But traditionally, you'll probably have a company that uses something like Zeppelin, or even Figma spits out stuff now, that kind of just gets you there, pretty close. We're not gonna do that, we're gonna eyeball everything and get as close as we can on this first pass. So anyway, looking at these designs, just kind of wanna go over the scope and how we're gonna think about these pages and components and stuff like that.

[00:02:00] And then we'll hop right into the foundation of it. This is what you're greeted with after you sign in to the Spotify app. This is kinda like all the things about you as a user. And you can see right here, it says my top artists this month. Tracks I listened to, there's a picture of me and my name and all this other stuff.

[00:02:18] How many playlists I have, how many followers. Which I didn't even know was a thing on Spotify until recently, you can follow people. And then on the left, we have a standard navigation, but then what's unique to me is all my playlists on the left as well that scrolls.

[00:02:31] So, just looking at this, I can break this down in a couple ways. One thing I noticed is that no matter what page I'm on, the sidebar is always present in this bottom, what I call the play bar, is always present. So those would be our layout. That's gonna be part of something that never changes.

[00:02:49] So it doesn't matter what page we route to, those components need to stay on the page and they should never change. They shouldn't be dependent on what route you're on. They shouldn't refresh, especially in the case of the play bar. Image in a song was playing and then you went to go click on another playlist, but because this play bar was part of that page, it reloaded and it refreshed, your song would start over.

[00:03:10] That would be really bad. So those things sit on top of the page and they never change. And the actual page itself is everything that's in this area here. So what we wanna do is create the layout and then make sure we render our components, our pages, inside of this layout so that these things never change.

[00:03:30] Does that make sense? Okay, and that's literally how I break things down,when I look at designs. I always try to figure out, where's the layout, where are the reusable components, what are the things that I need to make? Even just now I can look at these and obviously this is a reusable component.

[00:03:43] Literally, this whole page is a reusable component cuz it's pretty much the same as this. There's a gradient at the top, there's a section underneath, there's an image, there's a big title. Same thing here, there's an image, there's a big title, there's a gradient, even that's a component.

[00:03:56] So in my head, I'm already thinking, what are the reusable things that I have to make to make this thing so I can actually get through this app a lot faster without having to repeat myself. And yeah, that's kinda how I think about this process. In fact, some of the interviews that I've done at companies, I've been asked to look at screenshots and break it down just like that.

[00:04:16] And what do you think of the state, what do you think of the layout, what's gonna be reusable, what about performance? That's usually something, if you start doing senior level interviews, they'll start asking questions like that to get you to think about the architecture of a design like this.

[00:04:28] So it's not uncommon. Yeah, and then if we keep going, you can see that there's obviously different pages. As far as these over here, I'm not sure if we'll get to this library page or the search page, probably not the search page, because search could take a lot of time, we'll see.

[00:04:49] But we'll definitely get the important stuff done. So there might be something left for you all to do if you fancy that. Well, let's do it. Let's get this layout done because I think that's the most important thing, is to get the layout done. And then from there, we'll talk about authentication and how we can protect this app.

[00:05:06] And the pages I didn't take a screenshot of, which is the login page and stuff like that, but that was just super bloated on Spotify. So we'll just make one up, we'll just make our own design. That one had Google, Facebook, and we're not gonna do all that.

[00:05:18] We're just gonna do email, password. So we'll make our own design for that. And then, yeah, we'll do that next.