
Lesson Description
The "Course Project & Approach" Lesson is part of the full, Build a Fullstack App with Vanilla JS and Go course featured in this preview video. Here's what you'd learn in this lesson:
Maximiliano introduces the course project, which will include features such as filtering, searching, marking movies as favorites, and user account functionality. The project will also include user registration, authentication, and the ability to mark movies as favorites and add them to a watchlist.
Transcript from the "Course Project & Approach" Lesson
[00:00:00]
>> Maximiliano Firtman: Let's start talking about the project. You have already seen sneak peek, but it looks like this. Okay, so we have movies. So that's the whole idea. We have a database of movies, and we will work with those movies. We can filter, we can search, we can mark a movie as a favorite, and for that, we will need to have a user account.
[00:00:22]
So we have logging, we have registration, and the whole flow for that process. For the details, we are going to be also creating some web components that will render the details of the movie, including, for example, a video embed from YouTube. So we will see there how to create the web component that we can reuse many times when you have YouTube movies.
[00:00:50]
And of course, this is just downloading the data from the backend. And the backend is downloading the data from the database. So we actually will see all the flow and everything. That we will be building to make that work. Regarding the technologies that we will be using, we have already mentioned a couples, but the backend will be just go.
[00:01:13]
The database will be Postgres, but the idea is that we're going to see how to think future proof. That means that if, in the future, we want to change the data storage and we want to use MongoDB, is that a completely different storage mechanism? Or if you want to change Postgres with another database, we're going to see how to think about that.
[00:01:37]
Even if you're not going to create a MongoDB database. This days, or today at least, we will prepare the code with some design patterns, so we will be easy in the future to make that change. Okay, so part of today's idea is to see and think about the architectural design patterns when we are building an app that will make that app More future proof.
[00:02:04]
Because in the future everything will change. There are things are changing. Maybe we change providers. Maybe if you're doing an app for a client, for a customer, the client is changing something internally and now they want to use a different database storage, our app should be ready for that.
[00:02:22]
Okay, so for the front end, HTML, CSS, vanilla JavaScript, so no React, no Angular, no Bucha, yes, no Next.js, just plain web technologies for the communication between the front end and the back end. We're going to just use JSON, restful, APIs. There are other options as well. GraphQL and other protocols, but we will be focusing on the basics of the web, like this is kind of vanilla web but we are using, these days to communicate the front end and the back end, just JSON and using the basics of HTTP.
[00:03:02]
For example, in that case, we have the verb get, post, delete, put, and also we have the status code as a protocol. We will see that later. But for example, if you are searching for a movie and the movie does not exist, the server will respond with the 404 using the HTTP protocol directly.
[00:03:22]
And the data will be transported using just JSON, okay? That's the idea. So in terms of best practices, we are going to be building a single-page applications. We will use also repository. This is the pattern that will let us change data sources in the future easily. Again, if from Postgres, we want to change it with MongoDB, well, repository is the one that will let us do that, and we will see how to do that with Go.
[00:03:52]
We will try to use clean code as clean as possible. That means sometimes we need to make decisions, and we will decide on the cleanest solution, and with that I mean maybe not the most performance solution but the one that feels easy to understand, okay? So we are we're building this let's say this is our first full stack project that we are creating.
[00:04:17]
So our goal is to understand the project to keep it maintainable for the future. And sometimes, if you just focus on performance, you do sometimes dirty tricks in your code that when you look at that, you said, I don't understand what's going on. So that's for the another step in the future.
[00:04:35]
No frameworks as I mentioned before, no frameworks server side, no frameworks client side. In terms of libraries, so libraries are like smaller things, we will try to keep external libraries to the minimum, mostly on the server. On the client, maybe we won't use in this course any libraries, but for the server, for example, when we will be making authentication.
[00:05:01]
When you do decrypt the password, and making decryption like low-level manually doesn't make any sense. We don't want to reinvent the wheel on things that are not really important for building the app. So in that case, we will use micro library specifically for that from the community, from the go community, our app, actually, you saw that in action is really fast to execute and render.
[00:05:24]
So that's one of the greatest advantage of doing everything with Vanilla JavaScript is really fast to execute and render. Also to deploy, because we want Neil to compile every time we make a change in the front-end. Of course, Go is a compiled language, so when we are making changes in the server we will need to compile, but actually, Go compile it really fast.
[00:05:49]
So compare will compile an Angular application or an extra yes application that sometimes it can take a minute or so every time you deploy, that this actually pretty fast. So our deploy time. It's around two seconds. So every time we make a change, it's two, three seconds. We are ready to try that compared with other solutions that are much slower.
[00:06:13]
So, keeping the code easy to understand is one of the goals. And also, we will use an idea that is coming from the JavaScript world that is not actually Go. It's environmental variables, so in an environmental file. So actually, you can create environmental variables in the operating systems system and read it from Go, but it's difficult to do that from a developer's point of view, we need to set up a variable in the OS.
[00:06:42]
Sometimes when we are coming from the web world, we like the dom.env files. Well, we're going to use a micro library for Go that actually simulates the same idea. In case you haven't heard about.m files, don't worry, we will see those later. But actually, for example, for setting passwords or our database logging, a script and everything will be stored in that file, instead of hard-coding those in Go.
[00:07:15]
So for the database, we will be using PostgreSQL, your own installation, full or with Docker. We won't cover that part too much. But in case you have a PostgreSQL database locally and you wanna use that one, or you know how to install that, it's not a big deal anyway to install it.
[00:07:32]
You can do that, but if not, you can use a cloud-based provider. That's probably the fastest solution for today. There are many providers out there. Even with a free tier, some that you can start using these days is Superbase or Aiven. Here we have the urls. We will see later you create an account, you create the new instance of a database, and you will get the string to connect to that database, and later we will see where to insert that string.
[00:08:02]
And see if it's working. Neon is another one. So all these cloud-based providers, they have a free tire that typically they will give you at least 500 megabytes for your database. Our database will be around 40, 45 megabytes. The free tire will be pretty good enough and also for the traffic that we are going to be using is gonna be pretty good.
[00:08:26]
Also, you can use AWS, Amazon Web Services, Azure, okay, and other like big cloud providers. The problem with that is that if you don't have experience with those, setting up just a database takes a lot of time, a lot of configuration. You need to dig into a lot of bureaucracy into Azure and AWS to just get the database.
[00:08:49]
These cloud-based providers are specifically targeting just the database, so it's pretty straightforward. You log in, you create an account for free, no credit card. Nothing, you create an account and in three clicks, you get your instance up and running. Okay, ready to use. Okay, our pressure will be called reeling it.
[00:09:14]
We'll be able to see top and recent movies that we have in the database. We're going to be able to search movies by keyword. Okay, all the Superman movies, all the Back to the Future movies. We can get into the movie details, including the cast and other metadata available.
[00:09:33]
Then we will have user registration. Just plain registration will be available, so with username and password. And we'll see how the flow looks like on a standard project. Then user authentication, that's what we typically known as logging. Okay, so registration should create account, and authentication is to log in the user, and we will see how to authorize the user.
[00:10:00]
So once we authenticate the user, how to keep that user authenticated across different calls, okay? So we will see how to do that technically. Then after you are logged in, you will be able to mark movies as favorite and also in your watch list. So in that case, you will see, okay, when I watch this, that movie, and you will be able to see that list per account.
[00:10:28]
Every account we have its own list of favorites and watch lists.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops