Day 85 of #100DaysOfCode — Building a Mini Flask App: Expense Tracker
On day 85 of the #100DaysOfCode challenge, developer M Saad Ahmad built a mini Flask application — an expense tracker — that allows users to register, log in, add expenses, filter by category, and view a running total. The app integrates concepts learned over the previous days, including Flask routes, forms, authentication, and database modeling. It features a clean project structure with modular Python files and templates, emphasizing practical use over tutorial repetition. The expense list dynamically updates totals based on filters and enforces user ownership for security.
- ▪The expense tracker app was built in one day using Flask, incorporating user authentication, CRUD operations, and category-based filtering.
- ▪Users can register, log in with a 'remember me' option, add expenses with amount, category, description, and date, and delete their own expenses.
- ▪The app calculates a running total of expenses using SQLAlchemy's db.func.sum() directly in the database query, improving efficiency.
- ▪Expense filtering by category updates both the displayed list and the total to reflect only filtered entries, enhancing user experience.
- ▪Security measures include password hashing, user ownership checks on delete actions, and login protection on all expense routes.
Full article excerpt tap to expand
try { if(localStorage) { let currentUser = localStorage.getItem('current_user'); if (currentUser) { currentUser = JSON.parse(currentUser); if (currentUser.id === 1853445) { document.getElementById('article-show-container').classList.add('current-user-is-article-author'); } } } } catch (e) { console.error(e); } M Saad Ahmad Posted on Apr 28 Day 85 of #100DaysOfCode — Building a Mini Flask App: Expense Tracker #webdev #programming #flask #100daysofcode 100DaysOfCode (85 Part Series) 1 Day 1 of #100DaysOfCode — React Refresher + Tailwind Setup 2 Day 2 of #100DaysofCode — Understanding React State ... 81 more parts... 3 Day 3 of #100DaysOfCode — Understanding List Rendering and Conditional Rendering in React 4 Day 4 of #100DaysOfCode — Mastering useEffect in React 5 Day 5 of #100DaysOfCode — Fetching Data in React (useEffect + fetch + axios) 6 Day 6 of #100DaysOfCode — Introduction to TypeScript 7 Day 7 of #100DaysOfCode — Understanding Custom Hooks in React 8 Day 8 of #100DaysofCode — Understanding Form Handling with TypeScript in React 9 Day 9 of #100DaysOfCode — Understanding the React Context API 10 Day 10 of #100DaysOfCode — Building a Weather App 11 Day 11 of #100DaysOfCode — Understanding State Management in React 12 Day 12 of #100DaysOfCode — Understanding Zustand 13 Day 13 of #100DaysOfCode — Understanding TanStack Query 14 Day 14 of #100DaysOfCode — Pagination + Infinite Scroll 15 Day 15 of #100DaysOfCode — Performance Optimization in React 16 Day 16 of #100DaysOfCode — Routing in React 17 Day 17 of 100 Days of Code — Forms With Libraries in React 18 Day 18 of 100 Days of Code — Understanding File Uploads in React 19 Day 19 of #100DaysOfCode — Building a Tour App (Part 1) 20 Day 20 of #100DaysOfCode — Building a Tour App (Part 2) 21 Day 21 of #100DaysOfCode — Introduction to Backend Development 22 Day 22 of #100DaysOfCode — Node.js Fundamentals + Understanding NPM 23 Day 23 of #100DaysOfCode — Introduction to Express.js 24 Day 24 of #100DaysOfCode — Handling Request (Query, Params, Body) 25 Day 25 of #100DaysOfCode — Middleware 26 Day 26 of #100DaysOfCode — Modular Routing 27 Day 27 of #100DaysOfCode — REST API 28 Day 28 of #100DaysOfCode — Building a Library API 29 Day 29 of #100DaysOfCode — Connecting Backend to Frontend 30 Day 30 of #100DaysOfCode — Introduction to Database 31 Day 31 of #100DaysOfCode — SQL + NoSQL Basics 32 Day 32 of #100DaysOfCode — MongoDB Basics 33 Day 33 of #100DaysOfCode — Mongoose 34 Day 34 of #100DaysOfCode — Creating a Database CRUD API 35 Day 35 of #100DaysOfCode — Data Validation 36 Day 36 of #100DaysOfCode — SQL Basics 37 Day 37 of #100DaysOfCode — Authentication Part I: Hashing Passwords 38 Day 38 of #100DaysOfCode — Authentication Part II: JWT 39 Day 39 of #100DaysOfCode — Protected Routes (Auth Middleware) 40 Day 40 of #100DayOfCode — Building a Mini Auth System 41 Day 41 of #100DaysOfCode — TypeScript on the Backend (Node.js + Express) 42 Day 42 of #100DaysOfCode — Schema Validation 43 Day 43 of #100DaysOfCode — Error Handling + Async Wrapper 44 Day 44 of #100DaysOfCode — Adding TS and Zod to Auth Program 45 Day 45 of #100DaysOfCode — File Upload with Multer and Cloudinary 46 Day 46 of #100DayOfCode — Security (Rate limiting CORS Helmet) 47 Day 47 of #100DayOfCode — Creating Frontend of Auth System 48 Day 48 of #100DayOfCode — Deployment I: Deploy Backend 49 Day 49 of #100DayOfCode — Deployment II: Deploy Frontend 50 Day 50 #100DaysOfCode — Introduction to Next.js 51 Day 51 0f #100DaysOfCode —…
This excerpt is published under fair use for community discussion. Read the full article at DEV Community.
Discussion
0 commentsMore from DEV Community
