Creating a Full-Stack App with Flask and Stream — Part 1
For the last little while, I’ve wanted to develop a new kind of social media site. Between the privacy issues, relentless ads, and the pervasiveness of bots on almost every service, I wanted to build something that would allow people to have a new source to discover the newest and most entertaining content and discuss it.
I have found the best posts I find don’t come through an algorithm, but from friends sending me things that they know I would like, or passing around articles through chat. The issue with that is trying to find something that I sent someone days ago (let alone weeks or months) is, to put it mildly, frustrating. Also, flipping through multiple group chats to keep up with everything that was going on is a less than optimal user experience.
My new project will be trying to merge the two, having social media built-in with group chat, rather than two separate experiences.
- Part One: Introduction (This Article)
- Part Two: Setup and Project Structure
- Part Three: User Models and Permissions
- Part Four: Authentication
- Part Five: User Profile and Testing
- Part Six: Collections
- Part Seven: Content
- Part Eight: Infinite Scroll
- Part Nine: Follows
- Part Ten: Styling and Link Previews
- Part Eleven: AWS Serverless Deployment
Initial Hurdles
Having built a basic version of the service to get some preliminary feedback, I ran into some issues right off the bat.
Latency
With or without setting up a CDN, numerous and complex database queries slowed down the user experience without scale, especially when trying to implement an infinite scroll feature.
Chat
Trying to integrate a modern chat platform from scratch would be prohibitively time-intensive (weeks or months working in my spare time). Even somewhat prebuilt solutions like SendBird limited group participants to 100: not precisely much room for an extensive social chat experience. Luckily, I ran across Stream. Stream provides almost everything I need to be able to build up all the services I need: low latency data storage for retrieving users/content, feeds, notifications (with read receipts!), and a shockingly feature-rich chat.
Diving In
In this tutorial series, I am going to show you how I will be transitioning my original site to include Stream at its core, following that up with more articles as I rebuild the entire thing in React to take advantage of some of the cool components Stream has for chat and feeds. We will be covering basic application structure, authorization, content and user management, styling including Javascript elements like infinite scroll, as well as the deployment of our Flask application.
The site, which I call Offbrand, will allow you and your friends to create collections of content (primarily web links) that will render as URL previews, and allow users to follow collections to keep up with new posts in a timeline feed on the index page. In the next series using React, we will integrate chat and notification feeds to round out the functionality.
Next Steps
If you have recently finished Miguel Grinberg’s awesome Flask Mega-Tutorial, then this will be a natural progression showing you how to apply a lot of the same concepts using Stream. Otherwise, this will also be useful if you were looking at how to integrate Stream into your new or existing Python-based apps. Best of all: the services I’ll be using will be completely free, with either a generous free tier or trial!
Tips & Tools
I am going to be using Zappa to deploy my application to AWS, as well as PyCharm for my IDE, but you can quickly develop and deploy with any tools you prefer. Be sure to sign-up for Stream and get your credentials for the next installment. You can play around and learn more about the service through the demos on their site!
Caveats
We will be going at a pretty high level for most of the app’s construction, so please make sure you fully understand the concepts as you’re going through, and if you don’t, take some time to do some research. Being a self-taught programmer, I can tell you that the best way to avoid the dreaded “tutorial-hell” is to be sure to write as much of the program as you can (copy and paste only makes you good at ctrl-c/ctrl-v). I will also be updating a GitHub repo with the code as we go to help you follow along.
Safety First
Finally, just because of how much we are going to have to cover, the project itself will have a lot of barebones components. In the end, this will help more than it hurts because it will allow you to integrate things into your systems more quickly, as well as extend these features and break you out of tutorial hell. That being said, be aware that we will be using rather basic security features, so be sure to implement your security measures before you deploy anything in a production setting, especially with sensitive or personally identifiable information.
Final Thoughts
Other than that, thank you for reading, and I’ll see you for the next post where we start with the setup and creating our project structure!
