# Project export: Swiper, No Swiping!

This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.

## Project metadata

- Hackathon: TreeHacks 2025
- Tagline: Never fear leaving your belongings alone again.
- Devpost: https://devpost.com/software/swiper-no-swiping-qwjv28
- GitHub: https://github.com/Char787/swiper-no-swiping
- Demo: https://char787.com/technology/swiper-no-swiping/
- Video: https://www.youtube.com/embed/iazdEkrBMbU?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent
- Team: 1 GitHub contributor(s) — Charlie Huang (4 commits)

## Devpost submission (written by the team)

### Overview

Welcome to Swiper, No Swiping! This hardware and software annoyance and security system tracks the security of your belongings in real-time. Need to leave your backpack, bike, or other important belonging unattended in a public place? Simply insert or affix the Swiper, No Swiping device and you're all set! What it does The SNS device constantly monitors for movement. If it detects that it moved, ie someone has picked up your important belonging, it will buzz loudly and uncontrollably, frightening the culprit until they leave your bag alone. Not only that, but it will send you an email notification so you can come back to check on your belongings. What's more, you can access the web server to see the history of your device's movement. If it only moved for a brief few seconds, perhaps it was merely pushed - but if the convenient graph indicates that it moved for an extended period of time, you know someone is trying to steal your stuff. How it's built How does it work? The Swiper, No Swiping device operates off of an ESP8266 microcontroller, MPU6050 gyroscope, and buzzer. When the gyroscope detects excessive movement, it will sound the buzzer and send an HTTP POST request via WiFi to the web server. The web server will receive the movement log and post it onto a database while also sending the email notification to the user (such long as it hasn't been less than 10 seconds since the last notification - we want to keep the user informed of all movements, but also not spam them too much). Finally, when any user accesses the web application, they will see the movement history of the device accessed via the database. When not in use, the SNS device can simply be powered off.

### Inspiration

This project was inspired by the fright of leaving your expensive personal belongings at a hackathon - or airport, or train station, or anywhere for that matter. Want to leave your bag to claim a seat or desk but don't want it stolen? Simply place the SNS device in your backpack and wander off in peace, knowing that the moment anyone tries to move your bag, you will instantly be notified and the fright of the sound will scare the culprit off. Challenges, accomplishments, learning experience Integrating hardware-software communication, dealing with broken ESP32 boards!

### What's next

What I had wanted to implement this hackathon, but couldn't due to broken ESP32 boards, was connectivity to Bluetooth speakers. Users would be able to record a custom scare-off recording on the web app which would upload to the device. Then, instead of buzzing, the device will play this recording to scare the thieves away. Additionally, the ability to enable and disable the device through the web app can be implemeneted.

## README (from the GitHub repository)

# swiper-no-swiping
-- Tree Hacks 2025 Project --

Welcome to Swiper, No Swiping! This hardware and software annoyance and security system tracks the security of your belongings in real-time. Need to leave your backpack, bike, or other important belonging unattended in a public place? Simply insert or affix the Swiper, No Swiping device and you're all set!

## What it does

The SNS device constantly monitors for movement. If it detects that it moved, ie someone has picked up your important belonging, it will buzz loudly and uncontrollably, frightening the culprit until they leave your bag alone. Not only that, but it will send you an email notification so you can come back to check on your belongings. What's more, you can access the web server to see the history of your device's movement. If it only moved for a brief few seconds, perhaps it was merely pushed - but if the convenient graph indicates that it moved for an extended period of time, you know someone is trying to steal your stuff.

## How it's built

How does it work? The Swiper, No Swiping device operates off of an ESP8266 microcontroller, MPU6050 gyroscope, and buzzer. When the gyroscope detects excessive movement, it will sound the buzzer and send an HTTP POST request via WiFi to the web server. The web server will receive the movement log and post it onto a database while also sending the email notification to the user (such long as it hasn't been less than 10 seconds since the last notification - we want to keep the user informed of all movements, but also not spam them too much). Finally, when any user accesses the web application, they will see the movement history of the device accessed via the database. When not in use, the SNS device can simply be powered off.

## Inspiration

This project was inspired by the fright of leaving your expensive personal belongings at a hackathon - or airport, or train station, or anywhere for that matter. Want to leave your bag to claim a seat or desk but don't want it stolen? Simply place the SNS device in your backpack and wander off in peace, knowing that the moment anyone tries to move your bag, you will instantly be notified and the fright of the sound will scare the culprit off.

## Challenges, accomplishments, learning experience

Integrating hardware-software communication, dealing with broken ESP32 boards!

## What's next for Swiper, No Swiping!

What I had wanted to implement this hackathon, but couldn't due to broken ESP32 boards, was connectivity to Bluetooth speakers. Users would be able to record a custom scare-off recording on the web app which would upload to the device. Then, instead of buzzing, the device will play this recording to scare the thieves away. Additionally, the ability to enable and disable the device through the web app can be implemeneted.


## Detected evidence (automated analysis)

Indexed codebase: 4 recognized source files, 13 KB.
- PHP (language) — detected in the code
- CSS (language) — claimed on Devpost, not found in the code
- HTML (language) — claimed on Devpost, not found in the code
- JavaScript (language) — claimed on Devpost, not found in the code

## Codebase structure (from repository index)

### Files (6 of 6)

```
Device_Code.ino
index.php
motion_data.php
motion_log.txt
read_motion_log.php
README.md
```

### Dependencies

No dependency index available.

### Recent commits (newest first)

- update index.php
- add all code files
- Update README.md
- Initial commit

## Key source files (fetched from GitHub, selected and truncated for size)

### read_motion_log.php

```php
<?php
header('Content-Type: application/json');

$logFile = 'motion_log.txt';
$logData = [];

if (file_exists($logFile)) {
    $lines = file($logFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
    foreach ($lines as $line) {
        if (preg_match('/^(.*?) - (Y|N)$/', $line, $matches)) {
            $logData[] = [
                'timestamp' => $matches[1],
                'movement' => $matches[2]
            ];
        }
    }
}

echo json_encode(['log' => $logData]);
?>

```

### motion_data.php

```php
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $data = trim(file_get_contents("php://input"));

    if ($data === 'Y' || $data === 'N') {
        $logFile = 'motion_log.txt';
        $lastTimestamp = null;

        // Read the last entry to check the timestamp difference
        if (file_exists($logFile)) {
            $lines = file($logFile, FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
            $count = count($lines);

            if ($count > 0) {
                $lastEntry = explode(' - ', $lines[$count - 1]);
                if (isset($lastEntry[0])) {
                    $lastTimestamp = strtotime($lastEntry[0]);
                }
            }
        }

        $currentTimestamp = time();
        if ($lastTimestamp === null || ($currentTimestamp - $lastTimestamp) > 10) {
            sendAlertEmail();
        }

        // Append new data to motion_log.txt
        file_put_contents($logFile, date('Y-m-d H:i:s') . " - " . $data . "\n", FILE_APPEND);
        http_response_code(200);
        echo "Motion data recorded successfully.";
    } else {
        http_response_code(400);
        echo "Invalid data received.";
    }
} else {
    http_response_code(405);
    echo "Method not allowed.";
}

function sendAlertEmail() {
    $to = "charlie.huang@berkeley.edu";
    $subject = "Motion Alert!";
    $message = "Motion detected by the sensor! See https://char787.com/technology/swiper-no-swiping/ for more info.";
    $headers = "From: charliehuang@char787.com\r\n" .
               "Reply-To: charliehuang@char787.com\r\n" .
               "X-Mailer: PHP/" . phpversion();

    mail($to, $subject, $message, $headers);
}

```

### index.php

```php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiper, No Swiping!</title>
    <script src="https://cdn.jsdelivr.net/npm/moment"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/date-fns"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns@2.0.0"></script>
    <style>
        body {
            font-family: 'Poppins', sans-serif;
            margin: 0;
            background-color: #eef1f7;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            color: #333;
            overflow-x: hidden;
        }
        header, footer {
            background: linear-gradient(135deg, #007bff, #0056b3);
            color: white;
            text-align: center;
            padding: 20px 0;
            font-size: 24px;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .container {
            width: 90%;
            max-width: 800px;
            margin: 30px auto;
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
            text-align: center;
            overflow-x: auto;
        }
        h2 {
            color: #0056b3;
            margin-bottom: 15px;
        }
        canvas {
            width: 100% !important;
            height: 400px !important;
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 10px;
            background-color: #f8f9fa;
        }
        .description {
            margin-top: 20px;
            font-size: 16px;
            color: #555;
            background: #f1f3f6;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        }
    </style>
</head>
<body>
    <header>
        <h1>Swiper, No Swiping!</h1>
    </header>
    <div class="container">
        <h2>Motion Detector Log</h2>
        <canvas id="motionChart"></canvas>
        <p class="description">
            Welcome to Swiper, No Swiping! This webpage links to the SNS annoyance and security device that tracks the security of your belongings in real-time. Need to leave your backpack, bike, or other important belonging unattended in a public place? Simply insert or affix the Swiper, No Swiping device and you're all set!<br><br>
            The SNS device constantly monitors for movement. If it detects that it moved, ie someone has picked up your important belonging, it will buzz loudly and uncontrollably, frightening the culprit until they leave your bag alone. Not only that, but it will send you an email notification so you can come back to check on your belongings. What's more, you can access the web server to see the history of your device's movement. If it only moved for a brief few seconds, perhaps it was merely pushed - but if the convenient graph indicates that it moved for an extended period of time, you know someone is trying to steal your stuff.<br><br>
            How does it work? The Swiper, No Swiping device operates off of an ESP8266 microcontroller, MPU6050 gyroscope, and buzzer. When the gyroscope detects excessive movement, it will sound the buzzer and send an HTTP POST request via WiFi to the web server. The web server will receive the movement log and post it onto a database while also sending the email notification to the user such long as it hasn't been less than 10 seconds since the last notification - we want to keep the user informed of all movements, but also not spam them too much. Finally, when any user accesses the web application, they will see the movement history of the device accessed via the database. When not in use, the SNS device can simply be powered off.<br><br>
            This project was inspired by the fright of leaving your expensive personal belongings at a hackathon - or airport, or train station, or anywhere for that matter. Want to leave your bag to claim a seat but don't want it stolen? Simply place the SNS device in your backpack and wander off in peace, knowing that the moment anyone tries to move your bag, you will instantly be notified and the fright of the sound will scare the culprit off.<br><br>
            *Post-Tree Hacks 2025: Nothing on the graph? That's cause there's no hardware device actively writing to the database anymore :(
        </p>
        <iframe width="560" height="315" src="https://www.youtube.com/embed/iazdEkrBMbU?si=3wIz91NfF4d_q-X9" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
    </div>
    <footer>
        <a href="https://me.char787.com" target="_blank" style="color: white; text-decoration: none"><p>me.char787.com</p></a>
    </footer>

    <script>
        const ctx = document.getElementById('motionChart').getContext('2d');
        const motionData = {
            labels: [],
            datasets: [{
                label: 'Motion Detected',
                data: [],
                borderColor: '#dc3545',
                backgroundColor: 'rgba(220, 53, 69, 0.2)',
                borderWidth: 2,
                pointRadius: 4,
                pointBackgroundColor: '#dc3545',
                stepped: true
            }]
        };

        const motionChart = new Chart(ctx, {
            type: 'line',
            data: motionData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    x: {
                        type: 'time',
                        time: {
                            unit: 'second',
                            tooltipFormat: 'HH:mm:ss',
            
[truncated — 2824 more characters]
```