Flask Intro Chapter 1

Welcome to Chapter 1 of ACA’s Flask Intro! By the end of this tutorial series, you’ll have built a functional web app that parses invoice PDFs. In this first chapter, we’ll launch a base project to get started. For more on the development process, check out our demo blog. At ACA, we use Flask for its beginner-friendly design and strong community support.

Goal

Launch a GitHub Codespace with a working PDF-parsing Flask application.

Notes

Please follow each step closely. We’ll define key terms as we go and include extra resources for deeper learning.

1: Fork our flask-intro repository.

Definitions:

• Repository: A folder containing project code, files, and version history.
• Forking: Creating your own copy of a repository in your GitHub account so you can work on it independently—like duplicating a Google Doc.

If you already have a GitHub account, make sure you're logged in before forking the repo.

2: Launch your Codespace

Definitions:

• Codespace: A cloud-hosted development environment by GitHub that lets you write, run, and test code from your browser or in Visual Studio Code.

Click the green Code button → Create Codespace on main.

3: Familiarize yourself with the project structure

Once your Codespace opens, take a look around inside src/chapter1/.

• run.py: The main file that runs the Flask application.
• data/: A folder with the provided sample PDF invoice.
• app/invoice2data/templates/: A folder with templates for parsing invoices.
• app/static/: A folder for static files like CSS and JavaScript.
• app/templates/: A folder for HTML templates.
• app/routes.py: The bulk of the Flask application code in this project. Handles the routing of requests upon uploading file.

Spend a few minutes clicking through to understand how things are organized.

4: Fill out the invoice2data code

You’ll find placeholder code in app/routes.py where invoice parsing logic should go.

5: Run python app.py

This should launch a local server. You can view the application by going to the URL provided in the terminal.

6: Test the application

You can now try uploading our sample PDF file. The application should parse the PDF and return the invoice data in CSV format.

Done ✅

And that’s it! You now have a working Flask application that can parse PDF invoices.

In the next chapter, we’ll dive deeper into the code and show you how to customize both the HTML and the parsing logic.

Questions?

If you run into any issues, contact us at contact@aspirecodingacademy.com. We are happy to help troubleshoot. Follow us on LinkedIn for updates on new blog posts.