diff --git a/assets/blog/beginners_guide_to_data_in_python_apps.webp b/assets/blog/beginners_guide_to_data_in_python_apps.webp
new file mode 100644
index 0000000000..a71e6cd095
Binary files /dev/null and b/assets/blog/beginners_guide_to_data_in_python_apps.webp differ
diff --git a/assets/blog/flask_app.png b/assets/blog/flask_app.png
new file mode 100644
index 0000000000..760b908e7c
Binary files /dev/null and b/assets/blog/flask_app.png differ
diff --git a/blog/2025-01-15-beginners-guide-to-data-in-python-apps.md b/blog/2025-01-15-beginners-guide-to-data-in-python-apps.md
new file mode 100644
index 0000000000..c3f863c94f
--- /dev/null
+++ b/blog/2025-01-15-beginners-guide-to-data-in-python-apps.md
@@ -0,0 +1,652 @@
+---
+author: Sumanth Papareddy and Tom Gotsman
+date: 2025-01-15
+title: Build a Data App in Python — Beginner's Guide to Displaying and Visualizing Data
+description: Master Python data visualization for web apps! Learn how to create dynamic dashboards and display data seamlessly in Python web applications in under 5 minutes.
+image: /blog/beginners_guide_to_data_in_python_apps.webp
+meta: [
+ {"name": "keywords", "content": "Python web development, beginner's guide to Python web apps, displaying data in Python, Flask vs. Django comparison, Reflex Python framework, data visualization in web applications, deploying Python web apps, interactive web applications with Python, visualizing data, Python web app tutorials for beginners, building dynamic web apps in Python, streamlit python, streamlit, streamlit alternatives, plotly, dash app, plotly python, fastapi, Matplotlib"},
+]
+---
+
+```python exec
+import reflex as rx
+from reflex_image_zoom import image_zoom
+```
+
+In today's digital world, data-driven web applications have become essential tools for businesses and organizations. Python, with its rich ecosystem of libraries and frameworks, excels at building these applications - particularly when it comes to handling and visualizing complex data.
+
+The effective display of data in web applications is crucial for both user experience and decision-making. This is particularly important in data-intensive applications like analytics dashboards, business intelligence platforms, and monitoring tools, where users need to quickly understand and act on information.
+
+This guide will walk you through the fundamentals of displaying data in Python web applications, providing you with the tools and techniques needed to create effective data visualizations for your projects.
+
+1. [**Understanding Web Frameworks in Python**](#understanding-web-frameworks-in-python)
+2. [**Setting Up the Development Environment**](#setting-up-the-development-environment)
+4. [**Building Your First Data Display Applications**](#building-your-first-data-display-applications)
+5. [**Fetching and Displaying Data**](#fetching-and-displaying-data)
+6. [**Enhancing Data Visualization**](#enhancing-data-visualization)
+7. [**Deploying Your Web Application**](#deploying-your-web-application)
+
+
+## Understanding Web Frameworks in Python
+
+### What Are Web Frameworks?
+
+Web frameworks are libraries that provide the tools and structure needed to build web applications which allows web-based data visualization. They handle common tasks like routing, request handling, and template rendering, allowing developers to focus on the unique features of their applications.
+
+### Popular Python Web Frameworks for Beginners
+
+- [**Flask**](https://flask.palletsprojects.com/en/stable/): A lightweight, minimalistic framework that's perfect for small projects and learning the basics. Flask's simplicity makes it ideal for data visualization projects where you need full control over which libraries to integrate.
+- [**Django**](https://www.djangoproject.com): A full-stack framework that comes with built-in features like an admin panel, ORM, and user authentication. Its robust template system and extensive ecosystem make it suitable for large-scale data applications.
+- [**Reflex**](https://reflex.dev): An emerging framework designed for building web applications entirely in Python. Reflex stands out for its ability to create dynamic, interactive applications without requiring front-end JavaScript. It's particularly effective for creating real-time data dashboards.
+- [**Streamlit**](https://streamlit.io): A framework specifically designed for data applications. It excels at turning data scripts into shareable web apps with minimal code, making it popular for rapid prototyping of data visualizations.
+- [**Dash**](https://dash.plotly.com): Built on Flask, Dash specializes in creating analytical web applications. It's particularly strong in creating interactive data visualization apps and is widely used in scientific and financial sectors.
+
+### Choosing the Right Framework for Your Project
+
+When selecting a framework, consider factors like project scope, learning curve, and community support. For instance, for Flask vs Django, Flask is great for prototyping or small data visualization projects, while Django's robust ecosystem is ideal for larger applications with complex data requirements. Reflex offers a unique approach by enabling you to build dynamic web apps entirely in Python, making it particularly effective for interactive dashboards.
+
+Looking to choose the right Python framework for your web app? Our latest guide compares [Reflex](https://reflex.dev), [Django](https://www.djangoproject.com), [Flask](https://flask.palletsprojects.com/en/stable/), [Gradio](https://www.gradio.app), [Streamlit](https://streamlit.io), [Dash](https://dash.plotly.com), and [FastAPI](https://fastapi.tiangolo.com). Whether you're building a full-stack application, data dashboard, or API, the [Top Python Web Development Frameworks in 2025](https://reflex.dev/blog/2024-12-20-python-comparison/) blog will help you make an informed decision based on each framework's unique capabilities.
+
+## Setting Up the Development Environment
+
+Once you've selected your preferred Python web framework, the next step is setting up your development environment. Let's walk through the essential setup process to get your web application up and running:
+
+### Step 1: Verify Python Installation
+
+Ensure Python is installed on your system by checking the version:
+```bash
+python --version
+```
+For macOS/Linux, use python3 --version.
+
+### Step 2: Create and Activate a Virtual Environment
+
+Next, set up a virtual environment to isolate your project's dependencies, preventing conflicts with global Python packages.
+
+### Create a virtual environment:
+
+ - **Windows:**
+ ```bash
+ py -3 -m venv .venv
+ ```
+ - **macOS/Linux:**
+ ```bash
+ python3 -m venv .venv
+ ```
+
+ This will create a `venv` directory containing the Python interpreter, pip, and an isolated environment.
+
+### Activate the virtual environment:
+
+ - **Windows:**
+ ```bash
+ .venv\Scripts\activate
+ ```
+ - **macOS/Linux:**
+ ```bash
+ source .venv/bin/activate
+ ```
+
+Once activated, your command prompt will indicate the environment is active.
+
+### Step 3: Install Required Packages
+
+With the environment active, install the necessary packages:
+
+Along with Flask and Reflex, we will be using Pandas for data manipulation, and the Python plotting libraries Matplotlib and Plotly for interactive data visualizations. Install them!
+
+```bash
+pip install --upgrade pip
+pip install flask reflex pandas matplotlib plotly
+```
+## Building Your First Data Display Applications
+
+Now that we have our environment configured, let's create two simple applications that display sales data. We'll start with Flask and then show how to achieve the same with Reflex, a modern Python framework designed for interactive web apps.
+
+### Flask: Building a Basic Data Table
+
+Let's create a simple sales dashboard that displays monthly data in a clean, formatted table:
+
+```python
+from flask import Flask, render_template
+import pandas as pd
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+ df = pd.DataFrame({
+ 'Month': ['Jan', 'Feb', 'Mar'],
+ 'Sales': [1000, 1200, 1100]
+ })
+ return render_template('index.html',
+ table=df.to_html(classes='data-table'),
+ title='Monthly Sales')
+
+if __name__ == '__main__':
+ app.run(debug=True)
+```
+
+Next, we'll create our HTML template to display the data. Create a new file in your `templates` folder named `index.html`:
+
+### HTML Template ("templates/index.html"):
+
+```html
+
+
+
+ {\{ title }}
+
+
+
+
{\{ title }}
+ {{
+ table | safe
+ }}
+
+
+```
+
+Below is an image of this app:
+
+```python eval
+image_zoom(rx.image(src="/blog/flask_app.png", width="40%", alt="Flask App"))
+```
+
+### Let's Understand How It All Works
+
+**Setting Up Flask**
+- We import Flask and its template rendering functionality with `from flask import Flask, render_template`
+- `app = Flask(__name__)` creates our Flask application instance
+- The `@app.route('/')` decorator tells Flask that this function should handle requests to our homepage
+
+**Creating and Handling Data**
+- We use Pandas to create a simple DataFrame with months and sales data
+- `df.to_html()` converts our DataFrame into an HTML table
+- The `classes='data-table'` parameter adds a CSS class to our table for styling purposes
+
+**Rendering the Template**
+- `render_template()` takes the HTML template file and any variables we want to pass to it
+- We pass both the table HTML and a title that will be displayed on the page
+- The HTML template uses Jinja2 (Flask's templating engine) to dynamically create the web page.
+
+**Styling the Table**
+- The CSS class `.data-table` corresponds to the class name used in the `df.to_html(classes='data-table')` call in our Python code. This ensures that the styling rules are applied to the table generated by Pandas.
+
+Our styles create:
+- A clean border around the table
+- Comfortable padding inside cells
+- Centered text alignment
+- Professional font styling
+
+
+
+
+### Reflex: Creating an Interactive Data Table
+
+For a more modern approach, let's create the same display using Reflex, which offers built-in interactive features:
+
+```python
+import reflex as rx
+import pandas as pd
+
+class State(rx.State):
+ """Application state to store data."""
+ df = pd.DataFrame({
+ 'Month': ['Jan', 'Feb', 'Mar'],
+ 'Sales': [1000, 1200, 1100]
+ })
+
+def index():
+ """Define the app layout."""
+ return rx.container(
+ rx.heading("Monthly Sales"),
+ rx.data_table(
+ data=State.df,
+ pagination=True,
+ search=True,
+ ),
+ )
+
+# Configure the app
+app = rx.App()
+app.add_page(index)
+```
+
+```python exec
+import reflex as rx
+import pandas as pd
+
+class State(rx.State):
+ df = pd.DataFrame({
+ 'Month': ['Jan', 'Feb', 'Mar'],
+ 'Sales': [1000, 1200, 1100]
+ })
+```
+
+```python eval
+rx.container(
+ rx.heading("Monthly Sales"),
+ rx.data_table(
+ data=State.df,
+ pagination=True,
+ search=True,
+ ),
+ )
+```
+
+Notice how Reflex provides additional features out of the box:
+- Built-in search functionality for your data
+- Automatic pagination for larger datasets
+- A modern, responsive design without writing CSS
+- No html is needed, the whole front end is written in python
+
+### Running Your Applications
+
+To view your Flask application, run:
+```bash
+python app.py
+```
+Your terminal will display the server address (typically `http://localhost:5000` or similar). Visit that address in your browser.
+
+For the Reflex application:
+```bash
+reflex run
+```
+The terminal will display your server address. Open that address in your browser to view your interactive table.
+
+## Fetching and Displaying Data
+
+When building data-driven web applications, you'll often need to work with data from various sources. Now that we've created basic data tables, let's explore how to work with real data sources and also create simple visualizations. We'll build on our previous examples by adding API integration.
+
+### Working with Different Data Sources
+
+Let's start with a simple Flask application that fetches stock data from an API:
+
+```python
+import requests
+from flask import Flask, render_template
+
+app = Flask(__name__)
+
+def fetch_stock_data(symbol):
+ # Replace YOUR_API_KEY with your actual Alpha Vantage API key
+ api_key = "YOUR_API_KEY"
+ url = f"https://www.alphavantage.co/query?function=TIME_SERIES_DAILY&symbol=\{symbol}&apikey=\{api_key}"
+ response = requests.get(url)
+ if response.status_code == 200:
+ try:
+ data = response.json()
+ if "Time Series (Daily)" in data:
+ return data["Time Series (Daily)"]
+ else:
+ return \{"error": data.get("Note", "Invalid response from API.")}
+ except ValueError:
+ return \{"error": "Failed to parse API response."}
+ return \{"error": "API request failed"}
+
+@app.route('/stocks/')
+def show_stock_data(symbol):
+ data = fetch_stock_data(symbol)
+ return render_template('index.html', stock_data=data, symbol=symbol)
+
+if __name__ == '__main__':
+ app.run(debug=True)
+
+```
+
+Now, let's create a simple HTML template that will display the fetched stock data in a readable table format. Make sure this file is located in the `templates/` folder of your Flask project.
+
+
+```html
+
+
+
+
+
+ Stock Data for {\{ symbol }}
+
+
+
Stock Data for {\{ symbol }}
+
+ \{% if stock_data.error %}
+
Error: {\{ stock_data.error }}]
+ \{% else %}
+
+
+
+
Date
+
Open
+
High
+
Low
+
Close
+
Volume
+
+
+
+ \{% for date, details in stock_data.items() %}
+
+
{\{ date }}
+
{\{ details["1. open"] }}
+
{\{ details["2. high"] }}
+
{\{ details["3. low"] }}
+
{\{ details["4. close"] }}
+
{\{ details["5. volume"] }}
+
+ \{% endfor %}
+
+
+ \{% endif %}
+
+
+```
+Before running the application, you need to replace `YOUR_API_KEY` with your actual API key from [Alpha Vantage](https://www.alphavantage.co). After you've updated the API key, the application will be able to fetch stock data for the given symbol.
+
+**Fetch Stock Data:**
+- The `fetch_stock_data()` function makes an API request to Alpha Vantage, passing in the stock symbol (e.g., AAPL for Apple).
+- It checks if the request was successful and attempts to parse the JSON response.
+- The function returns the "Time Series (Daily)" data, which contains daily stock information like open, high, low, close, and volume.
+
+**Display Stock Data:**
+- The `show_stock_data()` route fetches the stock data for the specified symbol and passes it to the HTML template.
+- If there's an error (such as an invalid symbol or API issue), an error message is displayed.
+- Otherwise, the stock data is displayed in an HTML table where each row represents a day’s stock data, including the date, open price, high price, low price, close price, and volume.
+
+**HTML Template:**
+- The HTML template `index.html` is used to render the stock data for the given symbol. It iterates over the stock data, displaying each date and its corresponding values.
+
+**Test the Application:**
+- After running the Flask app (`python app.py`), navigate to your localhost at an address similar to http://localhost:5000/stocks/symbol (replace symbol with any valid stock symbol, i.e. aapl) to see the stock data displayed in a table.
+
+## Enhancing Data Visualization
+
+Now that we have our basic data sources set up, let's explore web-based data visualization. We'll look at three popular approaches: Plotly for interactive charts, Matplotlib for static visualizations, and Reflex for modern interactive dashboards.
+
+### 1. Creating Interactive Charts with Plotly
+
+Let's build a sales dashboard with an interactive line chart:
+
+```python
+import plotly.express as px
+from flask import Flask, render_template
+import pandas as pd
+
+app = Flask(__name__)
+
+@app.route('/')
+def sales_dashboard():
+ # Create sample sales data
+ sales_data = pd.DataFrame({
+ 'Date': ['2024-01', '2024-02', '2024-03', '2024-04'],
+ 'Sales': [10000, 12000, 9000, 15000],
+ 'Expenses': [7000, 8000, 7500, 9000]
+ })
+
+ # Create an interactive plot
+ fig = px.line(sales_data,
+ x='Date',
+ y=['Sales', 'Expenses'],
+ title='Sales vs Expenses Trend')
+
+ return render_template('dashboard.html',
+ plot=fig.to_html(full_html=False),
+ table=sales_data.to_html(classes='table'))
+
+if __name__ == "__main__":
+ app.run(debug=True)
+```
+
+```html
+
+
+
+
+ Sales Dashboard
+
+
+
+
+
Sales Dashboard
+
+
+ {\{ plot | safe }}
+
+
+
+
+ {\{ table | safe }}
+
+
+
+
+
+```
+This creates a dashboard with both an interactive line chart and a data table. Users can hover over the chart to see exact values and zoom in/out of specific time periods.
+
+### 2. Static Visualizations with Matplotlib
+
+For simpler, static charts in your Python web apps, Matplotlib is a great choice:
+
+```python
+import matplotlib
+matplotlib.use('Agg') # Set backend before importing pyplot
+
+from flask import Flask, send_file
+import matplotlib.pyplot as plt
+import io
+
+app = Flask(__name__)
+
+@app.route('/')
+def plot():
+ # Create sample data
+ months = ['Jan', 'Feb', 'Mar', 'Apr']
+ sales = [10000, 12000, 9000, 15000]
+
+ # Create the plot
+ plt.figure(figsize=(10, 6))
+ plt.plot(months, sales, marker='o')
+ plt.title('Monthly Sales')
+ plt.xlabel('Month')
+ plt.ylabel('Sales ($)')
+
+ # Save plot to a temporary buffer
+ buf = io.BytesIO()
+ plt.savefig(buf, format='png')
+ buf.seek(0)
+ plt.close()
+
+ return send_file(buf, mimetype='image/png')
+
+if __name__ == '__main__':
+ app.run(debug=True)
+```
+
+This Matplotlib example generates a static line chart with markers. Key components of this implementation:
+- `matplotlib.use('Agg')`: Sets a non-interactive backend that works well with web applications, especially necessary for deployment and avoiding GUI-related errors
+- `io.BytesIO()`: Creates an in-memory buffer to store the plot without saving to disk
+- `plt.savefig(buf, format='png')`: Saves the plot to the buffer as a PNG image
+- `send_file(buf, mimetype='image/png')`: Flask serves the image directly to the browser without needing an HTML template
+
+### 3. Modern Interactive Dashboards with Reflex
+
+This Reflex dashboard showcases both Plotly and Matplotlib charts. Plotly provides interactive features such as zooming and hovering, while Matplotlib delivers detailed and static visualizations. These charts offer users a dynamic way to explore and analyze data.
+
+```python
+import reflex as rx
+import pandas as pd
+import plotly.express as px
+import matplotlib.pyplot as plt
+from reflex_pyplot import pyplot
+
+# Define sales data
+sales_data = pd.DataFrame({
+ 'Month': ['Jan', 'Feb', 'Mar', 'Apr'],
+ 'Sales': [10000, 12000, 9000, 15000],
+ 'Expenses': [7000, 8000, 7500, 9000]
+})
+
+# Create Plotly chart
+sales_fig = px.line(
+ sales_data,
+ x='Month',
+ y=['Sales', 'Expenses'],
+ title='Financial Overview'
+)
+
+# Create Matplotlib chart
+def create_matplotlib_chart():
+ fig, ax = plt.subplots(figsize=(10, 6))
+ ax.bar(sales_data['Month'], sales_data['Sales'])
+ ax.set_title('Monthly Sales')
+ plt.close(fig)
+ return fig
+
+# Define the app layout
+def dashboard() -> rx.Component:
+ return rx.container(
+ # Plotly chart
+ rx.heading("Plotly Chart"),
+ rx.center(
+ rx.plotly(data=sales_fig),
+ ),
+ # Matplotlib chart
+ rx.heading("Matplotlib Chart"),
+ rx.center(
+ pyplot(
+ create_matplotlib_chart(), # Call the standalone function
+ width="100%",
+ height="400px",
+ ),
+ ),
+ padding="20px",
+ )
+
+# Configure the app
+app = rx.App()
+app.add_page(dashboard, route="/")
+```
+
+```python exec
+import reflex as rx
+import pandas as pd
+import plotly.express as px
+import matplotlib.pyplot as plt
+from reflex_pyplot import pyplot
+
+# Define sales data
+sales_data = pd.DataFrame({
+ 'Month': ['Jan', 'Feb', 'Mar', 'Apr'],
+ 'Sales': [10000, 12000, 9000, 15000],
+ 'Expenses': [7000, 8000, 7500, 9000]
+})
+
+# Create Plotly chart
+sales_fig = px.line(
+ sales_data,
+ x='Month',
+ y=['Sales', 'Expenses'],
+ title='Financial Overview'
+)
+
+# Create Matplotlib chart
+def create_matplotlib_chart():
+ fig, ax = plt.subplots(figsize=(10, 6))
+ ax.bar(sales_data['Month'], sales_data['Sales'])
+ ax.set_title('Monthly Sales')
+ plt.close(fig)
+ return fig
+```
+
+```python eval
+rx.container(
+ # Plotly chart
+ rx.heading("Plotly Chart"),
+ rx.center(
+ rx.plotly(data=sales_fig),
+ ),
+ # Matplotlib chart
+ rx.heading("Matplotlib Chart"),
+ rx.center(
+ pyplot(
+ create_matplotlib_chart(), # Call the standalone function
+ width="100%",
+ height="400px",
+ ),
+ ),
+ padding="20px",
+ )
+```
+
+To run these examples:
+
+For Flask apps:
+```bash
+python app.py
+```
+For Reflex:
+```bash
+reflex run
+```
+
+Start with whichever visualization method feels most comfortable - Plotly is great for interactive features, Matplotlib for simple static charts, and you can integrate both in Reflex for modern, full-featured dashboards. You can always add more complexity as your needs grow.
+
+
+
+
+## Deploying Your Web Application
+
+Once your application is ready, deployment is the final step to make it accessible to users and scalable as needed. Here are some common options to consider:
+
+### 1. Cloud Platforms: GCP and AWS
+- [Google Cloud Platform (GCP)](https://cloud.google.com) and [Amazon Web Services (AWS)](https://aws.amazon.com) are the platforms that offer exceptional scalability, flexibility, and a comprehensive suite of services
+- With these platforms, you can choose from virtual machines, containerized environments (like Kubernetes), or serverless solutions (like AWS Lambda or GCP Cloud Run)
+- While highly robust, these options may require additional expertise to configure and maintain
+
+### 2. Managed Cloud Solutions
+Managed hosting platforms simplify the deployment process and often cater specifically to web applications. They offer a balance between ease of use and scalability.
+
+Key features of managed cloud solutions include:
+- Effortless Deployment: Deploy your application with minimal configuration, often using simple commands or a web interface
+- Centralized Management: Intuitive dashboards provide tools to monitor app performance, track resource usage, and manage teams
+- Advanced Features: As your app grows, these platforms support custom domains, scaling resources, authentication integrations, and more
+
+### 3. Reflex Cloud
+For developers using the Reflex framework, [Reflex Cloud](https://cloud.reflex.dev) is a tailored, Python-focused deployment option.
+Deployment is simplified to a single command:
+```bash
+reflex deploy
+```
+
+Reflex takes care of the complexities, enabling you to focus on your application.
+Additional features include:
+- One-click authentication for secure user management
+- Detailed analytics to monitor app performance
+- On-premise hosting for enterprise use, providing complete control over infrastructure
+
+### Cost Considerations
+Most platforms offer free tiers to help you get started. Paid tiers provide enhanced capabilities such as:
+- Custom domains: Branding your app with a unique domain name
+- Increased resources: Scaling storage, compute power, or bandwidth
+- Team collaboration: Access control, shared dashboards, and advanced monitoring tools
+
+
+
+## Conclusion
+
+In this guide, we've walked through the fundamentals of displaying data in Python web applications. From setting up your development environment to working with powerful frameworks like Flask and Reflex, you now have the essential tools to build data-driven web apps. We explored how to utilize Pandas for data handling and Plotly and Matplotlib for Python data visualizations.
+
+You can further explore advanced topics such as integrating APIs, implementing user authentication, and optimizing application performance as you begin building more complex applications. For deeper insights into advanced concepts like API routes, database connections, and authentication, refer to the guide here: [Documentation](https://reflex.dev/docs/api-routes/overview/).
\ No newline at end of file