How I made my first full-stack web app

Summary

• I built an expense and budgeting application called Tendie Tracker powered by Python, Flask, Heroku, and more
• Harvard’s CS50 course on EDX provided the initial learning and motivation for building a web app
• Google solved most of the problems I couldn’t solve on my own
• Online dev communities were a major source of motivation and helped me push through daily challenges
• The app was briefly popular in dev / learning communities and generated in the first week: 1.5k visitors from 91 countries, 150 registered users, and a lot of connections with other devs

The app: Tendie Tracker

Tendie Tracker is an expense and budgeting tool that saves people the time/effort from making their own spending tracker in Excel (a common task if you frequent online finance communities). It was launched exactly one month ago today on May 25th, 2020. My Github repo has the full spec and more GIFs available, but the main features are:

• Quick and bulk expensing
• Budget creation and automatic expense tracking
• Dynamic dashboard and reporting
• Data exporting

While my primary objective was to learn full-stack web tech, I had 3 main goals in mind while making this app:

1) Make it useful at least for myself
2) Make it professional looking and portfolio worthy
3) Make it accessible (i.e. minimalist + responsive design)

Here’s an overview of the tech stack:

Technology	Description
Flask + Jinja	Web application (micro) framework that uses Python and a web template engine
Heroku	Platform for hosting the web application
Postgres	Relational database for server (note: SQLite was used for local development)
Bootstrap + HTML/CSS	HTML/CSS framework
JavaScript + jQuery	JavaScript framework for making the HTML/CSS interactive and dynamic
DataTables	JavaScript library for making HTML tables with helpful features like searching, sorting, exporting, etc.
Chartjs	JavaScript library for making charts

Tendie Tracker Stack

Learning path

Fundamentals with CS50

While I have prior experience with coding and web development, it has been roughly 10+ years since I dedicated myself full-time to learning software development and a lot has changed since I was regularly building tech. My learning path for Tendie Tracker started from Harvard’s CS50 course which provided basic CS fundamentals and problem-solving practice.

CS50, despite being an introductory course for beginners, was more challenging than I anticipated. Completing every lecture/problem-set took me almost 2 months! Some days were especially discouraging and lonely (I’m thinking of you, pset5 😤). However, I loved the infectious energy and clarity of Professor Malan and staff and finished the course feeling humbled, accomplished, and excited to keep learning. Overall, CS50 helped get me back into the ‘coding mindset’ and introduced me to the main web tech that I ended up using for Tendie Tracker (Python, Flask, SQL, Bootstrap).

Learning and building on my own

I have to be honest here with myself…my approach for learning and building Tendie Tracker was without question a mixture of order and chaos 😅 Here’s a few examples of each:

Order 🧼

• Diagrams, flowcharts, and mock-ups forced me to think hard about the data I needed, how to structure and relate things, and what the user’s experience should be. Diagrams.net and a pen and paper are what I used (see my entity-relationship diagram and a simple mock-up of ‘Your Account’ page).
• Kanban board (my wall + post-it notes) helped me break deliverables down by tasks and track completion. Nothing fancy here, my columns were: backlog, doing, bugs, and done. I find physically moving the post-it notes more satisfying than doing it digitally with tools like Trello.
• Git and Github saved me from breaking everything a few times. Commit early and often! I learned the git command line entirely from this project.

Chaos 💥

• Having an incomplete vision for the app when I started caused inefficiencies such as iterating and redesigning things over-and-over (e.g. the database tables, columns, data types, etc.).
• Switching IDEs from Cloud9 to Visual Studio Code half-way through the project. I had never worked with VS Code, or developed a full-stack web app locally, and had to learn numerous unplanned things like virtual environments, env configs, etc.
• Encountering a bug with CS50’s Python library pushed my patience and debugging to the brink. It forced me to migrate portions of the codebase to SQL Alchemy and database from SQLite to Postgres. Coincidentally, working through this problem turned out to benefit me when deploying to Heroku because Heroku does not support SQLite but does support Postgres. Had I not struggled through this particular issue, I would have had to migrate to Postgres anyway! From chaos comes peace (sometimes 😋).

