{"id":227,"date":"2025-08-12T20:39:25","date_gmt":"2025-08-13T04:39:25","guid":{"rendered":"https:\/\/www.tonybhimani.com\/programming-blog\/?p=227"},"modified":"2025-08-12T20:39:25","modified_gmt":"2025-08-13T04:39:25","slug":"building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo","status":"publish","type":"post","link":"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/","title":{"rendered":"Building a Full-Stack Marketplace in Flask + Flutter: A Hands-On Demo"},"content":{"rendered":"<p>This project started as my first attempt at building a Flutter app. I didn&#8217;t want something too trivial or too massive, so I went with a <strong>marketplace-style<\/strong>\u00a0app \u2014 just complex enough to keep me learning without turning into a multi-year odyssey.<\/p>\n<p>I&#8217;ll be honest: part of the motivation was to get something on GitHub that potential employers could see. I&#8217;m mostly a backend person (with a history in PHP), but lately I&#8217;ve been deepening my Python skills. Frontend isn&#8217;t my favorite, but hey, the app needed one. I looked at React Native but ended up picking Flutter for its single-codebase cross-platform capabilities \u2014 and because I didn&#8217;t want to touch anything as ancient as Apache Cordova (a.k.a. PhoneGap).<\/p>\n<p><strong>Verdict:<\/strong>\u00a0Flutter is now my go-to for mobile app building.<\/p>\n<h2>What It Does<\/h2>\n<p>It&#8217;s a demo marketplace where people can list stuff they want to sell \u2014 title, description, price, location, category, and media (photos\/videos). Basically, the kind of foundation you could extend into a real app.<\/p>\n<p>The flow is simple:<\/p>\n<ul>\n<li><strong>Login screen<\/strong> with account creation option<\/li>\n<li><strong>Listings view<\/strong> with all posted items (with thumbnails if there&#8217;s a lead image)<\/li>\n<li><strong>Search<\/strong> by keyword, price range, category, and location<\/li>\n<li><strong>Profile editing<\/strong> because profiles rarely stay the same<\/li>\n<li><strong>Refresh button<\/strong> to pull updated listings from the API<\/li>\n<li><strong>Logout<\/strong>\u00a0back to the login screen<\/li>\n<\/ul>\n<p>If you open a listing you created, you can edit details, manage media, and even reorder photos\/videos via drag-and-drop. Media opens in a gallery view for scrolling through items.<\/p>\n<p>That&#8217;s the Flutter side.<\/p>\n<h2>The Tech Stack<\/h2>\n<h3>Backend (Python + Flask)<\/h3>\n<ul>\n<li>Flask + SQLAlchemy + SQLite<\/li>\n<li>JWT auth with bcrypt password hashing<\/li>\n<li>RESTful endpoints for users, listings, and media<\/li>\n<li>Rate limiting via Flask-Limiter<\/li>\n<li>Modular blueprint routing<\/li>\n<li>.env configuration support<\/li>\n<li>Scripts for DB creation and optional seeding<\/li>\n<\/ul>\n<h3>Frontend (Flutter)<\/h3>\n<ul>\n<li>Responsive UI (tested on Web + Windows)<\/li>\n<li>User authentication (register\/login\/logout\/delete)<\/li>\n<li>Browse listings with thumbnails<\/li>\n<li>Search\/filter by multiple fields<\/li>\n<li>View images\/videos with playback controls<\/li>\n<li>Create\/edit\/delete (owner only)<\/li>\n<li>Upload\/delete\/reorder media<\/li>\n<li>Profile editing<\/li>\n<li>Auth guards + validation<\/li>\n<\/ul>\n<h2>Lessons Learned<\/h2>\n<p>This was my crash course in Flutter&#8217;s widget-based architecture and the Dart language (which honestly feels like C\/C++ in disguise). I wrangled with the navigation stack (push\/pop), AppBars, theming, state management, and Futures vs async.<\/p>\n<p>The hardest part? Implementing media reordering and the gallery view.<\/p>\n<p>I skipped pagination and stuck with an &#8220;oldest-to-newest&#8221; listing order \u2014 because the goal was an MVP, not a fully-fledged product.<\/p>\n<p>I also skipped refresh tokens and persistent logins (that&#8217;s planned for another project, which will also support &#8220;log out all devices&#8221; via Firebase Cloud Messaging).<\/p>\n<p>Would I do anything differently? Not really. It&#8217;s a first attempt, so I&#8217;m sure there are code style issues by Flutter\/Dart purist standards \u2014 but it works, and that&#8217;s what counts.<\/p>\n<p>\ud83d\udcc2 <strong>Repo:<\/strong> <a href=\"https:\/\/github.com\/tonybhimani\/flutter-flask-marketplace\" target=\"_blank\" rel=\"noopener\">flutter-flask-marketplace<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This project started as my first attempt at building a Flutter app. I didn&#8217;t want something too trivial or too massive, so I went with a marketplace-style\u00a0app \u2014 just complex enough to keep me learning without turning into a multi-year odyssey. I&#8217;ll be honest: part of the motivation was to get something on GitHub that [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[73,7],"tags":[86,85,88,75,77,74,84,92,93,83,79,78,87,76,89,80,81,82,91,90],"class_list":["post-227","post","type-post","status-publish","format-standard","hentry","category-flutter","category-webdev","tag-app-development","tag-backend","tag-cross-platform","tag-dart","tag-flask","tag-flutter","tag-frontend","tag-git","tag-github","tag-jwt","tag-marketplace","tag-mobile-app-development","tag-mvp","tag-python","tag-responsive-ui","tag-rest-api","tag-sqlalchemy","tag-sqlite","tag-state-management","tag-widget"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Building a Full-Stack Marketplace in Flask + Flutter: A Hands-On Demo - Tony&#039;s Programming Blog and Development Journal<\/title>\n<meta name=\"description\" content=\"A backend dev&#039;s first Flutter app: building a marketplace demo with Python\/Flask. Tech stack, lessons, and the final verdict.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a Full-Stack Marketplace in Flask + Flutter: A Hands-On Demo - Tony&#039;s Programming Blog and Development Journal\" \/>\n<meta property=\"og:description\" content=\"A backend dev&#039;s first Flutter app: building a marketplace demo with Python\/Flask. Tech stack, lessons, and the final verdict.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/\" \/>\n<meta property=\"og:site_name\" content=\"Tony&#039;s Programming Blog and Development Journal\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-13T04:39:25+00:00\" \/>\n<meta name=\"author\" content=\"Tony\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TonyBhimani\" \/>\n<meta name=\"twitter:site\" content=\"@TonyBhimani\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tony\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/\"},\"author\":{\"name\":\"Tony\",\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88\"},\"headline\":\"Building a Full-Stack Marketplace in Flask + Flutter: A Hands-On Demo\",\"datePublished\":\"2025-08-13T04:39:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/\"},\"wordCount\":487,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88\"},\"keywords\":[\"app development\",\"backend\",\"cross-platform\",\"dart\",\"flask\",\"flutter\",\"frontend\",\"git\",\"github\",\"jwt\",\"marketplace\",\"mobile app development\",\"mvp\",\"python\",\"responsive ui\",\"rest api\",\"sqlalchemy\",\"sqlite\",\"state management\",\"widget\"],\"articleSection\":[\"Flutter\",\"Web Dev\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/\",\"url\":\"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/\",\"name\":\"Building a Full-Stack Marketplace in Flask + Flutter: A Hands-On Demo - Tony&#039;s Programming Blog and Development Journal\",\"isPartOf\":{\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/#website\"},\"datePublished\":\"2025-08-13T04:39:25+00:00\",\"description\":\"A backend dev's first Flutter app: building a marketplace demo with Python\/Flask. Tech stack, lessons, and the final verdict.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.tonybhimani.com\/programming-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a Full-Stack Marketplace in Flask + Flutter: A Hands-On Demo\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/#website\",\"url\":\"https:\/\/www.tonybhimani.com\/programming-blog\/\",\"name\":\"Tony's Programming Blog and Development Journal\",\"description\":\"Sharing is caring... Especially with code\",\"publisher\":{\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.tonybhimani.com\/programming-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88\",\"name\":\"Tony\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g\",\"caption\":\"Tony\"},\"logo\":{\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g\"},\"sameAs\":[\"https:\/\/tonybhimani.com\/programming-blog\",\"https:\/\/x.com\/TonyBhimani\",\"https:\/\/www.youtube.com\/tonybhimani\"],\"url\":\"https:\/\/www.tonybhimani.com\/programming-blog\/author\/coding_magik\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Building a Full-Stack Marketplace in Flask + Flutter: A Hands-On Demo - Tony&#039;s Programming Blog and Development Journal","description":"A backend dev's first Flutter app: building a marketplace demo with Python\/Flask. Tech stack, lessons, and the final verdict.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/","og_locale":"en_US","og_type":"article","og_title":"Building a Full-Stack Marketplace in Flask + Flutter: A Hands-On Demo - Tony&#039;s Programming Blog and Development Journal","og_description":"A backend dev's first Flutter app: building a marketplace demo with Python\/Flask. Tech stack, lessons, and the final verdict.","og_url":"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/","og_site_name":"Tony&#039;s Programming Blog and Development Journal","article_published_time":"2025-08-13T04:39:25+00:00","author":"Tony","twitter_card":"summary_large_image","twitter_creator":"@TonyBhimani","twitter_site":"@TonyBhimani","twitter_misc":{"Written by":"Tony","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/#article","isPartOf":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/"},"author":{"name":"Tony","@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88"},"headline":"Building a Full-Stack Marketplace in Flask + Flutter: A Hands-On Demo","datePublished":"2025-08-13T04:39:25+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/"},"wordCount":487,"commentCount":0,"publisher":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88"},"keywords":["app development","backend","cross-platform","dart","flask","flutter","frontend","git","github","jwt","marketplace","mobile app development","mvp","python","responsive ui","rest api","sqlalchemy","sqlite","state management","widget"],"articleSection":["Flutter","Web Dev"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/","url":"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/","name":"Building a Full-Stack Marketplace in Flask + Flutter: A Hands-On Demo - Tony&#039;s Programming Blog and Development Journal","isPartOf":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#website"},"datePublished":"2025-08-13T04:39:25+00:00","description":"A backend dev's first Flutter app: building a marketplace demo with Python\/Flask. Tech stack, lessons, and the final verdict.","breadcrumb":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.tonybhimani.com\/programming-blog\/building-a-full-stack-marketplace-in-flask-flutter-a-hands-on-demo\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.tonybhimani.com\/programming-blog\/"},{"@type":"ListItem","position":2,"name":"Building a Full-Stack Marketplace in Flask + Flutter: A Hands-On Demo"}]},{"@type":"WebSite","@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#website","url":"https:\/\/www.tonybhimani.com\/programming-blog\/","name":"Tony's Programming Blog and Development Journal","description":"Sharing is caring... Especially with code","publisher":{"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tonybhimani.com\/programming-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.tonybhimani.com\/programming-blog\/#\/schema\/person\/036db10e4bc2069453a60f580f91ab88","name":"Tony","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g","caption":"Tony"},"logo":{"@id":"https:\/\/secure.gravatar.com\/avatar\/ed5a2a00dc5d9679e1fd2f29f60ca885a8e0f9d2c1aa2b5dabf05af02663b46c?s=96&r=g"},"sameAs":["https:\/\/tonybhimani.com\/programming-blog","https:\/\/x.com\/TonyBhimani","https:\/\/www.youtube.com\/tonybhimani"],"url":"https:\/\/www.tonybhimani.com\/programming-blog\/author\/coding_magik\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/posts\/227","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/comments?post=227"}],"version-history":[{"count":1,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/posts\/227\/revisions"}],"predecessor-version":[{"id":228,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/posts\/227\/revisions\/228"}],"wp:attachment":[{"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/media?parent=227"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/categories?post=227"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tonybhimani.com\/programming-blog\/wp-json\/wp\/v2\/tags?post=227"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}