Build Crypto Portfolio Visualization App with Python, React JS, Chakra UI & Postgres
Let’s build a realtime crypto portfolio visualization app using Python Flask, PostgreSQL, Docker Compose, React JS and Chakra UI.
We are going to show a summary of your current portfolio state with details such as portfolio cost, portfolio value, total gain/loss and percentage gain/loss. We are also going to have some visualizations to illustrate how your cost and equity are distributed across the different coins.
We will build both the frontend and backend from scratch and connect the two together.
You are going to learn how to build a full stack application locally with a database! We are also going to talk about API design, CORS and some other principles as we build it together.
Video Code Repository: [https://github.com/irtiza07/crypto-po...](https://github.com/irtiza07/crypto-po...)
UI Framework: [https://chakra-ui.com](https://chakra-ui.com/)
API to get coin prices live: [https://www.coingecko.com/en/api/docu...](https://www.coingecko.com/en/api/docu...)
Python Flask Documentation: [https://flask.palletsprojects.com/en/...](https://flask.palletsprojects.com/en/...)
React Recharts: [https://recharts.org/en-US/](https://recharts.org/en-US/)
0:00 Introduction
0:26 Demo
3:53 Tech Stack
5:13 Database Setup with Docker
7:48 Database UI
9:02 Backend Implementation Start
12:35 Health Check endpoint
14:01 POST Transaction Endpoint
24:00 GET Transactions Endpoint
32:00 Rollups by Coin Endpoint
51:57 Backend Summary
53:39 Frontend Begins
55:45 Frontend Implementation Start
58:23 App Component
01:02:00 Fetch Data from Backend
01:06:14 Summary Component
01:12:10 Transactions Table Component
01:17:00 Visualization Component
01:23:44 Add Transaction Modal Component
01:29:50 Outro
#tutorial #programming #crypto #visualization #docker #reactjs #python #recharts #fullstackdeveloper
Visit me at: https://irtizahafiz.com
Contact me at: [email protected]