Building a Web App with CouchDB Capella for Community Problem Reporting

Introduction

In an increasingly connected world, community problems such as potholes, broken streetlights, and garbage accumulation can be managed more efficiently with technology. This project presents a web application for reporting community issues, designed with a modern interface using Streamlit as the web framework and Couchbase Capella as the cloud database.

The application allows users to report problems in their communities by providing details such as name, district, address, description, and an image of the issue. Once submitted, the report is stored in Couchbase Capella and displayed in real-time with visually appealing effects.

Development

Initial Setup

The project was developed using Streamlit, a lightweight framework that facilitates the creation of interactive web applications with Python. The database used is Couchbase Capella, a cloud-based solution for fast and scalable data storage and retrieval.

Project Structure

The main code for the project is in the app.py file, which includes:

1. Configuration for Couchbase Capella.
2. Modern user interface with interactive elements.
3. Form for submitting reports.
4. Display of existing reports with animations.

Dependency Installation

Before starting, a virtual environment was created to isolate the project dependencies:

python -m venv env
source env/bin/activate  # On Windows: env\Scripts\activate
pip install streamlit requests couchbase pillow

A requirements.txt file was generated with the following content:

streamlit
requests
couchbase
pillow

Configuring Couchbase Capella

1. Cluster Creation:

   • Access Couchbase Capella.
   • Create a cluster and a bucket named As_You_Wish.

2. IP Configuration:

   • In the security panel, add your machine's IP address or allow all connections for testing.

3. Retrieve Credentials:

   • Copy the cluster URL, username, and password.

The code to connect to Couchbase is as follows:

from couchbase.cluster import Cluster
from couchbase.options import ClusterOptions
from couchbase.auth import PasswordAuthenticator

COUCHDB_URL = "couchbases://cb.cj1kcvgq695ufzto.cloud.couchbase.com"
COUCHDB_USERNAME = "your_username"
COUCHDB_PASSWORD = "your_password"
COUCHDB_BUCKET = "TopicosAppU2"

auth = PasswordAuthenticator(COUCHDB_USERNAME, COUCHDB_PASSWORD)
cluster = Cluster(COUCHDB_URL, ClusterOptions(auth))
bucket = cluster.bucket(COUCHDB_BUCKET)
collection = bucket.default_collection()

Application Development

User Interface

CSS was used to achieve a visually appealing design with vibrant colors and animations:

st.markdown(
    """
    <style>
    body {
        background-color: #0f0f0f;
        color: #ffffff;
        font-family: 'Courier New', Courier, monospace;
    }
    h1, h2, h3 {
        color: #e600ff;
        text-shadow: 0px 0px 8px #ff00ff, 0px 0px 12px #ff1aff;
    }
    .stButton button {
        background: linear-gradient(45deg, #ff1aff, #1affff);
        color: #ffffff;
        font-size: 18px;
        border-radius: 10px;
        transition: 0.5s;
    }
    .report-card {
        background: linear-gradient(135deg, #1a1a1a, #3a3a3a);
        border: 1px solid #ff00ff;
        box-shadow: 0px 0px 10px #1affff;
    }
    </style>
    """
    , unsafe_allow_html=True
)

Report Form

The form includes fields to capture name, district, address, description, and an image:

with st.form("report_form"):
    name = st.text_input("👤 Name")
    district = st.selectbox("📍 District", ["Tacna", "Alto de la Alianza", "Palca", ...])
    address = st.text_input("📍 Exact Address")
    title = st.text_input("📌 Problem Title")
    description = st.text_area("📝 Description")
    image = st.file_uploader("📷 Image", type=["jpg", "jpeg", "png"])
    submitted = st.form_submit_button("🚀 Submit Report")

Deployment

The application was deployed on Streamlit Community Cloud:

1. Upload the project to GitHub:

   • Create a repository and push your project files (including app.py and requirements.txt).

2. Deploy on Streamlit Cloud:

   • Access Streamlit Cloud.
   • Connect the repository and select the app.py file.
   • Configure environment variables:
     • COUCHDB_URL
     • COUCHDB_USERNAME
     • COUCHDB_PASSWORD

3. Final Result:

   • The application is available at: Community Problem Reporting App.

4. Evidence

• Page´s Title

• Report Submission Form

• Latest Reports

---

Conclusions

The Community Problem Reporting App demostrates how technology can enhance the management of community issues by empowering citizens with easy-to-use tools. The integration of Couchbase Capella ensures efficient and scalable data storage, while deployment on Streamlit Community Cloud provides global accessibility.

---

Github Repository

repositorio