Python PostgreSQL Flask GUI App - Build and Publish with Live Database! 🚀

Key Takeaways

Today we're going to build something really cool and it's one of the most requested videos in the history of this channel. We're taking a simple Hello World application and transforming it into a live professional website with a proper SQL database. So not only will we build it, but we will also publish it. And our goal is a social media platform that flips between different user profiles, which is just enough functionality to be useful without over complicating things. So this tutorial is perfect for beginners. Now in terms of the software stack, we'll use flask for the interface, posgrsql for the database and a hosting platform named seala to deploy our app. By the end of the video, you'll understand the entire pipeline and have all the confidence you need to publish your own projects going from static into full stack easily. So without any further ado, let's roll. So, first things first, let's clone some starter files. We'll just copy the URL of my GitHub repository. You can find the link in the description. And we will then go ahead and paste it inside our terminal following a git clone command like so. Then we will copy the name of the project folder and we will then navigate there with cd followed by the folder name and then slash starter files. Next, we will open this project folder through our explorer with file followed by open folder and then we will select folder. And beautiful, we see a basic structure of a Flask application with an HTML front end, a Python back end as well as some CSS styling right over here and a whole bunch of images that will help us build our application. We have avatars and we have flags. Now, if this is new to you or if you're not sure what I mean, please watch my Flask tutorial where we build a similar template step by step. Otherwise, let's move on with setting up our environment. For this, as usual, we will use a combination of WSL and we will create a new working environment with create-ash n. We will call this environment social and and we will install Python 3.12 in it. Additionally, we will install Flask and let's give it a run. Then we will go ahead and activate this environment. We'll just copy this line of code. Sorry. It will paste it right below. And then we can officially run our application with Python app. py. Then we will navigate to this lovely URL from our browser. And yay, here's our super basic social media app. And as you can see, it's a very basic template that doesn't have any buttons, just a static social media profile of a random person. Now, our job today is to populate this template with a whole bunch of profiles and to learn how to navigate from one to the other. Now, let's start by setting up our database. For this, we will navigate to seala.com, which is a very intuitive hosting platform for your web applications and databases. Very easy to use. So, let's create a new account by clicking on the get started button. You basically have a $20 free trial, which I am sure many of you guys will appreciate. Now, in my case, I'm just going to fill in my information right over here. We'll do it quickly off camera. And beautiful. Our account is ready and we can go ahead and deploy a new database. Now, in the form, we'll go ahead and set the database name to social app. creating a username of Maria with a password of cheer buashka. Just for demonstrational purposes, I will obviously change it before the video goes live. We will choose the same display name as our database name and we will pick a server location close to our users. In my case, even though I just moved to Bulgaria, most of my users are in California. So, let's go ahead and pick up Los Angeles. Finally, because my database is super small, only five entries, I'm going to leave it at 1 GBTE of storage, which will cost me about $5 a month after my trial is over. Great. So, let's click on create database, and let's give it a minute to process before moving on. Next, we will establish an external connection. So, let's quickly navigate to the networking tab and enable it right up top. Then back in our overview, all the fields that were previously empty are now filled. So let's copy this remote URL and let's specify it in our local terminal. For this, we will make sure that posgress is installed on our system. We will do so with pseudoapp update followed by pseudo apt install posgressql. Once we do so, we can connect to our new database server with psql followed by the URL we just copied. So, let's go ahead and paste it here and let's give it a run. And boom, we see the social app prefix, which means that we are officially connected to our remote database on seala and we can start creating tables in it. Now, in our case, we're not going to manually type each username, country, tagline, and so on because we already have a nice and organized CSV file with all that information. I prepared it in advance, and you can find it in our starter files under instance profiles CSV. So, we will just insert this entire file in bulk. Now let's create a new table tailored to our CSV content with create table and let's call it user profiles. We will start with a username which in our case is a unique identifier meaning two users can share the same birthday, country or name but they cannot share the same username and every user must have one. It's mandatory. Now to enforce that rule on the database level, we will set the username as a primary key. So let's create the username right below. We will create a username column that stores text and serves as a primary key. Then right underneath we will create another column named full name. And this column also expects data in the form of text and it has a rule of not null meaning it is not allowed to be empty. Now you must be wondering how come we didn't mention it above and that's because a primary key automatically means not null. Next we have a photo path or a profile picture. So let's go ahead and create this column photo path which is also a type of text but unlike the previous column it is not something we absolutely need when we create an account. Perfect. So now we are left with a column of bio that also stores text, a column of country which is also text once again and finally we have a date of birth which is a type of date and it cannot be null because there's usually an age limitation on social media platforms. Okay, so let's add not null. Perfect. Now, even though we have a whole bunch of rules, this is not the most strict table that we can manifest because usually we're not just setting something as text, but we are also setting the number of characters that we are allowed to store. So, for example, instead of text, we can write varchar and then in a set of round brackets, we will choose the maximum number of allowed characters. Let's say 20. Now, there's plenty of other rules that we can set. So, if you'd like to see a very detailed SQL tutorial, please leave me a comment right below right now before you forget. Now, once our table was created, we will need to insert our CSV file into it. So, let's go ahead and type slashcopy inserting values into our user profiles table. So, let's type user profiles. Next, we will specify all the column names one by one. So our username, our full name, our photo path, bio, country, and date of birth. We will then copy those values from a file that we can find at instance slashprofiles.csv, which is a file with the format of CSV. And since in our case the first row of this file stores the column names, we will also set the header to true. If we don't do that, then the first row will be inserted into our table too, resulting in six users rather than five. Perfect. Now let's make sure it worked. Let's select all from user profiles. And boom, we have successfully created a database. Now let's go back to our local environment with exit and let's embed our new remote database in our local application to connect our Python app to our posgress database. We will pip install a module named psychop. It will help us translate our SQL commands to Python and we will then of course import it at the very top of our code with import psychop. Let me know if I pronounce it properly, by the way. It's a tough one. Next, we will copy our database URL from Seala once again. There you go. And then we will assign it to a variable named DB URL. Like so. Now, before you get upset and leave a bunch of angry comments, this is a temporary variable that we will delete before deploying our app. We will obviously not store our password and all the secret stuff in our source code. And also yes we are using a live production database in a development environment which is very unusual in reality we would create the same database locally and only once we are done developing we will recreate the same database on seala so once we have a database URL we will select all the user profiles just like we've done earlier but this time we will do this with python for this we will define a new function we will call it get profiles and Inside it we will use a width statement to call psychop connect to which we will pass our database location db URL. Then we will name this statement as connection just so we can then access it below. But a connection is not enough. We also need a corsur that we will use to point on the exact information we're looking for. So let's set it to corsor equals connection.coursor. Corsor and then right below we will then execute the exact same SQL command from earlier. We will do so with corsor.execute to which we will pass a string of select all from user profiles. And then finally we will return the results with return corsor fetch all. Easy peasy. Then finally to make sure it worked we will go ahead and print get profiles. Now let's save everything. Let's give it a run with of course Python app. py and beautiful we get a list where each row is saved as a tupole. So if we print the first item, okay, with index zero and we will run it once again, we will then get a row. And if we print the first item of the first item, okay, with another index of zero, then we get my username. Yay. So now that we know how to communicate with our database, let's go ahead and combine it in our GUI. So let's take this generic Thomas Anderson profile and let's populate it with our database entries. For this, we will need to fetch our users one by one rather than all of them all at once. So let's quickly revise our get profiles function into get profile. Now to make it work, we will need to specify which profile. So let's go ahead and add a username argument into our function. And since now we're looking for a very specific username, we will also add a where statement to our SQL command. So let's select all the columns from user profiles where the username is equal to percentage symbol s which is a placeholder we include for security purposes. The actual username is stored as a separate argument of execute and we specify it right here. Okay, username and we encapsulate it in a list because that's what expects. So now if we adjust our print statement at the bottom calling get profile and passing my username Maria Sha 888. Okay let's save it. Let's run it. We are now getting one specific profile. Great. So now instead of printing it let's send it to our HTML template. For this we will call our function in the home route assigning it to profile and then passing it as a render template argument with user equals profile. So we are passing this entire chunk of data into our HTML template and we are naming it user. So component zero is our username, component one is our full name and so on and so on. You will see what I mean shortly. Then finally inside index html we will replace the hard-coded Thomas Anderson with our database entries starting from the username which is the first item of our list we will replace it with double curly brackets and inside them user in the index of zero. Then everywhere we see the full name Thomas Anderson we will go ahead and replace it with user in the index of one. And we'll do the same for the profile picture. Okay, replacing the hard-coded URL with user in the index of two. And then the flag which is user in the index of four. And then the bio which is user in the index of three. And then finally we have the birth date which is user in the index of five. But we will also call the standard reference time on it. Okay, let's just add it with strf time. Okay, and we want to format this string very specifically. So I want the month to be a name. So we will type percentage symbol capital B followed by the day in a number with a percentage symbol and lowercase D. And then lastly we have our full year which is a percentage symbol and then capital Y. Now, if we save everything and we rerun it, beautiful. We see that Thomas Anderson is gone and instead we get my profile or we can get Batman's profile or any other profile we'd like. But there's one last thing we didn't tackle in terms of code and it's creating new routes. So, right now we are hard- coding a username inside get profile, which is obviously not ideal. But what we can do is create a new route. So let's go ahead and copy our existing one and let's go ahead and paste it right below. Then instead of slash we will set it to slash user slash username in a set of tags where the username in the set of tags is what we call a path parameter that constantly changes. We will then also rename the home function to profile and we'll pass it our new path parameter as an argument. There you go, username. And finally, we will replace the hard-coded Maria Sha with the username as well. So then once we save it, inside our URL, we can just add slash user/off with my head and beautiful, we see the profile of Alice in Wonderland. Similarly, if we specify MX has you, then we get Neo and so on and so on. Perfect. So now that we fully understand how to pull information from our database and embed it in our web pages, let's fast forward and have a quick look at the complete application. Now the only thing I've added off camera is the bottom navigation bar that allows us to switch from one user profile to another. You can find it in the complete app folder of our starter files. So if you clone my repository earlier, then you already have it on your system. And here we're using a for loop to pull the username and the photo avatar for each profile displaying it at the bottom of the page. Now the way it works in app.py is with a new database function named get all profiles fetching all the usernames and the photo paths. Then we call this function inside home and profile bundling both routes because home makes a call to profiles which is a clever trick to avoid repetition. Let me know if you have any questions about it. Leave them in the pinned comment right now. Now, once we are happy with our application, we can finally deploy it. We just need to adjust a few small details such as importing the OS modules and then replacing the secret value of database URL with OS.get and we will pass it a string of database URL. Meaning we will go back to seala and create an internal variable named database URL that nobody other than asking access. Then we will pull this variable into our Python file and store it back as DB URL. I'll show you how to do it right away. You will see exactly what I'm talking about. Additionally, we'll create a new file called requirements.txt txt where we will specify our version of flask and psychoggy. And that's it. Our code is officially ready for deployment. So back in our Seavala dashboard, we will navigate to the applications tab and we will click on create an application. And we actually have a few choices here, but in my case, I'll go for the private git repository. For this, we will press on connect to GitHub. and we'll then adjust our GitHub repository access. Okay, giving Kinsta access to my account, Maria Sha, where Kinsta is the brand that developed Seavala. Then we'll quickly upload our project folder to GitHub. We'll create a new repository. We will call it social app Savala and we will set it to private. You can set it to public. I'll do it privately on my end. Then to save some time, we will upload everything through the guey, selecting the entire content of our project folder and uploading it like so. Now once the upload is complete, we will return to seala, refresh the list of repositories and boom, there you go. We can see the entire content of my GitHub account. So let's find my social appala. And before we deploy it, let's select the same server location as our database. And let's slightly increase our resources. We have more than enough credits to do it for free. And perfect, we can go ahead and create our application. And beautiful, we see this very detailed graph that shows us the structure of our application. And the last piece of the puzzle is connecting our database by adding an internal connection. We will select our social app database as a service and we'll make sure that add environment variables to the application is enabled. also making sure they are available both during the runtime and the build time. So what we see here is a pre-made list of important database variables. In our case, we only care about database URL because this is the variable that we are pulling into app. py. Now on my end, I actually named it database URL. But this is not a problem. We can just copy it from our Python file. Okay, there you go. and replace Savala's default name with it like so. Perfect. So once we do that, we can then click on add internal connection. And we are officially ready to deploy hopefully with no errors. So let's go ahead and hit the deploy now button. And let's give it a few moments to process. And oh no, looks like I've messed something up and my deployment failed. So let's quickly expand the deployment logs and let's see what's going on. And okay, the first thing I notice here is that Savala automatically packages our code in a Docker container, which is very impressive. We previously deployed a Docker website in a recent tutorial, but it was way more complex than this one. So, this is really cool. The second thing I notice here is by error, of course, which tells me that I am missing a run command. How do we fix it? Well, we'll just go back to the overview and expand the settings of our social media savala app. And then under costume start command, we will simply type python app.py. And it kind of makes sense because savala doesn't really know how to start your application unless you tell it. Then let's try our deployment once again. And boom, this time it worked. And if we click on the domain link, our beautiful app is here. and we can finally share it with the world. Yay. Now, the last thing I'll mention, and this is a big benefit of using GitHub deployment, is that if we're pushing any changes to our repository, they will be automatically applied in Savala because we had this autodeploy feature enabled when we created our app. So, if we update and commit our changes, your app will redeploy on its own. And thank you so much for watching. If you found this video helpful, please share it with the world. And don't forget to leave it a huge thumbs up and all kinds of comments. Now, if you'd like to see more videos of this kind, you can always subscribe to my channel and turn on the notification bell. I'll see you soon in an awesome rag gooey application tutorial. So, prepare yourself for next week. I'll see you soon. And in the meantime, bye-bye. Here we are skipping the lo here. We are skipping the local setup to save some. I need to drink. Wow. Honey, give me the sip from the tea. Okay. Better. >> Very good. Honey. Super. >> Thomas Anderson. I can't pronounce his name. What the hell? It's Neil from the Matrix. I did not call him. He called himself. I just can't pronounce it. So, it appears I needed to click on something. Bye-bye.