Photo Upload Service with Python FastAPI, S3, Postgres, React JS & Chakra UI

Let’s build an image upload service with Python Fast API, React JS, Chakra UI, PostgreSQL, Docker and AWS S3!

In this tutorial you will learn about a very common technique used to store images in web applications. The image itself is stored in AWS S3, which is a file storage system and the URL is stored in a PostgreSQL database. This way, you store the image perfectly without much compression. At the same time your database does not take too much space because you don’t have to store the image as a Binary object.

For the frontend we use React JS and Chakra UI as a UI framework to avoid writing any raw CSS.

In terms of database, we are going to use a simple PostgreSQL running locally on our machine.

The backend framework will be FastAPI which is an amazing Python backend framework that’s really fast and gives you amazing documentation automatically!

0:00 Intro
0:30 Demo
2:55 Database Setup
6:40 Backend Python FastAPI
16:40 Store Image in S3
18:55 Store URL in PostgreSQL
23:16 Start ReactJS Dev
25:15 Support CORs in Backend
27:22 Frontend Continued
31:13 Connect Frontend & Backend
41:12 Final Demo!
44:40 Summary & Outro

#python #tutorial #postgres #reactjs #chakraui #appbuild #programming #docker #s3 #aws

[VBSMedia]

Man, you are the MVP! Perfect speaking language, perfect tempo, everything is clear + you give your project on github! Thank you a lot! Keep it up!

[PankajKumar-ptoq]

Brother I thought I had to learn s3 then - python boto3 then fastapi api and images and later combine all them by my own, but you got the job in single video :)

[andrewchen]

You are amazing! Thank you for this video, and I believe you deserve more subscribers.

[timothyatanda]

Hello Irtiza, that was a great job, please can we display the images without using docker because I don't really know what docker is doing here🤔

[gabrielefiappo]

unrelated, but may I ask you what keyboard are you using? It sounds really nice :D very helpful video by the way, thank you!

[dingli]

Can you show us how to deploy it to AWS? Thanks

[timothyatanda]

Irtiza, please show us how to set up the aws s3 bucket, in think that is why my code is not working? 😪😪

[jacoedp]

Hey @Code with Irtiza thanks for the video, Great content! Do you have any recommendations on how to best do this when you have a private S3 bucket ? thanks

[sarathveeturi]

Great video Irtiza! When working with the post service, and uploading my image to S3 (it is a my own bucket with public access and I have configured it's credentials and region with AWS-CLI) I am receiving a 500 saying this Provided region_name 'US East (N. Virginia) us-east-1' doesn't match a supported format.*** And no uploads are getting processed. Any idea how where this is coming from and how to resolve it? (COuple of stack overflow solutions didn't quite give solutions to what I wanted)

[ebledsoe]

Really great tutorial!! I'm getting the following error: Unable to locate credentials. And haven't been able to find a solve yet, any recommendations?

[Xevion]

You have a pretty strong lisp on your words. "thphif upload phtervice"