ALLCLEAR

Community-driven platform designed to help residents of cities report and track electrical outages, water disruptions, and other service issues.

Comment

Inspiration

Hermosillo, my childhood city, constantly faces water scarcity and frequent infrastructure-related water leaks, electrical outages, water disruptions, and other service issues. However, there is no optimal system for report folio management, resulting in a poor approach and effectivity towards resolving issues around the city

What it does

ALL CLEAR features an interactive map supported by open data, allowing the public to contribute and view real-time information on these problems. It fosters community engagement and provides local authorities and service providers with a tool to optimize their responses, ultimately preventing accidents and reducing resource waste.

Link to our Google Docs link

How we built it

Our prototype is powered by ZeeMaps and Google Forms as it is based on crowdsourcing: receiving filed reports of malfunctions by local citizens, which are sent and categorized within our database, to then be linked to the map that displays any failures reported.

Code utilized to generate our prototype, in Visual Studio Code:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ALL CLEAR</title>
    <style>
        /* Importing Google Font for title */
        @import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');

        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f4f8;
        }
        header {
            background-color: #ff7f50; /* Coral color */
            color: white;
            padding: 20px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        h1 {
            margin: 0;
            font-size: 2.5em;
            font-family: 'Fredoka One', sans-serif; /* Fun Fredoka One font for the title */
        }
        p {
            font-size: 1.2em;
            margin: 10px 0 20px 0;
        }
        main {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        h2, p {
            text-align: center; /* Centering both headings and paragraphs */
        }
        h2 {
            color: #ff7f50; /* Coral color */
            margin-top: 40px;
        }
        iframe {
            border: none;
            width: 100%;
            border-radius: 5px;
            overflow: hidden;
        }
        .form-iframe {
            height: 1326px;
        }
        .map-iframe {
            height: 500px;
        }
        footer {
            text-align: center;
            margin-top: 20px;
            font-size: 0.9em;
            padding: 10px 0;
            color: #555;
        }
        @media (max-width: 600px) {
            h1 {
                font-size: 2em;
            }
            p {
                font-size: 1em;
            }
        }
    </style>
</head>
<body>
<header>
    <h1>ALLCLEAR</h1>
    <p>Do you have any reports regarding any problem related to water, energy or services in your community? Help us locate it!</p>
</header>
<main>
    <h2>¡File your report!</h2>
    <p>Fill out the following information to let us know your issue and alert others!</p>
    <iframe class="form-iframe" 
            src="https://docs.google.com/forms/d/e/1FAIpQLSc2o12lQfqIRhv9Nt_pyN7ZHMWDYE-eeZq0iSkhGcJSDftZOg/viewform?embedded=true">
        Cargando…
    </iframe>
    <h2>¡Check the Hermosillo service malfunction map!</h2>
    <p>View a comprehensive map showcasing the availability of various services in Hermosillo, Sonora, including energy, water, and connectivity.</p>
    <iframe class="map-iframe" 
            src="https://www.zeemaps.com/view?group=5122130&x=-110.964930&y=29.102692&z=7">
    </iframe>
</main>
<footer>
    <p>&copy; ALLCLEAR 2024</p>
</footer>
</body>
</html>

Challenges we ran into

As rookies in the tech world, we had no previous acknowledgment of how to code or carry out any software process, which is why we had to investigate possible beginner-friendly tools with which we could express our ideas.

Accomplishments that we're proud of

Through the development of this project, we were able to generate a small code that integrated both the forms and maps into the same platform. In addition, while developing the map, we were able to successfully pinpoint all the service malfunctions presented in Hermosillo in the past months.

What we learned

We learned about crowdsourcing and multiple dev terms that we are sure will be useful later on. Furthermore, in a more practical sense, we were able to successfully navigate Zeemaps and its potential.

What's next for ALLCLEAR

Last but not least, we would like to put forward the fact that it is under consideration the further development of the said project, by cooperating with institutions responsible for said public services, to also alert citizens about possible suspensions of the former due to fixing procedures, permitting the population to know in advance and prepare. ALL CLEAR provides a practical, innovative, replicable, and adaptable solution for a relevant problem in our society.

Built With

Share this project:

Updates