Build a Fullstack Music App with Next.js Setup

Transcript from the "Setup" Lesson

[00:00:00]
>> So the first thing is, I wanna talk about dependencies like what you're gonna actually need to do this course. I wanted to make this course like the barrier to entry, to get in this course I wanted to be really low because I mean everyone has different machines and different versions of things.

[00:00:14] So I was like, I really want someone to be able to just like open up a Web IDE and start developing on this course. So, really the only thing that you need is node as long as you have node version 12. I think you should be good. I would recommend getting the latest one because I will be using ES6 modules which are supported in the latest one.

[00:00:33] So you can do that but if not, I think anything over 12 should be fine. You shouldn't need anything else to download on your machine. So if you're on Windows, make sure you got node if you're on Mac, make sure you got node, if you're using CodeSandbox, you should also be good as long as you're using a latest version of node there, so should be good there.

[00:00:49] There's a lot of things that we'll be using, I can list some of those things right now. So we'll be using Reacts, Postgres, something called Prisma, which kinda sits on top of Postgres. We'll be using next JS which sits on top of React, we'll be using some component libraries.

[00:01:06] We'll be using verse cell for hosting Heroku for our databases, I'm sure there's more. There's a lot of dependence like modules and things that we'll be using. But when it comes to Postgres, you do not need it installed on your computer, as we'll be using a local Postgres hosted on Heroku.

[00:01:25] So if you do have it installed, that's fine. Use your local installed ULO. But for people who don't have it installed or don't wanna deal with it. I'm not gonna be doing that, we'll be using a database hosted on Heroku for free, where we can use for development.

[00:01:37] So really the only thing you need installed as a text editor and no that's it, you don't need anything else or if you're in the browser like CodeSandbox, you need a browser installed that's it. This link is gonna be notes for you all. Because they're gonna be some things in here that I want you to copy and paste not really a lot, mostly just like config files and stuff, so we can kinda get going and some of the the design assets that we'll be using in this course.

[00:02:00] So I have a link to a notion document that I made public ,first thing is I was gonna walk you through kinda the app that you will be working on. Again, there are tons of features here. And we could sit here for the next 10 days and really build this out.

[00:02:15] So really depends on where we end up. But there are some things that I definitely wanna cover and there's some things that I'll probably leave up to you as like follow on. But at the end of the day, this is an app that can play music. So if you look at what we have here.

[00:02:28] This is the finished version of it. I'm calling it Tracks, that's the name of this app. As you can see here, it kinda looks like Spotify, you've ever seen it before, you can take a look at some of the design assets that I have here or where I got the inspiration from.

[00:02:41] These are literally screenshots from Spotify from my account. So you can see the music that I listen to and this is what we're gonna be making. So over here on the left, we got our navigation and then we got some playlists at the bottom. And then once you are on a playlist, like for instance, I'm gonna play this one, you can click the play button or you can click one of the songs and it will actually play the song.

[00:03:02] So this is copyright free, royalty free music, so totally fine to play this, took me a long time to find some of the music and actually see the database to get a lot of this stuff, so super thankful that I was able to do that. Yeah, and that's pretty much it.

[00:03:16] You can switch playlists here and you'll see that it'll change colors in the playlists, you can click on a song, and it'll play it, that was already playing that's why. And you can pause it, you can go next, you have like repeat, you have shuffle. So a lot of different things in here that's going on and we'll be making all of this.

[00:03:35] So again, this is gonna be from scratch, so there is no repo to fork or download. We're gonna do all of this stuff from nothing. So I think that's the exciting part and that's where I said is slightly different from the courses that I normally do, where there's normally like some assets already there, some things you gotta fork and start with.

[00:03:50] I really wanted to like, what is it like? A lot of people always ask, well, how do you actually get started? I remember coming out of boot camp in 2013. That was like one of the biggest things for me is, how do I get started doing something? I feel like I can contribute, but I don't really know how to start.

[00:04:05] So I wanted this course to emphasize on starting and kinda walk you through how I think about that.