Structured vs unstructured learning and problem solving

In summary, my learning path was a mixture of structured and unstructured learning. Most of my learning took place in an unstructured manner, outside of the CS50 course, when breaking ideas down into problems, and then encountering more problems along the way. These types of unforeseen problems had to be solved through creative exploration, trial-and-error, and relying on other devs help. Every step of building Tendie Tracker was riddled with questions and issues that forced me to learn new things.

New developers often get stuck in “tutorial hell” and can’t break out of well-structured learning paths because it’s hard to switch to unstructured learning after having your hand held for weeks-to-months. I like thinking of unstructured, self-directed learning as “playtime” where you can explore anything and everything that piques your interest/creativity. The wisdom of experienced devs resonates here (paraphrasing): “if you want to learn, build something of your own.” Advice that helped me during my journey was:

• Google all of the things and utilize Google’s advanced search capabilities so that you can be more precise in your searches
• Break your problems down into very specific questions and actions
• Embrace not knowing the answer 👉 Be comfortable with confusion 👉 Trust and refine your problem-solving process
• When frustrated, discouraged, or overwhelmed it’s OK to embrace those feelings and give yourself a break from coding
• Join and socialize with the dev communities so that you can get help from others, commiserate together, and meet new people along the way. A few come to mind: Reddit, Discord, Twitter, Facebook, and Dev.to.

Launching the app

Finishing touches

Two days before launching the app I decided to make a clean landing page with a domain as the final layer of shine. I quickly signed up for and learned the basics of Webflow, found a free template to help with the design and structure, and threw together a nice one-pager. The domain and hosting are provided by Namecheap. The combination of Webflow, domain, and hosting cost $50. I lost some time during these 2 days trying to get a subdomain hooked up with Heroku’s free/hobby plan and SSL, but gave up as it required more resources and time than I had available (FYI folks at Stack Overflow are actively discussing the possibility of accomplishing this here).

Sharing with the world

In terms of building social momentum and attracting users, I shared the app with 1 or 2 communities a day for 5 days total. Naturally, I shared it on social media, starting with the platforms and communities I most frequent:

• Twitter
  • #CS50, #Flask, #100daysofcode, and #CodeNewbie
• Facebook (and Instagram)
  • Friends and family
  • CS50 group
• Reddit
  • r/cs50
  • r/learnprogramming
  • r/webdev
  • r/python
  • r/flask
• Discord
  • CS50 server
  • 100daysofcode
  • A few other coding servers

Reddit and Facebook generated the most amount of attention. I also benefited from the Twitter hashtag communities and a few retweets which helped showcase my app to additional audiences. The online dev communities are super supportive, fun to be part of, and I’m finding everyone to be curious, enthusiastic learners just like myself.

Currently, I have at least 2 recurring users, maybe 3, and the most active user is my Dad 🥰

Stats

Between Google Analytics, AWStats, and the Tendie Tracker database, below is a summary of the traffic and app usage. My repo has a smaller footprint of traffic – almost 50 stars and a handful of forks/watches.

• Launch week:
  • Visitors: 1,500
  • Hailing from: 91 countries
  • Representing: 150 users
  • App activities: 345 expenses logged, 14 budgets created, 23 spending categories created, 9 payers added
• To-date (1 month from launch day):
  • Visitors: 2,200
  • Hailing from: 94 countries
  • Representing: 170 users
  • App activities: 444 expenses logged, 22 budgets created, 37 spending categories created, 12 payers added

Google Analytics Traffic

Closing thoughts

Building Tendie Tracker as my first full-stack web app was a fun, challenging project that I am proud to have part of my portfolio going forward. When I started this project I had some prior knowledge and experience, but I mostly didn’t know how to do anything that I ended up actually building. It was a learner’s journey from beginning to end. With the abundance of online resources for self-teaching coding, there’s never been a better time to learn and build tech.

Tendie Tracker will continue to be supported from a distance for my few but loved users.