Built Simple Stock Trading Web App With IEX Cloud, Python, Flask, SQLite, and AWS Cloud9

Phoebe Phuong Nguyen
3 min readJan 6, 2021

How to build a stock trading web app based on the real price from IEX Cloud with Python, Flask, sqlite3, Bootstrap, and AWS Cloud9.

Friendly Error Page

Features

  • Portfolio Management
  • Register
  • Login
  • Quote
  • Buy
  • Sell
  • History

Sequence Diagram

stock trading sequence diagram
Sequence Diagram

Wireframe

Website wireframe
Website Wireframe

Highlights

A smooth App development experience with AWS Cloud 9

I have completed quite a few assignments for my Harvard CS50 in Cloud 9 and I had to admit I was pampered. Compared to all my sweat and tears to set up a Python environment, imported dependencies and configured them in my heybot project, in my $impleTrade all I did was to download the codebase and start coding in browser.

I might consider Cloud 9 for my future projects as it solves a problem of environment differences between app development and app deployment.

Build Front-end with Python, Flask and Bootstrap

Even though this is an interesting challenge, I didn’t like it so much. Since I built all my Front-end with React, Node and TypeScript, with $impleTrade, as one of the project requirements, I needed to use Python and Flask.

Navigating through Flask templates wasn’t hard. The hard part for me was to beautify the interface and interact with DOM components. I appreciated more what I had with React and Tailwind.

Spent a good amount of time working with the database.

The architecture wasn’t complicated because my functions were simple, I messed up a bit while I was structuring my database. I admitted I didn’t think thoroughly.

Among the highlights for this project, I believe working with the database was my favourite. The queries weren’t hard but the approach I learnt from so many times of creating, copying and deleting tables.

I learnt:

  • To be more patient to create a schema
  • To second-guess my decision on the schema and what fields to keep.

Not to panic when both initial diagram and wireframe changed

I know as a developer, everything in a project can change and we have to deal with it. But I guess I’m still getting used to with it.

So, If you check my app then look at my wireframe and diagram, there are some differences. For example, I planned to have fancy modals whenever I buy or sell a stock. Or I planned to show you a landing page before you are directed to the app. Instead, none of them existed.

However, I loved the fact that through this project and others, I slowly train myself to have agile thinking.

  • Always try to get to the MVP fast, then there is time to improve.
  • Learn to ask “Is this a MUST or a PLUS features/ components?”
  • Learn to notice when I unconsciously go too deep into unnecessary tasks. For example, I spent two days trying to make a nice modal work while it was time-consuming to work with DOM elements using Flask. And that modal can be replaced quickly with just a hide/show <div>.

A summary table of Errors and Fixes when deploying with Heroku

With this project, I got some new errors with Heroku. Answers from the Stackoverflow were useful but I think they are like bread scrums. I like things to be systematic and organized so I created a table to collect Errors, What they mean, What causes them and Their Fixes.

Check it out!

--

--

Phoebe Phuong Nguyen

Software Engineer with strong HRIS expertise. love surfing and playing beach volleyball when I don’t code!